4 Must-Know Tips for Optimizing Images for Your Website

If you’re not optimizing images for your website, it’s hurting your search ranking — and costing your business potential new visitors and clients.

The speed at which a page loads is a crucial factor in how it performs based on Google’s most recent updates. Sites are ranked more and more by user experience, which Google determines by user behaviour when accessing and engaging with your site. If someone visits your site and leaves within five seconds (referred to as a ‘bounce’), this tells Google that the site didn’t live up to expectations.

As you can imagine, a slow-loading site is going to cause potential visitors to give up.

Check your website speed: Google PageSpeed Insight

Images can cause heavy loads on your site, and so they need careful attention to ensure they don’t cause lengthy delays. That’s why optimizing images is so crucial. You can have valuable text content, but if no one waits around long enough to read it, it’s worthless. Most digital marketing strategies include regular updates to news and blog sections. One of the best ways to enhance this content and make it enticing is with visuals. But if the images are slowing down your site’s load time, they can do more harm than good.

The key isn’t to reduce the use of images or to stop using them altogether, but to optimize them! We’ve put together a checklist of our four must-know tips for optimizing images for your website. These principals apply to any visuals you use on your website:

1. Image Dimensions

The first step is reviewing where the image will appear within the site — and what dimensions it requires. Generally speaking, as we are dealing with responsive browser widths, it is the width of the image that is the most important (and the height follows in proportion).

There are tools that will help you measure the actual screen pixel dimensions such as Page Ruler and even Jing. You want to find at what browser width the image dimensions are the biggest. Every single pixel over dimension will add unnecessary additional image information that will have to load, without added benefit. Retina displays show twice as many pixels — but the extra load time might not be worth the payoff of crisper images.

There are plugins and services that can manage this, but I have learned these are not as reliable as doing so manually before uploading to the Wordpress media gallery.

2. Image Format

There are two predominant image formats on the web:

  • JPG: Generally the best format for most types of images, due to its compression options (covered in the next section)
  • PNG: For illustrations, icons and diagrams with limited colours. PNG supports transparent backgrounds

(The next being the GIF: Used for animated images).

As a general rule JPG is the choice format – unless you you require transparency or animation.

3. Image Compression

JPG images provide the best compression options for photographs. I use Photoshop to optimize images, but there are many free tools out there that offer the same controls.

There is a range of JPG compression settings with quality from 1 to 100 (notice the difference in colour and detail):

The trick here is to find the right balance between a good-looking image and a compressed file. I use a range between 60–80.

4. File Size

All of this optimizing is intended to reduce the file size, so before uploading make one final check that the image size is suitable.

Anything over 600kb should raise a flag, and indicates that you probably haven’t optimized it correctly.

Optimizing images for your website is an important step to ensure the best customer experience. A happy customer stays on your website longer, and views more pages while visiting. These behaviours tell Google that your site is high-quality and helpful — and that it should be shown higher up in search results.

Originally published at forgeandsmith.com on June 23, 2016.

Like what you read? Give Damian Jolley a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.