How To Optimize Images For Your WordPress Website

Posted on February 17, 2014 by in Tips & Tricks | 102 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 Utilizing the 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. can optimize all of your images at once.

If you have not optimized your images in the past, 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 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 πŸ™‚

Premade Layouts

Check Out These Related Posts

Splice Video Editor: An Overview and Review

Splice Video Editor: An Overview and Review

Posted on May 7, 2019 by in Tips & Tricks

Video is a valuable form of content for social media. Unfortunately, creating quality videos is usually a long process that involves moving mobile footage to a desktop app for editing. However, mobile editing is on the rise. Apps such as Splice Video Editor make it possible to efficiently create...

View Full Post


  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.

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


        • Abinash Mohanty! Thanks for your thinking… During few days I’m going to take like this issue. Might be it will help me to understand what should I do!!

  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

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

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

    • Great suggestion. I remember reviewing Pixlr and some similar services years ago. πŸ™‚

    • I use Irfanview, it is freeware and it has the RIOT plugin for resizing images.

  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

    • Thanks for the suggestion. Looks good πŸ™‚

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

        • Will and Kevin,

          Thank you very much! This app is lightning fast and the result was awesome.

          I tested on 10 images with 1024x768px sizes and between 858 Kb – 548Kb.

          In 2 seconds the app transformed these pictures in 800x600px with 131Kb – 68Kb in size, 88% quality loss. And when I looked at them, they were nice as before.

          You made may day.

          • Hi! Thanks for the tip about fast image resizer. I have a kinda silly question – where is the image after I drag and drop it and it says “finished?”

        • Hi Kevin and Will,

          Above mentioned tools was very helpful and i have optimized images and there were very handy.

          Thanks for sharing Kevin and Will

  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.


    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!

    • 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 πŸ™‚

    • Hi Marcelo

      I know “Force Regenerate Thumbnails” deletes any unused image sizes (if you have changed your media settings etc) as well as generates the new ones. Would that perhaps help with the first query?

      Have an awesome day πŸ˜‰

    • I’m using this one
      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:

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

    • 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

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

    • Glad you enjoyed the article Mizan. πŸ™‚

  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.

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


  25. 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?



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



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

    • 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

    This is a tool I recommend to all my clients.



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



  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?


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

      • I think. He means when a website has a picture of an iPad/computer/laptop on the page and then the YouTube video plays within that iPad image. I’m curious about that. Too.

  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!

    • 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?

    • You can use 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.

  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?

    • 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

    • 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,


    • 72 dpi for the web. Good luck!

  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 ?

  44. hello
    I have a question for my site .
    If i use smushit or premium seo pack light for my pictures and after erase the plugin, will my pictures get back to how they were before or will they still resized?

  45. Hi
    Am new with WP and am wondering how to insert images at a specific place in my page.
    I tried to add a few animated gif (flags), but no way to put them within my text where I describe in which country I was.
    The flags appear only on the left hand side of the page.
    How can you manage that?

  46. hi everyone,

    i have some trouble in optimizing the images i have uploaded on my website. I can optimise the ones in media library with a plugin. But i do have more than two hundreds of pictures in a plugin called Easy Galley. none of the image optimizer plugins that i had tried, were able to optimise inside that plugin…. so any suggestions?

  47. Yeah, this is the crucial problem of my website, it need couple of seconds to load. Now i know that the image dimension need to be optimized for best performance. Thanks, nice article πŸ™‚

  48. I am about to upload a bunch of images and came looking for information on the optimum size in px and res. Watching a Divi video I see that 1200x845px is shown but no PDI is mentioned. Firstly, that is very odd size and secondly in none of the thread above is there no mention of actual numbers.
    Am I missing something and can someone help?

  49. Wow !! great tips… I was always wondering whether to use JPEG or PNG but now I confirmed JPEG is the best for websites related to SEO point of view.

    I will surely use all these tips on my website related to cool gadgets and informative articles.

  50. Excellent post. I am using Divi and used the exact way to improve my site’s performance.


  51. I am very glad after reading your article but one more confuse i am getting here. what is the default size of image that we used to display in WordPress post.
    if you are unclear here i want to clear. for example. is our url and the site is design in WordPress. Normally we insert the image as per content but we never assure what is a exact size to insert image in post..

  52. Thanks for your details and explanations..I want more information from your side..please include some valuable ideas..I Am working in Dell used laptops for sale in chennaishould you need for any other clarification please call in this number.044-421 27512.

  53. Good info. If only more people knew about the save for web feature in photoshop.

  54. Hi,
    This is very right instruction but i am facing so many problem with size. I am unable to adjust the size of the image as i want.

    Thank You.

  55. I’ve used so far ewww that uses Tinypng in fact, then found on an already made project with another CMS the Imagerecycle tool with a WP specific plugin here It’s far more complete as a service because it also include PDF, multiple accounts.

    Optimization algorithm look similar to me, but I’m not a specialist.

  56. Hi there, if I use one of the plugins to optimise pictures I already used but months ago before I knew to optimise, will it change those which were already optimised too? Also could I install it, optimise and then delete it so as not to put strain on loading times? Thanks

  57. Hi,
    I already use WP smush it and the images still are not optimised enough according to Pagespeed insights. They are PNG and JPG files. My site is WordPress. Are there any other plugins I can use on top to reduce the file sizes even more?



  58. hai dude, i wanna say thank you for your sharing, it is really helpfull for beginner like me

  59. I know this is probably a stupid question, but is optimizing a photo and resizing the image to certain dimensions the same thing. For example, I want to upload a photo to FB and their optimal dimensions are 1200X628. If I go to one of your suggested places to optimize the photo are the dimensions above what I should be inputing to reduce the file size> Thanks…

  60. Very useful, thanks!

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

  62. Yeah this is my problem for my works.
    Now i can apply it for best dimension pic in my web.
    Thanks. Nice Article.:-D

Join To Download Today

Pin It on Pinterest