eSGR Documentation

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

Compression Tools

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