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: goo.gl/4mnLfS @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.

PowerInbox_screenshot

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.

Happiness-Report-February

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

WP Smush.it

If you don’t want to go back through dozens of posts looking for unoptimized images, WP Smush.it 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.

Conclusion

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!

JOIN 20,000 AND GET OUR BEST CONTENT

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

About

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

16 responses to “How to optimize images for WordPress speed”

  1. Instead of WP-Smush.It I’d suggest EWWW Image Optimizer.

    They do the same thing, but EWWW installs the needed executable files locally, instead of (in the backstage) sending an image over the Internet to get the processed result.

    Also, EWWW allows creation of .webp images. They work very well on Google Chrome and Opera (for now), and the plugin itself suggests the .htaccess rules needed to serve .webp images where they work, and .jpeg elsewhere.

    That’s what I use. 🙂

  2. Kyle Gray says:

    Wow Mariana! thanks for that awesome recommendation and explanation. Good to know!

  3. Hugh Culver says:

    Great one, Kyle. I didn’t know half of this. I’m going to start with Pingdom Website Speed Test

  4. Kyle Gray says:

    Thanks Hugh! Images are a such an easy way to get some extra speed out of your site. Let me know how much time you can shave off your load speed.

  5. Dan Chapman says:

    I really like https://tinypng.com for quick drag and drops. and free for the most part. they’ve also released a WP plugin

  6. Kyle Gray says:

    Thanks for sharing this Dan, it’s a great tool! I always have to most difficulty getting the PNG file size down.

  7. Jacob Bush says:

    If you want to resize and optimize images, you can also try http://resizeimage.net/, it can resize and compress your png images without losing transparency, and optimize your animated gifs without losing animation, it’s also a good idea to use the CSS Sprites method, and set up a CDN for your website, or simply put the images on an image hosting site like photobucket, imgur, amazon S3, etc.

  8. Jan Koch says:

    I’m using Kraken.io for image optimization. Costs a small fee each month but I haven’t seen a plugin that comes close to the results they produce.

    Anyways, really helpful content Kyle!

  9. Kyle Gray says:

    That tools looks great Jan! Good images are really important to me and I may give that one a try. Thanks for sharing!

  10. ThrivingGirl says:

    This is super helpful. As a newbie blogger, I’ve gone image crazy WITHOUT thinking of my blog’s load time. Geez. I’m running Smushit now. I like the name best. LOL. Great post. Very helpful. I just subbed.

  11. Kyle Gray says:

    I’m glad you enjoyed it. It’s something a lot of people miss and it is very easy to really boost your load times by fixing up your images.

  12. alex baldetti says:

    very very helpful. Thanks!
    just a question, using “resize for web” in Photoshop, jpeg srgb, what is the right size good to for retina displays?
    Thanks
    Alex

  13. Alex Florescu says:

    I recommend you to give https://ShortPixel.com plugin a try, it looks like you could optimize the images on this very blog post by 50% 🙂
    https://shortpixel.com/free-demo/site/https://wpcurve.com/optimize-images-for-wordpress-speed/

    Here is the plugin:
    https://wordpress.org/plugins/shortpixel-image-optimiser/

  14. If you optimize images BEFORE you upload, then your resized images in WP (large, medium, thumbnail) won’t be optimized. Isn’t that a problem?

    Or do you only upload images in the exact size you will be using them?

  15. Paul says:

    Except using image editor like https://imagechanger.net, you may want to enable mod_deflate and gzip for compressing images from apache server.

  16. Marcco Tomosius says:

    We are using https://cheetaho.com. They have wordpress plugin

    Here is a link https://wordpress.org/plugins/cheetaho-image-optimizer/
    Hope this will help you.

Leave a Reply

Your email address will not be published.

WordPress problems?

Our WordPress experts have you covered.

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