4 Must-Know Tips for Optimizing Images for Your Website

If you’re not optimizing images for your website, you are hurting your search ranking — and costing your business potential customers 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 quickly leaves without taking a second action (referred to as a “bounce”), this can tell 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.

How to optimize images

Start by checking your website speed load in Google Analytics or here: Google PageSpeed Insight.

Images are the single heaviest load items for most websites, so they need careful attention to ensure they don’t cause lengthy delays that will annoy mobile visitors. You can have high-quality text content, but if no one waits around long enough to read it, it becomes worthless.

Most digital marketing strategies include regular updates to news and blog content — you can get our site audit checklist and spreadsheet in this content strategy article). One of the best ways to enhance your old 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 for optimizing images on your website.

1. Image dimensions

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

Most blogs will have different dimensions, so make sure you measure the image location! There are tools that will help you measure the actual screen pixel dimensions such as Page Ruler and Jing.

For the Forge and Smith blog, the largest width for in-text images is 780px wide. If you’re on a desktop, you can try extending your browser width — it will always cap out at 780px maximum (without zoom). On mobile devices the image scales down to 480px (or even smaller), but never larger.Optimizing Images Tip 1: Blog width 780px

Every single pixel over this dimension will add unnecessary additional load time without added benefit. Retina displays will show twice as many pixels (1560px for the image above), which is great, but the extra load time is not worth the payoff for supporting this. Photographs still look great on retina displays.

You will notice at the top of this article there is a full-width banner area. For these full-width images we use 1800-2000px width.

2. Image format

There are two predominant image formats for the web that you should be using (animated GIF files aside):

Optimizing Images Tip 2: Optimising your images: JPG and PNG

  • JPG: Generally the best format for most types of images, due to its compression options (covered in the next section).
  • PNG: Great for Illustrations, or diagrams with lots of flat, solid colour blocks (such as infographics and icons).

As a general rule JPG is the best fallback, but you can also save a graphic in both versions and see which file size is smallest.

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 achieve similar results.

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

Optimizing Images Tip 3: JPG compression scale
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.

The great thing about WordPress websites is the wealth of plugins that can assist with image compression, and even automate the entire process so that you don’t have to worry about file sizing. Check out our blog on the best WordPress plugins for business websites to learn more about Imagify and Smush Pro, our two top picks.

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 400kb should raise a flag, and indicates that you probably haven’t optimized it.

 

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.

You can read more about optimizing your website in: 6 Ways To Keep Your Blog Posts Optimized for search engines.