Elegant Themes Blog

Stay up to date with our most recent news and updates

How To Optimize Images For Your WordPress Website

Posted on February 17 by in Tips & Tricks | 75 comments

How To Optimize Images For Your WordPress Website

Images are a vital part of grabbing a visitor’s attention, breaking up long pieces of content, and helping your content be shared across the web. Unfortunately, images also increase the size of your pages.

Every image that you add to a page has to be downloaded by visitors from your server to their computer. This increases page loading times, which can frustrate visitors and have an adverse effect on search engine rankings.

Too many images will also increase your bandwidth significantly and use up more storage on your server. This is unlikely to be a problem at the start of your website’s life, however it could increase your hosting costs over time.

In this article, I would like to show you how you can optimize your images for your WordPress website.

File Formats

Graphic applications allow you to save images in a number of different file formats. The most commonly used file formats online are JPEG and PNG.

JPEGS are better suited for photographs as they contain many colors. The format uses compression in order to reduce file size. PNGs are more suited to screenshots and website design images such as icons and buttons. It uses lossless compression techniques so quality is higher, however this also means larger file sizes.

Quality of JPEG Images

Optimizing your images will reduce file size, but it will also effect the quality of the image.

The other format that you will see used frequently on the internet is GIF. GIFs are better suited for low quality images with just a few colors. Today, the GIF format is widely known on the internet as being the file format for animated files.

Optimizing Your Images Before Uploading To Your Website

WordPress has a useful thumbnail feature that will automatically create three different sizes of any image you upload. This can be found in the WordPress admin area under settings/media.

You can adjust the thumbnail sizes are you see fit. or example, you can configure WordPress to create a 150×150 pixel thumbnail image, a 300×200 pixel medium image and a 600×600 pixel large image.

If you uploaded an image that was 1,000 pixels in width, you could display the large image in your article and link to the full size image. This is exactly what many bloggers do, however it is not the optimal way of handling images. Whilst the file size of thumbnail images will be smaller as WordPress reduces the size of the uploaded image, WordPress does not compress images when it creates thumbnails. A more efficient method is to optimize images before you upload it them to your website.

Most graphical editing applications allow you to reduce the quality of an image for the internet. In Photoshop, this option is called “Save for Web and Devices”.

Save for Web and Devices

Most graphic editing applications have an option to save images for the internet.

Photoshop allows you to choose the file type of the image and the quality of the image. The bottom left hand side of the interface also details what the image file size will be if you save the image using a particular setting.

Choose the Quality

Photoshop allows you to choose the exact level of optimization.

Comparative optimization options are available in other graphic editing applications, such as GIMP. If your graphical editor does not have an optimization option, I recommend checking out one of the following applications:

All of the above applications are free to download. There are many premium applications available online too though I do not see any major benefits to using them over their free alternatives.

Radical Image Optimization Tool

One of the best features of Radical Image Optimization Tool is the ability to compare the image you are optimizing with the original image.

Optimizing Your Images After Uploading To Your Website

There are many plugins available that can optimize your images after you have uploaded them to your website. I believe that it is better to optimize images before you upload them, however I do understand why many website owners optimize images after uploading as it can save time.

One of the most well known optimization plugins for WordPress is Yahoo’s WP Smush.it. Utilizing the Smush.it API, the plugin allows you to strip meta data from JPEGs (date, time, camera etc.), optimize JPEG compression, convert GIF files to PNG and remove unused images.

Smush.it

Smush.it can optimize all of your images at once.

If you have not optimized your images in the past, Smush.it is a quick and effective way of reducing the file size of all of your uploaded images. Be warned that the plugin can be a CPU hog when it is optimizing images. It is therefore best to run the application when your website traffic is low e.g. overnight.

Alternatives to WP Smush.it include EWWW Image Optimizer, CW Image Optimizer, Imsanity and Hammy. Many WordPress users prefer using these plugins as they do not rely on an external server to process your images.

Final Thoughts

The importance of optimizing your images should not be underestimated. Optimizing your images will reduce your website’s page loading times, reduce bandwidth and improve the browsing experience for visitors. Your search engine ranking should also improve due to your pages loading quicker.

