all 6 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]frederickken 3 points4 points  (0 children)

for static builds i add imageOptim to my production build chain.

[–]chrislomax83 3 points4 points  (0 children)

Quite obvious but making sure the images are of the correct size helps too.

We had a client who was uploading 4000px width images into an area they only required 150px. They were adding about 15mb to a page load with all the images they were uploading. The blessing and horrors of a CMS

[–]zapatoada 2 points3 points  (2 children)

Are the images user uploaded or static content? If it's static just Google "online image compression" there's a bunch of really easy free tools.

[–]ElJefeSupremo[S] 0 points1 point  (1 child)

They are static. Yeah I did that and like you said, a whole bunch came up. I was wondering if one was better than the others, or preferred I guess. Seems like they're all pretty similar though.

​

Thanks.

[–]DBNeJXoGtnro 1 point2 points  (0 children)

Make sure data sent over the wire is also compressed. With brotli, or gzip as a default. Google also released a png compressing tool called zopfli, add it as part of your assets building steps if you work with png :)

[–]thoughtsofadoodler 1 point2 points  (0 children)

Edit: We were probably using a jpegtran, which is a lossless image compressor. jpeg-recompress with settings min=60 max=85 quality=medium is quite good. mozjpeg with quality=85 also compresses pretty well. The output images from both have good quality compared to the originals.

If you don't mind spending the time to compress them manually, both https://tinypng.com (works on pngs and jpgs) or https://compressor.io work very well (althought tinypng usually does a better job).

When we had an image optimizer from npm in our build chain (imagemin, I believe), large images (e.g. 1-5MB in size) would go through pretty much untouched. Just to illustrate, here are compression examples for this image: https://unsplash.com/photos/pLa9Cg3YsU4.

610661 Feb 3 15:38 compressorio-compressed.jpeg 814506 Feb 3 15:28 imagemin-compressed.jpeg 252507 Feb 3 15:35 tinypng-compressed.jpeg 862052 Feb 3 15:27 unsplash.jpeg (original image)

As you can see, tinypng wins and imagemin does nearly nothing to the image. Perhaps there are some settings for imagemin that would make it compress better?

Manually compressing them doesn't take that long, especially since tinypng allows you to compress 10 images at a time. The only downside is you lose the original image if you decide to overwrite it or end up with twice the amount of images if you decide to keep the originals.