4 Key WordPress Image Optimization Tips

Images are often the best part of a WordPress website. They catch the eye, set the mood, and invite the emotions to take part in what can otherwise be a boring experience.

However, image files are often the biggest files on the server, and they tend to affect page upload speeds more than anything else. With new display technologies such as Retina becoming more and more popular, and mobile device usage on the rise, it pays to keep your image quality up and your file size down.

To help face these challenges, this post will look at four valuable suggestions to make the best choices when it comes to image optimization.

1. Keep the Original File

This is an excellent habit to cultivate, starting now.

In order to best optimize images, you will need to experiment with different compression options. With that in mind, always remember to keep the original image file safe. Once a file is compressed you can’t always undo the change.

It might sound obvious, but this one simple tip might save hours of work.

2. Choose the Correct Format

Below is a table comparing the four most popular graphic file formats. It shows the most important details, pros and cons, and the best format to use for typical graphic elements on the page.

Download the cheat-sheet here
File Extension.jpg.png.gif.svg/.svgz
Short forJoint Photographic Experts GroupPortable Network GraphicsGraphics Interchange FormatScalable Vector Graphics
Color Range16.7 Million colors, 24 bit RGB and CMYKDirect Color (thousands of colors). 8 Bit, 24 Bit RGB or 32 Bit RGBA256 Colors, 8 bit16 Million colors, supports sRGB gradients
TransparencyNot supportedAlpha Channel transparrency enables blending, shading and opacity gradients.One color is set as transparent, no shading or grading of transparencyMulti-level transparency and opacity supported
ProsWith jpeg you can compress complex graphics to a manageable file size“Lossless” compression means no pixilation and crisp edges, combined with userful transparency featuresTypically very small file sizes. Animation is supported“Lossless” scalable vectors, for any device and printing, also compresses well
Cons“Lossy” compression means poorer quality with reduced file size and with multiple edits and savers. Typography often suffers blurred edgesTypically larger file sizes than jpegs. (Around 5 times larger than jpegs on mot photos)Doesn’t handle complex graphicy od depth of colorNot supported on a few older browser versions. Saving photos not really possible.
Best forPhotos, complex graphics, color tonesScreenshots, Typography and maintaining image qualitySmall vectors, logos, crisp edged graphics, novelty drawings and simple animations or transitionsScalable backgrounds, text, vector images

Here’s an example of how you might consider using different image file types:

jpeg file size 186KB (reduced from 1.02MB)

JPEG file size 186KB (compressed from 1.02MB)

PNG 624KB reduced from 1.02MB

PNG file size 624KB (compressed  from 1.02MB)

By looking at this comparison you will see that JPEGs are usually your best bet for photos when you’re on a bandwidth budget. In the above examples there is almost no visible difference in the images, but the PNG is much larger than the JPEG. However, keep in mind that every single time you edit and save a JPEG, you lose a little bit of the original image quality.

Vectors look great on any scale while raster images will pixelate

Vectors look great on any scale while raster images will pixelate

If your image contains typography, or is a screenshot or some other form of computer-generated image – especially vectors – it is generally better to opt for SVG or PNG. And while might never use GIFs, but they are the file type of choice when it comes to using animated images.

New File Formats on the Way

Google is currently developing WebP, a new image format the provides both lossless and lossy compression.

They claim file size reductions of 26% compared to PNGs, with no loss of quality. It also works on most new browsers. The tech is based on the VP8 video compression techniques, and independent tests have reported a number of issues, including color loss. Nonetheless, as Google continues to work out the bugs, this will be a graphics format to keep your eye on.

3. Use the Best Retina Format

Retina technology arrived on the scene with huge picture quality benefits, but also created a couple of problems for us along the way. Typical monitors use 72ppi (pixels per inch), whereas a Retina display ranges from 150 to 300ppi. This makes images and fonts crisper and more beautiful, but also makes for larger image files and reduced page loading time, especially with mobile devices.

The good news is that the human eye actually picks up little difference in quality on Retina devices after compression. A huge JPEG (inches, not kilobytes) saved at a high compression rate can look better than a smaller image at reduced compression when re-sized for your page.

Another way to solve the problem is to create a second version of each of your image files at double the size. A 100 x 100 px image at 80ppi will need to become 200 x 200 px, then re-sized back to 100 x 100 in your page, or alternatively increased to 160ppi.

Still with me? If not, a plugin like WP Retina 2X can do a lot of the work for you. You will need to add “@2x” to the second file name (example.png will become example@2x.png).

Here’s another great resource: Retina.js instructs the visitor’s browser to check each image on the page to see if there is a high resolution version on the server (with ‘@2x’ in the name), and swaps the image in place.

Also keep in mind is that WordPress automatically compresses JPEG images to 90% of the original. To disable this, add the following snippet to your theme’s functions.php file:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

4. Choose the Best Compression Tools for WordPress

WordPress spoils us for choice when it comes to automating image compression. Here are just a few of the many great compression tools available online.



This is probably the best tool to use to take the hard work out of compressing PNG images. You simply upload your images to the site and download the compressed versions for free. You’re able to upload up to 20 images with a maximum size of  5MB each.

