DEV Community

loading...

Discussion on: Guide to Properly Size Your Hero Images and Optimize Them for Site Speed

Collapse
lexlohr profile image
Alex Lohr

Both JPEG and PNG will also have an easier job compressing blurred parts, because of the lower signal amplitude change (JPEG in most cases even more than PNG). By blurring unimportant parts of your images, you can reduce the resulting compressed file significantly. For compressing JPEG, use github.com/google/guetzli; PNG is best reduced in size by using pngquant --strip (to strip out metadata).

For images that are not photography/-realism, seriously consider using SVG (and svgo to optimize it; if you're a front-end developer like me, you could hand-optimize frequently used image parts with the use-tag even more).

For JPEG, be sure that your image dimensions can be evenly divided by 8, because this format will store the image in 8x8 blocks anyway. If you support modern browsers, also consider WEBM and using the picture-tag and/or minimal CSS/SVG shims to have something during the time a larger image is loading.