Image Optimization – An Easy Win For A Faster Site

Website speed optimization can be a complex and technical practice, but the non-techies out there will be happy to learn that one of the biggest problems is actually easy for the layperson to solve.

Images are one of the biggest drains on load time

Images are typically the one of the biggest drains on page load time. Even with caching and a CDN, an unoptimized image will still drag down your page loading time. But, as the website owner, images are completely under your control, so if you can get a handle on how to work with and optimize images, you can have a great impact on the speed of your site.

Based on the websites that I look at during my WP Rocket customer support duties, I see that images contribute, on average, about 30% of the total page load time. Often this is the single largest factor of the loading time. In extreme cases, it could be closer to 60% of the loading time.

Here’s an example of what un-optimized images will do to your site:

Large Images slow down your website

The load time is 12 seconds and the size of the page is 8MB. Of those 8MB, images account for 6.7MB. This is out of control!

The number of http requests is commonly cited as a factor in load time, and while it is important, ultimately it’s the page size that is the real indicator of speed or slowness. You can have a small number of http requests, but if those requests are summoning giant images, you will have a problem on your hands.

Reducing page size by reducing image size is a simple and effective strategy for improving load time. Click To Tweet

File size matters: why you should resize and compress images

Understanding image dimensions and file sizes

The dimensions of the image, i.e. how much space on the screen an image takes up, are measured in pixels and while they do not 100% dictate file size, they are related. The larger the dimensions of your image, the larger the file size.

File size is measured in kilobytes (KB) and megabytes (MB)
1MB = 1000KB

To give you a point of reference, the main content column of this blog is 796 pixels wide.

If you take a photo with your smartphone, depending on your settings, that photo could be in the region of 2500 pixels wide (or even more) with a filesize of 3MB (or 3000KB). If I were to take a photo with my phone and upload it to this blog without any editing, I’m going to be uploading a file that is about 3 times as big as it needs to be – a total waste of resources and a drag on page load.
So while snapping phone pics and uploading to your blog might be simple, it creates a real problem if you want a fast site,  by adding tons of unnecessary weight.

Before you upload that photo, you need to do two things: resize it and compress it. Click To Tweet

How to resize images

So the first thing you need to do is resize your images to the correct size for your site. For blog images, figure out how wide your blog’s content area is  and never upload an image wider than that. If it’s going to be used in a slider, make sure you determine the dimensions of the slider first.

How do you know how wide your content area is?

If you know how to use the developer tools built in to Chrome or Firefox, you can use that. But if that sounds scary there are simpler tools available.
If you’re on a Mac, there is a screen capture tool, Grab, already built-in, and when you outline an area on the screen it will tell you the pixels. This article explains in more detail.

Or you can  install the easy Page Ruler addon  for Chrome

Once you’ve figured out what dimensions your images should be, you can use any of the below tools to resize your images accordingly:

Resizing applications and tools

Online tools for resizing

  • Picmonkey.com
  • Pixlr.com (also has mobile app)
  • Fotor.com (also has mobile app)

It doesn’t matter which one you use – all you need to do is locate the resize feature. You’ll be able to enter the desired pixel width and the application will make sure the image stays in proportion by adjusting the height automatically.

Common image formats

Images on the web should be saved in either .jpg, .png, or possibly .gif

JPEGs are best used for photographs and general purpose images where you do not need any transparency. You can compress them easily and get a smaller filesize suitable for the web.

PNGs will often generate a larger filesize so should only be used when you have an image that requires transparency.

GIFs are less frequently used. They have a limited range of color so can only be used for very simple images, but can produce a small filesize.

How to compress images?

So we’ve dealt with the physical dimensions of the image, now let’s deal with the ‘weight’ of the image. We want to compress the image to make it as lean and fast-loading as possible. The goal is to reduce the filesize. There isn’t a magic number as to what each image should be, since it depends on how the image will be used. Images being used in a hero banner or slider will be bigger, but if you have a few of them, I’d aim to get each one down to 100KB or less.

Small images that are going to be used for thumbnails, logos etc will be much much smaller. The logo at the top of this blog, for example, is 3.8KB.

With compression there may be a slight loss in quality, so you’re looking for a balance between quality and file size. But always remember that the smaller the filesize, the faster the load time will be.

Applications to compress images

  • Photoshop – make sure to use the Save For Web option
  • GIMP
  • ImageOptim (Mac)

Online Tools

WordPress Plugins

It’s preferable to resize and compress your image before you upload it to WordPress.

However, if your site is already live, you will need to deal with the images that are already there.

For the crucial images such as logos, headers and others that load on every page of your site, it would be best to make new versions of the images as described above, then install the Enable Media Replace plugin. This will allow you to simply replace existing images in your media library with the new, optimized ones, without breaking any links.

For the other images sitting in your media library, where it would be unrealistic to go through and fix them all individually,there are a few handy plugins that will help you.

Imagify

Late last year, the company behind WP Rocket decided to take load time optimization further by creating an image compression WordPress plugin: Imagify. Because images impact load times so much, a compression tool is the perfect complement to a caching plugin. We offer 3 modes of image compression to help you get real control over your load time performance.

