Do you want your website visitors and Google to love your site? Then make sure you resize photos for websites the correct way so that they load quickly!

Google loves a quick loading website and is understood to include load time as part of its ranking algorithm. That makes sense – what is the point of Google choosing the best answers to your query if it takes so long the load the page that you either hit the back button or leave your screen to make a cup of tea?  You also want your visitors to have a frustration-free stay on your pages AND to see quality photos of your products or services at their best. The larger the photos on your site, the more impact correct resizing is going to have on your page load times.

Two things matter with photo resizing for web: dimensions and quality.

WHAT SIZE TO MAKE WEB PHOTOS

We’ll start with resizing your photo’s dimensions. Your dimensions are measured in pixels and are determined by your website design or theme. You can find them by asking your website designer, SquareSpace or WordPress theme developer or checking FAQs or other documentation. Most websites today are responsive, which means the page layout changes to fit the device, whether a large screen, tablet or phone. You resize your photos to the maximum width needed and your website cleverly delivers the right size for the device. Retina screens on newer Macs need twice the pixels of regular screens to display crisply, so if your website displays photos at 1200px wide, you’re going to resize to 2400px wide, assuming you want to cater for the new screens.

HOW TO RESIZE YOUR PHOTOS

For those of you with Photoshop, you can use the crop tool to make your photo the right dimensions. You also can resize your photo online in the aptly-named PicResize. It is a free tool with clear instructions on the help page which will resize photos up to 100MB.

Note that you can crop images, making them smaller than the original but you cannot make your images bigger without losing quality. It’s disappointing, especially after watching episodes of Numb3rs where one of Charlie’s algorithms magically turns an indistinct video image into a sharply defined still for identifying the bad guys. There are some Photoshop plug-ins and methods for upscaling photos, but these generally are for high resolution files; they aren’t going to help a cropped phone camera photo. So if you want good looking photos on your website, start with good quality photos that are either the same size or bigger than you need.

HOW TO SAVE FOR WEB

The second part of getting your photos built for speed is saving photos for web. It’s also the part that is often missed because people don’t know about it. You need it, especially on larger and full-width photos. In this process, the photo file size is reduced, typically by more than half without an easily discernible reduction in quality.

Luckily, there is a great website and app called TinyJPG (with a sister TinyPNG) which will save for web for you for free. You can drag and drop your photos onto the website to have them  saved for web. There is also a paid Photoshop plug-in (for CS5 and above) and a WordPress plug-in to save all your photos for web (up to 100 a month for free). If you are saving for web in Photoshop, there is functionality called, unsurprisingly, save for web, which allows you to save for web while looking at previews to balance the file size with quality. The above image was a screenshot saved as a PNG and reduced in size by 71% using TinyPNG.

So there you have it – how to resize photos for websites in two easy steps.