≪ View Page

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
Last revision Both sides next revision
development:webimages [2018/03/27 14:10]
eServices Greece 		development:webimages [2020/03/04 11:00]
eServices Greece [Compression Tools]
Line 9: Line 9:
   * Never resize images in code.   * Never resize images in code.
  
-=== Image File Size ===+=== Image Type Size ===
   * Make sure your image is as small as possible   * 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.     * Compress your images using the most compressible image type, jpg is preferable if no transparency is required.
 <sortable> <sortable>
-^ File Type  ^ Transparency ^ Animation ^ Size ^ Quality ^ Compressions Type ^ Chrome ^ Firefox ^ Edge ^ +^ File Type  ^ Transparency ^ Animation ^ Size ^ Quality ^ Compressions Type ^ 
-| JPG | No | No | Very Small | Good | Lossy | Yes | Yes | Yes | +| JPG | <wrap em>No</wrap> | <wrap em>No</wrap> | Very Small | Good | Lossy | 
-| PNG | Yes | No | Medium | Very Good | Lossless | Yes | Yes | Yes | +| PNG | Yes | <wrap em>No</wrap> | Medium | Very Good | Lossless | 
-| APNG | Yes | Yes | Medium-Big | Very Good | Lossless | Yes | Yes | <wrap em>No</wrap> | +| APNG | Yes | Yes | Medium-Big | Very Good | Lossless | 
-| ZopfliPNG | Yes | No | Small | Very Good | Lossless | Yes | Yes | Yes | +| GIF | Yes | Yes | Medium-Big | Bad | Lossless | 
-| GIF | Yes | Yes | Medium-Big | Bad | Lossless | Yes | Yes | Yes | +| Brotli | Yes | <wrap em>No</wrap> | Small-Very Small | Very Good | Lossless | 
-| Brotli | Yes | No | Small-Very Small | Lossless | Very Good | Yes | Yes | Yes | +| SVG | Yes | Yes | Very Small | Perfect | Lossless | 
-|SVG| Yes|Yes|Very Small|Very Good | Lossless | Yes|Yes|Yes| +| WebP | Yes | Yes | Very Small | Very Good | Lossless |
-|WebP| Yes|Yes|Very Small|Very Good | Lossless | Yes|Yes|Yes|+
 </sortable> </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 | <wrap em>No</wrap> | 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 ==== ==== Compression Tools ====
 <sortable> <sortable>
-^ Tool ^ Compression ^ Quality ^+^ Tool ^ Compression ^ Quality ^ Tool Type ^
 | **PNG** | | | **PNG** | |
-| [[https://github.com/google/guetzli/releases|Guetzli]] | Very Good | Very Good | +| [[https://github.com/google/guetzli/releases|Guetzli]] | Very Good | Very Good | Local | 
-| [[http://optipng.sourceforge.net/|optiPNG]] | Very Good | Very Good | +| [[http://optipng.sourceforge.net/|optiPNG]] | Very Good | Very Good | Local | 
-| [[https://github.com/google/brotli/releases|Brotli]] | Very Good | Very Good | +| [[https://github.com/google/brotli/releases|Brotli]] | Very Good | Very Good | Local | 
-| [[https://tinypng.com|TinyPNG]] | Very Good | Very Good |+| [[https://tinypng.com|TinyPNG]] | Very Good | Very Good | External | 
 +| [[https://github.com/google/zopfli | ZopfliPNG]]  | Very Good | Very Good | Local |
 | **JPG** | | | **JPG** | |
-| yum install jpegoptim | Very Good | Very Good | +| yum install jpegoptim | Very Good | Very Good | Local | 
-| [[https://github.com/google/brotli/releases|Brotli]] | Very Good | Very Good | +| [[https://github.com/google/brotli/releases|Brotli]] | Very Good | Very Good | Local | 
-| [[https://tinypng.com|TinyPNG]] | Very Good | Very Good |+| [[https://tinypng.com|TinyPNG]] | Very Good | Very Good | External |
 | **SVG** | | | **SVG** | |
-| esgtools | Very Good | Very Good |+| [[software:esgtools|esgtools]] | Very Good | Perfect | Local |
 </sortable> </sortable>