55 Comments

  1. Matt,

    Great article and very in depth look at resizing and optimizing for the web! I may have to start pointing some of my clients here!

    I can add another great image editor for Mac – Acorn, despite thr strange software company name:
    http://www.flyingmeat.com/acorn/

    I love that you mention a step to sharpen the image. This is the biggest trick to make images pop online, especially as they get resized smaller.

    As a general rule, I always save as JPEG at 70% quality. You can easily go to 70% without losing any visual quality and you cut the image size about in half. Depending on the image you can sometimes go as low as 60% with no visual loss but that is up to your eye to judge. So I just keep it simple and stick with 70%.

    1. Thanks Marty! Truly, Mac users have all the cool toys, but really!? “Flying Meat”?

      For me it depends on how much smaller the image gets and how much bitmapping I can handle. In IrfanView I love zooming in and out to compare the two. But yes, I always end up somewhere between 60 and 70%. Thanks for commenting, send as many of your awesome photographer clients this way as you like!

  2. Excellent article, Matt! Thank you! I am doing most of what your recommend already, but it is always good to have an expert corroborate my methods. I have an image heavy website, so I will have to make sure that I get my images as small as they can possibly be, something I have not kept up with. I use a PC and mostly use Photoshop, although I will check out Irfanview and see if it makes my life easier. Thanks again, and I’d love to see an article about best practices for image SEO.

    1. Hi Michelle, glad you liked it. Photoshop gets the job done with the Save for Web function. IrfanView just loads and saves a lot quicker.

      Hmmm… an image SEO post. I’ll mull it over for sure. Thanks!

  3. Just when I thought I knew everything about image optimization, along comes your article and I’m humbled once again! Great job!

    I’ve always been a Photoshop user and one thing I recently learned is that “Save for Web” doesn’t do the best job for PNG files (at least not as good as Fireworks). I now use pnggauntlet on all my PNG files to optimize them, but there are many others available too…what’s cool about pnggauntlet is that you can drag an entire folder of png files to it and batch optimize them!

    1. Elise Hietikko says:

      The awesome app CodeKit also batch edits PNGs, as well as a whole lotta other stuff.

      1. Yep, Codekit is amazing. Just no fun that it’s Mac only.

  4. I’m surprised you didn’t mention Photoshop Elements. It’s Adobe’s consumer-grade answer to Photoshop’s complexity. It’s not bad, and only $100. Still, InfranView is also in my cache… mainly because it loads so darn quickly.

    A technical point I’d like to mention: DPI is only used to describe output to a printer. Any time we’re talking about the screen, i.e. websites, it’s PPI… or Pixels Per Inch.

    1. I didn’t intend to review software in general, but since PS is so prolific I felt I had to at least address it. There’s tons of incredible tools available, IrfanView is just one of them, and the one I recommend for folks who just need basic photo editing for their website.

      I also didn’t want to get into PPI since it’s totally irrelevant for editing the photo. It was already a long enough article, as it is, ya know!?

  5. I use EWWW Image Optimizer to compress my images when I upload them without optimizing them beforehand. I’d be interested to know how the results compare to your method here.

    1. Hi Dave! That’s a great question, great material for a follow-up post. Besides SmushIt, and EWWW others have also pointed out Hammy and Imsanity to me. Might be worth some side-by-side comparisons.

    2. Just the other day I compared Smush It and EWWW. The amount of compression (ie. reduction in file size) were exactly the same, but EWWW seemed to run WAY faster.

      1. Hi Lucy! Hope to see you at WCLAX this weekend! Do you have a link to your article? I’m working on a image optimization tool comparison post and would love to reference anything from your site. Let me know.

      2. Yes – definitely see you at WordCamp, woo hoo!!! I haven’t written anything up about those plugins yet, but thanks for asking! I was just playing around with them on a test site. Look forward to seeing your next post!

  6. Great article! really helps clarify that the only really hard thing about WordPress has absolutely NOTHING to do with WordPress itself. I need to clarify to clients that we will need to learn this skill and that I am going to charge for teaching it. But I will make sure they do not blame WordPress! WordPress rules all!

    1. Thanks Dave, yes, that’s the rub. They’d have to do this work regardless of WordPress, but they wouldn’t get the benefit of having the images automatically resized for different purposes, then with plugins having those resized images automatically optimized.

      1. Dave Bell says:

        Precisely. The fact that I will now make a clear distinction between WordPress and photo optimizing will be a big help to both me and clients. I mean I knew this, but forgot to be clear about it with clients.

        I have downloaded Photoshop CS2 to see if I like it. I have Photo Elements and that has been fine for me.

        I am going to be featuring this page in my next Blog post. People really need to start “getting it”.

    1. Ditto. After my Photoshop license recently expired I came across Pixelmator. For $15 I created some amazing printed collateral material for my company (the marketing materials section on this page: http://radianthomeinspections.com/downloads/ ). No one can believe it wasn’t Photoshop. I also use it for all of my web images. Amazing product for $15.

      I also use ImageOptim sometimes, but get lazy since it is an extra step.

      1. cesarfalcao says:

        I think you can make a osx automator script to that, so when you save in a folder it will run automatically…

    1. For pngs only, but by what standard do you say that? Have you compared it with others? I’m working on a comparison article of all the great tools folks have been recommending.

      1. Sorry, I mean pnhg output only.

  7. Handige website zeg. Dank voor het typen van dit artikel. Hier kan ik zeker mijn voordeel mee doen!

  8. Sunny greetings from Diani beach! Thank you for this, but I still don’t get it what is the recommended size of a image :-(

    1. Hi Martina,
      Basically the smallest you can get it without noticeably losing image quality. As I mentioned above, web gurus used to recommend only having images of 50kb or less. Nowaday, you have two issues pulling you in opposite directions (1) broadband speed is WAY more capable of handling much larger images than 50kb; (2) mobile phone connections will freeze up if your images are too large.

      So, some folks resort to serving up different images for different screen sizes (a very tedious and advanced technique), or do what I tried to explain in this article, make them as small as possible without noticeably loosing image quality. That’s really the medium I shoot for.

      Thanks for stopping by!

  9. What I’ve found most frustrating is WordPress’ default JPEG compression level of 90. I optimise the heck out of a file, upload it, wordpress compresses all the images it’s creates, and they come out bigger! I’ve uploaded slider images at 130k and WordPress has created the size I use for sliders at 400k.

    What’s the point of the perfectly optimised original when the created images in WP aren’t perfectly optimised?

    1. A couple things make me curious about that: (1) WordPress can’t actually increase the filesize of your images. Even if it made the dimensions larger, the image would be really pixelated and the filesize would not increase, at least not by much. (2) Yes, it compresses the image, but that is relative to the size of the file uploaded, it can’t compress relative to a file it’s never seen. Also, if you like, it’s relatively easy to disable compression completely, see Paulund’s article here: http://www.paulund.co.uk/stop-wordpress-compressing-jpeg-images

      I suspect something else is going on that you haven’t uncovered quite yet.

      1. I know it shouldn’t, but look through your uploads folder. Sometimes the “large” size is smaller than the original, but often it’s larger. I would love it if it was just me.

      2. Sorry, I think I misunderstood you. This only happens when you upload an image which is smaller than the large size and WordPress does have to enlarge it or hard crop it. That is specifically the purpose of a plugin like Smush.It or EWWW, they optimize the images that WordPress generates after you upload.

        Even if you use a third-party service like kraken.io or Jetpack’s Photon they aren’t going to touch those images because they are not viewable on an actual webpage. But what that means is that your only real benefit of optimizing the images WordPress generates after uploading is using less space on the server. You’re never going to actually see those images and they’re never going to affect your pageload speed.

        The images that are optimized are the ones that appear on the page and reduce your pagespeed. If you are manually optimizing an image that is 250px wide, but your large size is 750px wide, that larger image is not going to be optimized — but you’re also not planning on using it. If you wanted to, then you’d optimize the image manually at 750px wide, then all the smaller images would be optimized according to that.

        The point of optimization is decreased page load times. Period. There is no other serious purpose, especially in a world where host are boasting unlimited storage for $5/month (though that’s largely a farce anyway).

    1. Excellent correction Rick. I’ve updated the article to reflect that. Thanks!

  10. Hi, I am new to WordPress. I always optimize my images before I upload them. However, my problem is that WordPress optimizes them further and they end up looking horrible. Is there a plug in that can help me stop WordPress from reoptimizing my images? Or one that overrides WordPress optimization process and lets me decide. Thanks.

    1. Hi there. I’d recommend instead optimizing your image just a little less. WordPress saves your image at 90% of whatever is uploaded. As I mentioned in a comment above, I typically optimize the image in Irfranview somewhere between 75-80%, never less than that really.

      Another great tool I’ve been using lately is JPEGmini and Compressor.io. Both of these are able to compress your images “losslessly”. This makes a big difference in their size but virtually NO difference in quality. Then when you upload to WordPress the quality difference remains minor.

      All that said, if you really JUST want to disable the WordPress image compression, here’s two options:
      1) Add this to your theme’s functions.php file:
      add_filter(‘jpeg_quality’, function($arg){return 100;});
      add_filter( ‘wp_editor_set_quality’, function($arg){return 100;} );

      or
      2) Use this plugin: https://wordpress.org/plugins/disable-jpeg-compression/

      Thanks for stopping by! Hope to see you around more!

  11. Great Article ! In the free tools, I would recommand paint.net, which is a mini Photoshop much easier to handle than the Gimp. And there is also now an old version of Photoshop (version 2) that you can download and use for free.

    I’m waiting for your post about retina, this is a nightmare !

    1. Hi there! Ya, I mentioned the “free” version of Photoshop in the article. Technically it’s not free. Since writing this article, lots of folks have recommended paint.net, and I have a couple clients using pixlr.com regularly now as well. All good options.

  12. I work with alot of Real Estate agents and most of them are not overly tech savy (that is why they hire me). I have been using Optimizilla (http://optimizilla.com/) for abut a year now and it works perfect. They upload the image, move the slider up and down to the correct filesize they want (usually the 65-45% range) and then click save. It adds a .min to the file (filename.min.extension) so they can tell which ones they have minimized and which ones they have not. I then use the sanity plugin also to limit the file uploads to less then 1MB so they are forced to reduce them ahead of time.

    This has been great as it save my server resources from having smush, ewww or other on the fly optimizations try and do this.

    1. That looks pretty slick. Seems similar to compresso.io which I mention in the Online Tools Update section. Most important thing, like you mention, is educating clients on the importance of optimization and trying to make it as intuitive and accessible for clients as possible.

      Thanks for stopping by!

    2. Just want to follow up on this (weird, guess I was logged in differently last time). I tested compressor.io and optimizilla on the same image. The image was around 600kb, Compressor.io got it down to 261kb with little to no noticable differences in quality. With Optimizilla I could get it down that far as well, but had to keep tweaking until there were only 62 colors (I think). It took more time, but the end result was the same, and perhaps I could have gone even lower. I’ll keep optimizilla in mind, but for a quick and easy compression I’m pretty impressed with compressor.io.

  13. Thank You, Matt for this excellent post. I was wrong when I thought 150KB for web image is acceptable. With your guide, I just resized by 196KB down to 50KB. Do you know if there is a plugin that can do this kind of optimization after the images have been uploaded to WordPress media gallery?

    1. Hi Amit. Thanks for your kind words. This is the first article of a series on WordPress optimization. Look at the top of the article, you’ll see all the posts in this series, and the third one “Image Automation” is what you’re looking for. Bottom line: I don’t recommend those plugins. But using a service like Jetpack’s Photon or Kraken.io is excellent. Also keep your eyes on foomedia.io. We’ll be announcing some great stuff in this department soon.

  14. What relief to find this article as there are too few people in the web world, let alone WordPress who understand anything about photo management, optimization & how to manage the mess. I’m just working through recovering from an ignorant website developer who migrated posts without their photos, and my tech team got us into trouble with WP Engine because they didn’t understand the rules. There are too few people who understand how it all comes together … sad

    1. Thanks for your kind words Tina! Migrating images is a horrible pain sometimes for sure. I’ve had quite a few migration headaches with photos myself, it’s a whole other animal when you’re dealing with a different CMS that stores images differently, but wanting the images stored in the new site with the default Media Manager, etc… But my bottom line for those kinds of situations is I want to try to do my best to prevent future headaches, so making the file system and install as future-proof as possible is always the goal.

      Thanks for stopping by, hope to hear more from you around here!

  15. Henry Choi says:

    Just when I though I have already find the best solution for page load speed, thank goodness I’ve found your article Matt. It’s pretty impressive. I just want to ask if you’ve already tried optimizing bigger image sizes with a WooCommerce site? Thanks, appreciate it!

    1. Hi Henry, thanks for the kind words. I have optimized images on pretty much every site I’ve worked on and I’ve done a fair share of Woo sites. Currently though, my strong recommendation when you have a lot of pre-existing images that need optimization is to use TinyPNG’s WordPress plugin. See my latest article in this series for more on that: https://www.mattcromwell.com/series/optimizing-wordpress/

      If you have a lot of pre-existing images, you’ll most likely need to pay a little to get them ALL optimized, but after that a typical WordPress/WooCommerce install won’t exceed the free level that TinyPNG offers.

  16. cydia : It is the unofficial program shop that allows you to obtain all
    goodies which Apple does not allow. The very last
    thing you would like would be to wind up with the notorious “Sad iPhone” screen.

  17. Matt,

    Nice article overall, but I’d like to make one technical correction. Nowhere in the world of the web is it appropriate to hinge your thinking upon “Dots Per Inch.” DPI is a relative manner of measurement that presumes a medium of unknowable dimensions.
    It’s a manner of measurement that’s really only appropriate in print.

    The only reliable way to measure image dimensions for the electronics media (web, television, movies, etc) is absolute dimensions…which means X x Y pixels.

    Using DPI can lead to a lot of confusion, especially where non-technical people are concerned. I once watched someone using Photoshop to adjust images, apparently trying to make them better quality. They were opening a high-res JPEG and changing it from 72 DPI to 300 DPI because that’s what the print shop wanted. In so doing, the 5 MB images were becoming 30 MB images, as they were upsampled to vastly greater absolute (X,Y) dimensions. Worse yet, it wasn’t improving their images….just making them bulkier.

    Sadly, even some people who should know better (like Microsoft) real in DPI. For example, when exporting a PowerPoint presentation to files (TIFF, PNG or JPEG) the terms used are 220, 150 or 90 DPI. Moreover, in Office 2013 it looks like this setting doesn’t actually do anything useful. Each setting resulting an image with the exact same actual dimensions.

  18. Once you arrive your money is now sitting at another curb for a few more hours
    while you are inside enjoying with family and friends.

    There is no other way to arrive in style than arriving on a limousine by limo services Pittsburgh.
    The unparalleled comfort and convenience of being driven in a limousine is hard to surpass,
    as well as enabling the occupant to arrive at the destination with a strong presence.

  19. This is an excellent tutorial to optimize images, I personly don’t like to use Image optimization plugins. I prefer https://compressor.io/compress to optimize images for each post, It takes few minutes to optimize multiple images and if you have only one or two images for each post you can do it in seconds. compressor.io is an awesome service.

Leave a Reply

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