How to optimize images for WordPress speed

Slow loading sites are one of the most common problems we solve. Site speed is something we consider in every element of our blog. One of the most effective ways to improve your site speed is to optimize your images. Many sites are not doing this and it is hurting their conversions and their search rankings.

One of the most effective ways to improve your site speed is to optimize your images. Here’s how: @WPCurve – CLICK TO TWEET

How to know if your images are slowing your site down

An easy way to see if images are slowing your site down is by using the Pingdom Website Speed Test. This will tell you your overall load time and site size. Best practice is less than 3 seconds and smaller than 1mb.

Overall load

The tool also analyzes individual elements of your site so you can find problem areas. These are usually images since they are often the largest files on the site. You can find the images by scrolling down, you should see a lot of small boxes. A slow loading file will be a big box.

speed test image

A good rule of thumb for our blog is keeping the file size of an image smaller than 100kb. Anything much bigger than that can be improved.

Related: WordPress speed – How to reduce your load time to under 1 second

Format before you upload

A common issue is that most people do not format their images at all before they upload them to WordPress. This means WordPress will not only need to load the large image, but also format and edit it to fit the dimensions on your site.

There are plenty of tools available to edit your images outside of WordPress.

  • Pixlr – A free online tool that works great for minor formatting.
  • Preview – Standard on all Macs and has everything you need for basic image editing.
  • ImageOptim – A free tool for Mac that has “save for web” features.
  • RIOT – A free image optimizer for Windows.
  • Photoshop – This is what I use. I like it because of its “save for web” option, which helps me keep file sizes low without losing quality.

Each of these tools allows you to edit the image size in pixels. I recommend editing it to the the exact width of the space you want to put it in. For our posts, our column is 640px wide, so I aim for that.

Choose the right file type

Often people choose the wrong file type for the image they want to upload, which can result in poor quality or huge file sizes. Choosing the right file type can keep your image looking clear and crisp without sacrificing speed.

JPEG – Good for photos of people, places, or things, but bad for screenshots of apps and websites or text.

Rand Fishkin

PNG – Good for screenshots of apps and websites with gradients. It keeps text looking clean as well, but can be problematic for file sizes.


GIF – Good for flat images with no gradients or a short animation. Watch out for small images inside a screenshot like a profile picture or a gradient like the top bar of a browser. These never look good in a GIF.


How to take great screenshots

Great screenshots can add a lot of value to your content. It seems simple enough to take a screenshot, but there are some things you need to consider to make it high quality. If you take an image of your whole screen and then try to shrink it down to a third of its original size, it will distort the image. Text will look blurry and edges will begin to look fuzzy.

Here are a few suggestions:

Resize the browser, not the image

This is perfect for screenshots of websites and web apps. A great side effect of responsive design is that you can resize your browser to closely fit the desired dimensions of your screenshot. Even if you can’t get it to exactly the size of the screenshot, resizing an image from 800px to 640px is much easier and smoother than 2400px to 640px.

Focus on what’s important

Sometimes you won’t be able to resize the browser or your app to the dimensions you want. Instead of taking a screenshot of the full app or the full screen, just focus on the most important area of the screenshot. Feature whatever is most critical to get your point across, and cut the rest out.

Retina screenshot problem

There is a hidden problem for new mac users with a retina display. Taking a screenshot with the native screenshot tool “command + shift + 4” will create an image that is twice the resolution of any other computer. Resizing the image with the methods mentioned above will result in a low quality image. But there’s an easy fix.

The retina display takes a screenshot at 144 pixels per inch (ppi), most other devices are at 72. In the preview app, you can edit the resolution instead of the width and height. Change it from 144 to 72ppi and your image will be reduced to halve in size but still preserve the most of the quality.

How to optimize images for user experience

Consistency in your image dimensions is key to a good user experience. Having a consistent width and height gives your post a more professional look. Notice that every image in this post is 640x300px. For large images, I recommend the full width of the reading column. Smaller images should be about a third the width.

Height is a little more complicated. I recommend being as consistent as possible in the post. Usually just one or two heights will do for large images. I usually try and go up or down in 100 px increments. There is a fine balance to be kept here though.

Related: 12 ways to increase engagement through visual content

Plugins for optimization


If you don’t want to go back through dozens of posts looking for unoptimized images, WP is a great plugin that can check all of the images uploaded on your site and optimize them for you. You can optimize individual images or a bulk batch. The free version works with any image smaller than 1mb. For larger images, use the techniques above to reduce the size and replace the image.

Plugins will slow down your site load times as well. So it’s better to have your images fully optimized before you upload them, but this plugin can save a lot of time if you have a few years of content to go through. But be careful! Working with this plugin can really slow down your site, so plan to use this tool around times when you have low website traffic.

Lazy Load

For photography sites or other sites that rely heavily on images, Lazy Load is a helpful plugin. It makes images load only when they are viewed in the browser. This will reduce your initial page load time

Force Regenerate Thumbnail

Changing the media settings on your site can result in lots of problematic thumbnails that aren’t used and take up space. This plugin can clean up those thumbnails quickly in a batch process.


Site load time should be a high priority for any content marketer. Taking some time to optimize images for WordPress speed before you upload them can make a big difference for your rankings, conversions and customer experience.

Do you have any other image optimization tricks? Let us know in the comments!


Each week we send 1 email to 20,000 smart entrepreneurs just like you. Enter your email below to join the crew.

We will not share your email. 100% privacy


Kyle is the founder of Conversion Cake . He is the author of "The College Entrepreneur" A book for students who want to break into entrepreneurship. Follow him @kylethegray

WordPress problems?

Our WordPress experts have you covered.

Hyper-responsive 24/7/365 WordPress support, maintenance and small fixes.