Please remember that whilst compressing an image will reduce file size, quality can also be notably reduced if you compress an image too much. It is therefore important to get the balance between image quality and image file size right.

For those of you who place a big priority on image quality (e.g. photographers), I recommend trying out Lazy Load. Once the plugin is activated, your images will only be displayed to visitors when the images are visible in their browser. This greatly reduces the initial size of web pages as images will only load when the user scrolls down the page.

If you would like to know more about optimizing your WordPress, I encourage you to read my recent article “Optimize Your WordPress Website Using These Simple Tips“. In the article I cover a lot of important topics such as reducing post revisions, enabling caching and utilizing a content delivery network.

As always, if you have any questions regarding this tutorial, please leave a comment below :)

75 Comments

  1. Hi Kevin
    I’m with you I optimise my images before uploading using an old version of Fireworks – yes it still does the job.

    With the current fashion for large header images and sliders, those images have to be optimised.

    • Kevin Muldoon

      I agree. I’m not sure if major websites are doing optimisation beforehand or afterwards. I’d be interested to see what guidelines top websites have for authors.

      • Hi Kevin, this is a very nice article. I have been using SmushIt since a long time. I do a batch process via ImageOptim before uploading them. Currently I am facing some issues after updating my theme into TwentyFourteen. Some of the featured images are resizing via html/css resulting bad user experience. I guess it is something to do with responsive theme that resizing such images for better Mobile Experience.

        2nd issue that I came across was both PageSpeed and GTMetrix while testing my site. It said some of my images are yet to compress. How does one go for a 2nd level of compression!

        Thanks

  2. I’m curious if programs like RIOT or PNGGauntlet are better at optimizing images than the WP plug-ins like SmushIt?
    I have a few websites with many JPEG images and I have to take care of reducing the volume of these photos …

    Best regards

    • Kevin Muldoon

      I have never seen a direct comparison that compares an image optimised before using an image program and an image optimised afterwards using Smushit.

      I’m not even sure if there is an easy way to compare the quality of images – i.e. other than just looking at them.

      I think it is better to optimise beforehand as it cuts down the stress that plugins such as Smushit puts on your server.

      • Smush.it sucks major… go with EWWW or RIOT. The best program I use is called Caesium, but it’s not a plugin. What I do is finish all my images how I want, put them in a folder, then batch process them all at once and set the quality to about 90% or so. works wonders.

    • I’ve been using RIOT since a couple of years and is really what I found the best tool for optimizing images as you actually see the results before doing the job and decide which compression best applies for a given image.

  3. Thanks for the list of plugins. I’ll pass this info along to my clients.

    I agree that the best practice is to optimize your photos before you upload them.
    There are several online or browser based free photo editing programs – for instance Pixlr – that are a terrific option for optimizing photos without the price tag of Photoshop.

    • Kevin Muldoon

      Great suggestion. I remember reviewing Pixlr and some similar services years ago. :)

  4. I frequently use a very lightweight application called ‘fast image resizer’. It’s very handy for batch image resizing and optimisation. I always recommend it to folks who wouldn’t be very good at Photoshop etc. It can be downloaded free here http://adionsoft.net/fastimageresize/

      • Yep, it’s very handy! Having the images optimised prior to uploading is crucial especially in areas where internet connections aren’t great. This little app its just a drag and drop process, literally fool proof!

  5. Great tutorial, I really liked the simplicity an clarity as you have presented this tutorial, I enjoyed reading it.

  6. I love your themes and your customer support systems. These latest set of blog posts are perfect to move us all up the learning curve in achieving great sites. Many thanks.

  7. I will stick with Photoshop it is the best that there is in my opinion.

  8. I use Paint Shop Pro X6 now for my web graphics. It will do anything Photoshop can do and for a lot less money. I have used it since version 1 and love it.

  9. I use ACDC to reduce each image file-size to around 300k. I know I could go a lot smaller, but I use “fancy box” to allow images to pop out and mainly want to achieve good quality for viewers in Hong Kong who have lots of bandwidth.

    e.g.

    Do you think 300k is way to big for the image size? If so what size would meet the requirements I just mentioned? Any advice would be great! Thanks in advance!

    • Kevin Muldoon

      I try to keep my images smaller, but in the past my images were as big as yours.

      I’m not sure if there is any “optimal” size as many popular websites use images with large file sizes.

  10. Hello guys. Good article. Anyone know about any plugin to detect and delete unused thumbnails? It happens sometimes, that you move in a WP site with lots, thousands, of uploaded pictures, and if the new install has any slightly different thumbnail size from the WP Media Settings or from the theme itself, and if you regenerate the thumbnails, that action will generate thousands of orphan pictures using your disk space. As far as those files are thumbs, it won’t be listed as non-attached in the media list. That files should be deleted, but how.

    Another scenario: if you happen to upload several pics to a post and finally pick one of those, and forgot to delete the unused ones, there is not a quick and easy way to know what to delete if you want to clean the unused pictures of old posts.

    In those two scenarios, one plugin would come in handy.
    I can recall the “WordPress Uploaded Files Cleaner” but the last time I used it, almost one year ago, it did a mess. No kidding. Fortunately I did a backup before “processing” the pics and was able to recover from the damage.

    So, if anybody know about a plugin, I will be glad to give it a try :)
    Cheers!

    • I’m using this one
      http://wordpress.org/plugins/image-cleanup/
      but you have to be careful with what you really want to clean.
      Works fine on standard WP installations but reports wrong unused images for WP multisites as it seems to not well handle sub-domains.

  11. Another nice online tool for PNG is this one:
    https://tinypng.com/

    “Shrink PNG files – Advanced lossy compression for PNG images that preserves full alpha transparency.”

    • Yes, I use it frequently and it really does a very good job

  12. thanks to tips. you can use few plugin image Optimize in wp store

  13. Interesting tips. Will pass on a recommendation to some clients who never seem to grasp the image size concepts.
    Also highly recommend Pixelmator for MAC. Super good at image editing, easy to use and low cost.

  14. Hi Kevin
    Thanks very much for this article that helps a lot newbies like me.
    I would like to ask you a question, and i dont know if it posible to answer in this forum or not?
    I have followed the link to another of your articles ” simples tips to optimize tyour web” and in one of them, tou talked about gzip compresion, and about changing the number from 0 to 1.
    I have changed this but when i press the button in order to save the changes in the options page, a message appears in my browser

    “Request Entity Too Large

    The requested resource
    /wp-admin/options.php
    does not allow request data with POST requests, or the amount of data provided in the request exceeds the capacity limit.”

    What did i do wrong??

    Thanks for your help if it is posible in this forum. If it wouldnt be posible, thanks anyway for both articles.:))

    • Kevin Muldoon

      I suspect you did nothing wrong but your host is just not configured for gzip (i.e. they have disabled it). I suggest contacting your hosting company and asking if gzip is supported.

  15. Hi,
    Another good thing with Image is to specify their dimension.
    It’s a really great gain for web performance
    Bye

  16. Good tips, I hadn’t heard of ImageOptim as I was simply using Photoshop to optimize the images, but it’s worth a try!

    Thanks for the advice!

  17. spot on advice. if for some reason you did not optimize your image prior to uploading your WordPress website, You can do some on site editing to the Image on the back end of the site. It is a bit kludgy but works in a pinch. The link to my site (using Divi!) Provides a tutorial.

  18. Nice writeup, this article can help lots of people. I’ve seen many WP sites that don’t utilize the thumbnail feature of wordpress. They use the width/height attributes for img to resize, and in turn this slows the site’s loading time (and consumes more bandwidth!)

  19. Came across sizzlepig.com the other day and wonder if anyone has any opinion on this cloud service (not free)

  20. Hi Kavin,

    Excellent article. I also use .jpg format for all the images i use on my blog, and when i want to use an icon or a design element which is the part of the theme, then i save it as .png file format.

  21. Does it make any differences to put the images in flickr, so you just insert the URL when add the image into the blog post? ~~ (in terms of page load, etc)

  22. Great article Kevin. I always appreciate these small tips + reminders from elegant themes.

    Those 4 pics of J.P.G. reminded me of cemetery…I thought I jpgs are gone! But your writing assured me that they are not yet. :) Keep up the good work. Thanks

  23. Great post. I’m just getting my photography website up and running with the help of Divi (which is great!). This post brought up a lot of things that I haven’t spent much time thinking about. Regarding the plugins that strip meta data, I wanted to note that this can have copyright implications for photographers.

    Also, thanks for mentioning Lazy Load, I need to check that out.

    Additionally, I can also second Alastair’s recommendation of Pixelmator. It doesn’t replace Photoshop for power users but is a great alternative for those on a budget.

    • Kevin Muldoon

      I didn’t even stop to think about the copyright issues that photographers face. That is a great point.

      Glad you found the article useful :)

  24. I recently tested my key pages on GTmetrics (thank you for that valuable tip in one of your earlier articles!) and at the head of the list were three big Fs! Two had to do with images! The recommendations were a) to specify image dimensions and b) optimize images.

    What do they mean, specify image dimensions? In the url? Is this something the theme does? I’m using Elegant Themes’ Trim (which I love, love, love). Is there a setting I need to change? Some css I should add?

    Also, if I remember rightly, the ET website used to recommend that you upload your images to your server first, then add them to your media library as a link (rather than uploading them using the WordPress media upload). When I got those Fs for images, I looked for that guidance again and it didn’t seem to be there any more. Would it be worth it to go back and redo all my images that way?

    Thank you for all your wonderful articles! They’ve been very helpful.

    Sharon

  25. Kevin Muldoon

    They are referring to the img attributes width and height e.g. width=”450″ height=”500″.

    I’ve never heard about uploading images to the server first and then adding them as a link. Do you recall what the benefits are for doing that?

    :)

    Kevin

    • Hi!

      Thanks for the reply. Odd about the dimensions – they are specified right there in the media library – by GTMetrics doesn’t see it somehow. It’s only with the png files. Mystery to me.

      About loading images to the server, I guess this isn’t standard practice or you would know about it! Supposedly it lightened up the process – made pages load faster.

      Thanks!

      Shaorn

      • Kevin Muldoon

        Maybe it is common practice and I’ve just followed it.

        :)

  26. Good article. I’ve been doing graphic design far longer than WordPress, so I would agree it’s always best to pre flight all your graphics, images, etc before uploading. Making sure you export each image to the proper file type, and best optimization possible. It takes a bit of time to get a feel for what is best for each instance.

    Photoshop still does the best job in most cases for versatility, but I understand not everyone has the option to own or learn Adobe software. Photoshop elements is rather limited. If money is an issue, download GIMP. It’s free and works fantastic. It does many of the same functions as Photoshop and has great exporting options. GIMP works for Linux, Windows & Mac now. I’d actually recommend GIMP over Photoshop Elements or many of the cheaper commercial applications.

    • Kevin Muldoon

      Glad you enjoyed the article.

      Some great tips there too. Gimp is a great application :)

  27. Excellent article Kevin.

    I use an optimisation tool called Pixresizer (which is free to download). This can optimise individual images and also in batch mode. You can download it at http://pixresizer.software.informer.com/

    This is a tool I recommend to all my clients.

    Regards

    Mike

    • Kevin Muldoon

      Looks like a good script Mike. I’ll need to check it out :)

  28. Great article Kevin!

    I have been digging down in to Google Page Insights recently and there are definitely some useful takeaways that will help me optimise my images now.

    Thanks

    Laurence

  29. Really appreciate this Blog. It will help me a lot.

    I use YouTube Videos on my Blog. Can you recommend a Plugin that will show the video in say a computer screen or iPad screen image?

    Mike

    • Kevin Muldoon

      WordPress has built in functionality that allows you to simply publish a YouTube video by printing the URL of the video.

      If you choose that option, the video should expand to whatever the size of the page is, regardless of the device being used to view the video.

  30. Hi,

    Great article! I was trying to optimise a photo I found on the internet with Gimp. It started being a 2048 x 1365 JPEG that is 208 KB. I made it smaller (1600 x 1066) and saved it to a .png, and ended up being 1,2 MB!!! How did that happen? What’s the way to optimise images using GIMP?

    Thanks! ET Rules!

    • Kevin Muldoon

      JPG images take up less room than PNG’s; however sometimes the difference in quality is visible if you optimize the image too much (looking back at some of my posts, I have clearly reduced the quality of some images too much!).

      It is difficult to optimize an image that is 1,600 pixels in width, however you should hopefully get it smaller than 1.2mb. Play around with the settings. Perhaps you have not chosen the best settings (it can be trial and error with this kind of thing).

  31. Thanks for the great article.
    While I should have optimized my pics before loading I did not!

    So, is it feasible to do this now, after some 50 posts?
    Thanks

    • Kevin Muldoon

      You can use Smush.it to reduce the size of your images. I recommend giving it a try and seeing how it performs :)

      • Thanks for that, the plugin worked well but in future, I’ll be editing prior to uploading!

        Appreciate all that you do, take care.
        Charles

  32. Thank you for this article! Great tips!

  33. Nice article!
    Wanted to introduce also Cloudinary’s end to end image management plugin – available for WordPress as well as for many other dev platforms.

  34. You should also try imgoptimize. It optimizes your images in a singe step + it has a module which tells you how much space you can save from images in a web page.

    For example, for this page it can save you 304 KB (of 1.36 MB) – 21.88%

    • I downloaded and installed this program, but unfortunately won’t let me do anything without paying… sigh Had to uninstall almost as soon as installed! =(

  35. Thanks for this post.
    I have 2 questions:

    1/ What you think about Google`s WebP format?

    2/ I am a Mac user and my main graphic software is Pixelmator (I used GIMP, Corel, etc in the past). Do you have any specific recomendation for Pixelmator?

    • Kevin Muldoon

      1. I’ve never heard about it. Is it being released soon?

      2. It’s not something I have used myself. I mainly use GIMP or Photoshop myself :)

  36. Great post Kevin,
    I use photoshop all the time, so most images I upload to my sites or clients sites have been saved for web and optimized via photoshop.

    I’ve used Smushit a few times and it works great but I just dislike the delay you get after uploading a new image.
    Going to download Radical Image Optimization Tool because I think that will be a handy tool for quick optimization.

  37. Hi Kelvin, I was going through WPMods and I saw pixelkit, what’s pixelkit? Are they website or web enhancement graphics and layout. Please tell me. Thanks

    • Kevin Muldoon

      I believe they provide interface and icons etc for designers.

  38. Hi,

    I want to use EWWW Image Optimizer for optimizing images i have already uploaded to my website (there are over 1000 images mostly in JPEG). Because of fixed dimensions (800*600 and 300*225) i want to know will dimensions of my images be reduced if i use this plugin to optimize them? Cause if dimensions are gonna be shrinked then i have no use of optimizing them…

  39. Hi Ken,

    About a year ago, I started a photo blog on Spanish Experiences and I usually upload the pics with a size of 1200×800 pix aprox. and quality of 600 dpi. I thought that the bigger the better.

    – What do you think its a decent DPI to use for internet these days?¿?¿ and if someone is using retina display what DPI will be decent enough?¿?¿

    – wordpress always cuts the pixels to 600??? I currently use Fable theme??? if I upload the pictures with 600 pixels, would it be small for some screens?¿?

    Thanks a bunch,

    Imanol

  40. If you can, erase my first post and go with the second one that gave the url to caesium’s download on sourceforge. thanks.

  41. Great article. Along with the comments, it is very informative.
    I’ve always been the same as you. I ALWAYS optimize an image before I upload it.
    Each image is different but I mostly use Fireworks to optimize my images and Photoshop for photo images. With .jpg images, you can also remove the meta data which can be quite a lot sometimes, as much as 15% However, don’t do this if your not the copyright holder.

  42. yea… thats a great tips…. making a site load faster is the primary thing any blogger need to focus on… thanks for sharing

  43. very helpful article , but I have some problems using Smush can not compress the image thumbnail .if you have the solution ?

Leave a Reply

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

Join 261,586 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today

Pin It on Pinterest

Share This