eSGR Documentation

This is an old revision of the document!

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.

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

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	Yes	Yes	No	Yes	No	Yes	Yes	Yes	Yes	Yes	Yes

Note: Firefox will be supporting WebP in the near future (65+), Firefox for android will not yet

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

Web Images