This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ===== 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. <sortable> ^ File Type ^ Transparency ^ Animation ^ Size ^ Quality ^ Compressions Type ^ | JPG | <wrap em>No</wrap> | <wrap em>No</wrap> | Very Small | Good | Lossy | | PNG | Yes | <wrap em>No</wrap> | Medium | Very Good | Lossless | | APNG | Yes | Yes | Medium-Big | Very Good | Lossless | | GIF | Yes | Yes | Medium-Big | Bad | Lossless | | Brotli | Yes | <wrap em>No</wrap> | Small-Very Small | Very Good | Lossless | | SVG | Yes | Yes | Very Small | Perfect | Lossless | | WebP | Yes | Yes | Very Small | Very Good | Lossless | </sortable> === Image Type Browser Support === <sortable> ^ 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 | Yes | Yes | Yes | Yes | Yes | Yes | <wrap em>No</wrap> | <wrap em>No</wrap> | Yes | Yes | Yes | <wrap em>No</wrap> | | GIF | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | Brotli | Yes | Yes | Yes | Yes | Yes | Yes | <wrap em>No</wrap> | Yes | Yes | Yes | Yes | Yes | | SVG | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | WebP | Yes | Yes | Yes | <wrap em>No</wrap> | Yes | <wrap em>No</wrap> | Yes | Yes | Yes | Yes | Yes | Yes | </sortable> Note: Firefox will be supporting WebP in the near future (65+), Firefox for android will not yet ==== Compression Tools ==== <sortable> ^ Tool ^ Compression ^ Quality ^ Tool Type ^ | **PNG** | | | [[https://github.com/google/guetzli/releases|Guetzli]] | Very Good | Very Good | Local | | [[http://optipng.sourceforge.net/|optiPNG]] | Very Good | Very Good | Local | | [[https://github.com/google/brotli/releases|Brotli]] | Very Good | Very Good | Local | | [[https://tinypng.com|TinyPNG]] | Very Good | Very Good | External | | [[https://github.com/google/zopfli | ZopfliPNG]] | Very Good | Very Good | Local | | **JPG** | | | yum install jpegoptim | Very Good | Very Good | Local | | [[https://github.com/google/brotli/releases|Brotli]] | Very Good | Very Good | Local | | [[https://tinypng.com|TinyPNG]] | Very Good | Very Good | External | | **SVG** | | | [[software:esgtools|esgtools]] | Very Good | Perfect | Local | </sortable>