Please help - image compression

by 10 replies
12
Sorry if I'm posting in a wrong section; can't find a better one for this technical question.

Does anybody know of a good automated way to optimize images so that everybody would be happy? I post daily, and my homepage has a lot of images on it. WebPageTest and other testing sites keep screaming at me that they're not optimized enough.

I get F on Compress Images, and C on Progressive JPEGs.

I wouldn't mind paying for some plugin that would do this. Smush.it doesn't work (or rather, doesn't do enough), and Ewwww-one cannot be run on WP Engine. Obviously, I'd rather not run images through software on my PC every time before uploading as it's time consuming (although, feel free to offer something that works just in case), but would that be the only way then?

Thanks for all the help warriors!
#search engine optimization #compression #image
  • I use ewwww on my WP sites. or are you talking about something else?
    • [1] reply
  • One easy fix a lot of times is just to resize the images. I have seen many web designers that resize the image through HTML and CSS. That is a huge mistake. Browsers load the full size image and then display it according to the HTML sizing. So if you are displaying a 200 x 200 image that is being resized from 800 x 800, the browser is loading the 800 x 800 image, and then shrinking it.

    In that sort of case, resize it to 200 x 200 and then upload it to your server. It will shrink the file size a lot and speed things up.
    • [1] reply
    • Thanks Mike, that's a good tip. However, I do resize my images specifically for the theme, and the theme then takes care of thumbnails. I would never resize in CSS and HTML. The problem is the actual compression of the images' quality. Smush.it does a little bit, but far from enough. Test sites tell me I can still compress those images to about 60%.

      I wonder if anybody can confirm whether Kraken WP plugin does a solid job? Or any other ones, even if premium/paid?
  • Download Gimp

    It's freeware and has a good image compression utility built in. If you save them at about 85% quality you'll be doing good. Watch out though, go to far and they start to degrade and you end up with some pretty bad fuzzies.
  • [DELETED]
  • [DELETED]
  • Note that on webpagetest.org and similar sites, the scores or letter grades are often averaged over the entire page -- including 3rd party elements -- so be sure to check the individual results.

    Smushit does lossless compression so it will never achieve the compression ratios that webpagetest.org sets.

    For JPG, webpagetest strips out all meta data and then uses a jpeglib quality setting of 85. This is roughly equivalent to Photoshop's save for web (50 quality).


    You may want to take a look at Jpegtran and pngcrush.
    PNGCRUSH
    New jpegtran features

    Most importantly, be sure to use the right image format for the right type of image. Generally, simpler images are smaller with png while photos and complex graphics will be smaller with jpg.

    Lastly, unless you have a very high volume site (10 Million hits), don't worry to much about getting every last image optimization. Likely, there are far more factors that would improve the user experience than the extra 100ms it takes to download a few more bytes.

    The only images I really focus on getting the best optimization possible are site images such as logos, navigation, icons that are used on multiple pages.
    • [ 1 ] Thanks
    • [1] reply
    • Thanks, jeffatrackaid. Great post.

      I'm always resizing and saving in Photoshop before uploading anyway. Can I simply lower the quality there at the point when Photoshop is asking me what quality I want to maintain? Always have Medium - 8, but I'm sure that can be lowered.

      Thanks!
  • Banned
    [DELETED]
  • We use punypng, PunyPNG - PNG Compression and Image Optimization

    It's quite awesome.
  • If you have Photoshop you can just drag and drop your images into it, then record an 'Action' that scrips through, say, resize to 50%, save, close. Then just keep hittin' the action play button till all your images are resized.
    • [1] reply
    • You can also put all of them in one folder and make part of the action go into that folder and get them. Then make another part of the action to save them to a different folder.

      I do this all the time for a client that has a car dealership where every image gets the same editing done to it. Only thing is that I can only do 99 images per recorded action at a go. But it's nice to be able to make the design one time then apply it with a few mouse clicks to 99 photos in one folder. Then go to another folder and see them all in it done perfectly.

      Photoshop is the schnizzle
Join the discussion

Next Topics on Trending Feed

  • 12

    Please help - image compression

    Sorry if I'm posting in a wrong section; can't find a better one for this technical question. Does anybody know of a good automated way to optimize images so that everybody would be happy? I post daily, and my homepage has a lot of images on it. WebPageTest and other testing sites keep screaming at me that they're not optimized enough.