Web Images

Rules

Image Dimensions

Image Size = Viewport Size.

An image has to be equal or max 1% bigger than the maximum viewport size.

If you need to cater for variable size viewports, you should use the @media tag and use multiple images

Never resize images in code.

Image Type Size

Make sure your image is as small as possible

Compress your images using the most compressible image type, jpg is preferable if no transparency is required.

File Type	Transparency	Animation	Size	Quality	Compressions Type
JPG	No	No	Very Small	Good	Lossy
PNG	Yes	No	Medium	Very Good	Lossless
APNG	Yes	Yes	Medium-Big	Very Good	Lossless
GIF	Yes	Yes	Medium-Big	Bad	Lossless
Brotli	Yes	No	Small-Very Small	Very Good	Lossless
SVG	Yes	Yes	Very Small	Perfect	Lossless
WebP	Yes	Yes	Very Small	Very Good	Lossless

Image Type Browser Support

File Type	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Opera Mini	Android Browser	Opera Mobile	Chrome for Android	Firefox for Android	Samsung Internet
JPG	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
PNG	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
APNG	No	Yes	Yes	Yes	Yes	Yes	No	No	Yes	Yes	Yes	No
GIF	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
Brotli	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes	Yes	Yes
SVG	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
WebP	Yes	No	Yes	No	Yes	No	Yes	Yes	Yes	Yes	No	Yes

Compression Tools

<sortable>

Tool	Compression	Quality
PNG
Guetzli	Very Good	Very Good
optiPNG	Very Good	Very Good
Brotli	Very Good	Very Good
TinyPNG	Very Good	Very Good
ZopfliPNG	Very Good	Very Good
JPG
yum install jpegoptim	Very Good	Very Good
Brotli	Very Good	Very Good
TinyPNG	Very Good	Very Good
SVG
esgtools	Very Good	Perfect