Imagify can optimize your existing media library in bulk, or you can manually select which images to optimize.

If you build sites for clients or have a site with multiple users where you cannot ensure that everyone is using best practices and uploading nicely optimized images, Imagify can assist by automatically compressing and resizing images as they are uploaded.

Before and after load time testing

If you need to benchmark the speed of your site, or do before/after comparisons with images after optimizing, follow this guide on how to properly measure the load time of your site.

About

Lucy is a long time user of WordPress, (since 2004) and has provided WordPress training for bloggers and businesses for over 5 years. She has spoken at several WordCamps and is an active member of the WordPress community. You can follow @webtw on Twitter.

Subscribe to our newsletter Latest news of the rocket, at the speed of light!

21 comments

Comment

Please provide a compare of Imagify with other services specially Kraken, Thanks.

Thanks Lucy I never knew about Imsanity and so needed it. I think It’s going in every client install now.

When working with .png-files http://tinypng.com is also a really nice tool to shrink your images

Having used Kraken for several months, I saw a huge difference! I was using EWWW Image Optimizer thinking that it was optimizing the best for my site…but that was wrong.

It was compressing images, but it wasn’t doing anything to help with the load time. I switched over to Kraken, and the compression is great and fast, but most importantly, you can see the effect on your site load time. We use big images, and it really compresses them well without losing quality on retina screens.

It will be interesting to see the compression product you all have. If it’s better than Kraken, count me in!

WP Rocket Support Team

@Amir – Imagify isn’t launched yet, so we can’t give you the comparison just yet 🙂
@David – Glad you found a useful tip in this post – Imsanity is a must-have for most client sites!
@Niels – The plugin mentioned in the post “Compress Jpeg & Png” is based on the TinyPNG API 🙂
@William – Kraken is a great tool!

Thanks for this post. I think I will try kraken plugin. I’ve been using their free online tool for some time now and makes me curious of how their plugin works.

Thanks for the share!

You’ll love using Caesium. It’s a free tool that is marvelous for bulk image optimization.

http://saerasoft.com/caesium/

This is such a detail guide on images optimization. I actually learned Photoshop to optimize all images on my website!!

For anyone looking for an Imagify and Kraken comparison, I put one together complete with sample images and a video review: http://nicholasgarofalo.com/imagify-vs-kraken/

    WP Rocket Support Team

    Hey, thanks for sharing the review 🙂

    For your information, Imagify has a new compression level since a couple of weeks: Ultra. You can have better result than the Aggressive mode 🙂

Awesome! I added the update and new test files with the new ultra option. When do we start getting auto-updates with the plugin? Just manually updated when I realized the new ultra option wasn’t appearing.

    WP Rocket Support Team

    Imagify is still in private access. When it will be public you will be able to update it directly from your WordPress administration 😉

Thanks for the great post, @Lucy. One question I have that you didn’t address is sizing to account for retina displays. Should all of my images be double the pixel dimensions I need in order to display clearly on retina screens? In other words, what steps do you take to ensure that retina display is not adversely affected due to image resizing and compression. Thanks!

Compress png and jpeg is the best plugin to compress images…a test to prove the claim http://www.wpcub.com/wordpress-image-compression-plugin/

Now I am WP-ROCKET users can participate in the offer? For example, 50 % discount on services. Chinese users because it is simply too expensive.

I installed WP Rocket on a clean site, and it works. Then I installed Imagify, and it don’t compress. Just “rolling” when I click the “Imagif’en all”.
Are running on latest versions of WP, Rocket and Imagify.

Very nice guide, thank you for the information! I first got introduced with image optimization when I ran across this guide: http://www.paintshoppro.com/en/pages/image-optimization/ but I wanted to read more about it before I get started, and I came to the right place. This is very informative, thank you! I am ready to get started! 🙂

Great article indeed in all aspects. Images downsizing for a website > A photographers headache to show proper image quality.
Imagify we use for one of our online shop website, which works there fine. For fine art photographs to display is quite a different question as for products, blog images…etc. So far Photoshop served me quite good with Save for Web for my fine art photographs. Best option to see how a image is displayed. But now, the Retina screen is on and will most likely take over in the future. A new challenge for image display and file sizes for loading a website fast, or lets say, to get a good performance for a website.

Ciao Anette

I haven’t became aware of image compression and optimizer tools before reading this post. Most of the times I used to publish the image on my blog, but I was no thought about image compression and optimizer that is why I was posting big size image.

Optimizing images & using a CDN has become necessary for online publishing. And we all know that large sized image is not good to the fast loading of any page. I was concerned about to compress my images before I upload, it sucks blog load speed. But now I have got a solid solution from this post. Image compression is a must task to accelerate blog speed. This is a great and handy article for those who are using more images on their blog or website. I am excited to work on these tools for sure.

I am thankful that you created this blog for bloggers. I am new to the internet world, and surprisingly I found you to guide me in a right direction…

Leave a Reply

Your email address will not be published. Required fields are indicated by *

[i]
[i]