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