Table of Contents

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 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 and affect the Largest Contentful Paint score. 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 improve the speed of your site and boost the Core Web Vitals’ performance.

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.

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.

The 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 file size 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.

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 into 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.

Or you can install the easy Page Ruler add-on 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

  • (also has a mobile app)
  • (also has a 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 file size suitable for the web.

PNGs will often generate a larger file size 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 file size. 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.


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.

Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.
Comments (27)

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 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!

@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.

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:

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.

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

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: 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...

Wow, that’s quite a lot of information. Thanks for the post and the tools. I always rely on Photoshop, I did have to download all images and compress them “manually” in PS. Thank you for the list of these image compression plugins but consistent with me, ShortPixel seems to be the first. Presently, I’m using a unfastened tool called tinypng as well. It’s not a plugin but it enables a lot to compress snapshots without dropping their quality. Having a good picture compression plugin will save a lot of our time. I’m without a doubt going to attempt many compression tools that you listed and will share my experience…!!!

As i said, I have personally used ShortPixels, Tinying and recently Optimus too, but now I have found permanent solution for image compression without any Subscription. I'm also planning to use Optimizilla website for online image compression. Its pretty cool and easy. I think everyone should try it atleast once. Also for newbie blogger, I would recommand WP Smush to start with. Then they can try other tools as they progress in blogging.

Anyways, thanks for taking the time to write such an extensive review on this subject, it should be very helpful for many bloggers. Please keep sharing and good luck.

Thanks a lot for sharing this awesome post, I was trying to speed up my WordPress website and this post helped me a lot in decreasing images Load time on my website and Now, I have installed WPCompresson plugin and here's another guide that helped me:, Hope it will help your readers as well.

This is a very good and more informative resource about image optimization. thank you

wow sir great article, I'm thinking to shift my website to wordpress and also it could be fast with this amazing method.

Thanks for this article because many people don't know how to fast his/her website and much more this article will help them for makin website even faster.

wow such a lovely information. Thanks for sharing with us. It will really help us for growing our website.

Latest Articles of Page speed and caching
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat