Web Images

Rules

Image Dimensions

Image Size = Viewport Size.

An image has to be equal or max 1% bigger than the 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 File 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	Chrome	Firefox	Edge
JPG	No	No	Very Small	Good	Yes	Yes	Yes
PNG	Yes	No	Medium	Very Good	Yes	Yes	Yes
APNG	Yes	Yes	Medium-Big	Very Good	Yes	Yes	No
ZopfliPNG	Yes	No	Small	Very Good	Yes	Yes	Yes
GIF	Yes	Yes	Medium-Big	Bad	Yes	Yes	Yes
Brotli	Yes	No	Very Small-Small	Very Good	Yes	Yes	Yes
SVG	Yes	Yes	Very Small	Very Good	Yes	Yes	Yes

Compression Tools

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