Have you ever tried to resize multiple images for a website?
One of the most time consuming things in building a website (apart from getting the final content from a client) is dealing with images, making sure they are of an appropriate size so they will load quickly and display well. In the past we have used Photoshop to resize images for the web. We had a bulk process set up. It worked but was slightly complex and difficult for our clients as most don’t have access to Photoshop.
We recently created a site for a real estate agent where there was a need to be able to quickly resize a number of images on an ongoing basis. Every time they list a new property there are at leat 10 images to resize. The images are all the right proportion and just need to be reduced in size so they will load quickly and keep the page load time down. We advise our clients to keep the file size to between 60 to 120KB.
We looked around for a quicker way to bulk resize images and found this two step process.
Two step process using the Finder and ImageOptin
We are an Apple based business so this solution works using the built in Apple preview image viewer/editor in Finder and a programme called ImageOptin. ImageOptin has a Mac app and an online service. It reduces image file sizes, so they take up less disk space and download faster by applying advanced compression that preserves image quality.
In the Finder set the image width in pixels
Did you know that you can resize images quickly using the Finder on a MAC?
- Copy the folder containing the images you want to resize (so you don’t loose the originals!)
- Rename the folder to “Name Optimised” (makes it really obvious where your resized images are)
- Select all the images in this folder
- Right click on the images
- Open with Preview
- Select all the images
- Go to Tools > Adjust Size
- Set the width* of the images and leave proportional (see below for approximate sizes)
- Click OK
- All the images will then have been resized to 1500 px wide
*Image width – a rough guide
1500 pixels wide if the image is going to go the full width of the website
800 pixels wide if the image is going to go across half the website
500 pixels wide if the image is going to go across a quarter to a third of the website
In ImageOptinIn to reduce the size of the image (KB)
- Open ImageOptin (application)
- Go to Preferences
- Check the settings for jpg (approx 50%)
- In Finder select all the images in Optimised folder
- Drag them into the ImageOptin frame
- All the images will be optimised
P.S: Don’t forget that images are a great tool to enhance your SEO
How you deal with images on your website can have an effect on the SEO (Search Engine Optimization) for your website.
- Name your images with keywords appropriate to the page they will appear on
e.g. reize-images-for-web.jpg is much better than placeholder.jpg or worse still, IMG_1234.jpg - Always give your images an Alternate Text Title that describes the image
Resize images for web post - WordPress often puts an automatic link on images which, when clicked, will show you just the image itself. Make sure you replace this with an appropriate link of click the “none” option for the image link.