There are also great TinyPNG plugins available for WordPress (here’s my favorite). And here’s the kicker: the compression results in TinyPNG are better than the Photoshop standard. With Photoshop you need to posterize the image to optimize the background blending results in order to match the regular results from TinyPNG.

There is also a version by the same designers that compresses JPEGs, called Tinyjpg.

WP Smush.it


This is another great WordPress plugin – with a long history – that reduces image sizes and speeds up page load time.

EWW Image Optimizer


This option works well too, but you need to take note of the warnings. For example, once you’ve compressed a GIF, you can no longer edit it.

ImageOptim (for Mac)


ImageOptim is a great desktop tool that seamlessly integrates some of the best optimization tools available. It’s ‘lossless’ and you can use it in conjunction with other compression tools, and best of all, it’s open-source (i.e. free).

Use your other compression tools first, then drop files in the ImageOptim folder to further reduce size.


Getting the best out of images in your design takes a little know-how and some good organization. It is always going to come down to a compromise between the quality of the image and the size of the file.

Using the tips we have looked at in this post, you will be able to make the best format choice, and continue to use high-quality, Retina-ready images for maximum impact in your design. And trust me – your hard work on image optimization will make a huge difference to your site!

Tags: , , , , ,
8 replies
  1. Steve Lock
    Steve Lock says:

    We’ve tried all of the above (except ImageOptim), but in our experience, kraken.io is by far the best solution. It has better compression than TinyPNG and it supports all formats; GIF, PNG, JPG and even SVG’s are optimized! Also, their WordPress plugin automatically takes care of optimizing al images for you.

  2. Rhoody
    Rhoody says:

    While the post is good and informative, above’s comment is Steve Lock nonsense and the only purpose is to get his referral link on board.

    I tested Kraken, the first thing they do is offer you 5$ discount for a 5 star review.
    Hope you’re doing great! I’m just checking in to see how Kraken.io is working for you. Because you’re one of our most active WP users we would like to give you a $5 USD credit in return for a plugin review on WordPress.org.

    How does it work?

    1. Go to https://wordpress.org/plugins/kraken-image-optimizer and log in to your WordPress.org account. If you don’t have it already you can create an account in a matter of seconds.
    2. Give us a 5-Star review and post one or two sentences about your use case or just why do you use (and hopefully love :)) Kraken.io.
    3. Receive $5 USD credit applied to your Kraken account. No strings attached.

    Shoud you have any questions about anything Kraken-related I will be delighted to help you.

    For the results, I checked against EWWW. There is no difference visible, the compression rate of EWWW was better (filesize smaller). Kraken also had a “miss” rate of over 10%. EWW has also comes with compression errors, maybe 2 out of 100 pictures, but re-tries it.

    Not trying to sell EWWW , but it is a plugin I use and it helped me to speed up my sites with big galleries significantly resulting in meeting G’s page-speed criteria. No issues with .gif, I don’t use them.


    • Richard
      Richard says:

      Thx for the tips, excellent article.
      eWWW can’t be run on my shared hosting
      Smush it pro is needed for ssl .. Bit expensive as it’s the only WPDEV app I need from them (need that yearly $99 just to run the app you’ve bought)

  3. Raymmar Tirado
    Raymmar Tirado says:

    This is a great article for beginners but I was looking for something a little more in depth. being a long term enfold user myself, I love the large images I can use as backgrounds for the different color sections. But they definitely affect my page load speed.

    I have been looking for a good optimization options and thought this article might give it to me but alas, it was nothing more than a beginners guide to online images. Essentially a copy of the same post I have already read a hundred times on other blogs.

    Additionally: Smush.it is being discontinued and their service is no longer being supported. (http://www.riseforums.com/threads/yahoo-discontinuing-smush-it.1518/)

    I love the Enfold theme, and I appreciate your recent entry into the content marketing landscape, but if I were running your content strategy, I would push you to explore your content further. Do not just replicate content that already exists in many other places, create content that speaks to your particular audience.

    Show us the tools you use on your website sites. Give us insights that we can only get from your team. Tell us how to optimize our enfold sites or give us tools that can make them more powerful. You all are awesome so why not show us how to be more awesome online?

    I know you have other themes, but I also know Enfold is your bread and butter. I have been using your theme for more than a year now and I love your support and frequent updates. Basically I think of you all as my remote development team.

    Enfold has allowed me to do so much online that I think the power of your blog lies in showing that off. Showing off the power of the theme and what people can do with it with no development skills. That is where you will find a niche in your content marketing efforts. At the intersection of useful information and a real connection between the people who love your products.

    And you might even be surprised to find that your audience is willing to write some of that content for you (hint, hint!)

    Anyway, thanks for the amazing theme and keep up the good work!!!

    P.s. – I have at least 3 concepts (in Evernote) for articles about WordPress and Enfold that would make a great guest blog series. I have been holding off on them because they do not speak directly to my audience but if you are interested in a collaboration with an experienced Enfold user and power online marketer then let’s talk.

    Thanks again guys!

Comments are closed.