≪ 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/05 05:39]
eServices Greece 		development:webimages [2020/03/04 11:00]
eServices Greece [Compression Tools]
Line 5: Line 5:
 === Image Dimensions === === Image Dimensions ===
   * Image Size = Viewport Size.   * Image Size = Viewport Size.
-    * An image has to be equal or max 1% bigger than the 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     * If you need to cater for variable size viewports, you should use the @media tag and use multiple images
   * 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>
 +^ 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>
  
-^ File Type  ^ Transparency ^ Animation ^ Size ^ Quality ^ Chrome ^ Firefox ^ Edge ^ +=== Image Type Browser Support === 
-| JPG | No | No | Very Small | Good | Yes | Yes | Yes | +<sortable> 
-| PNG | Yes | No | Medium | Very Good | Yes | Yes | Yes | +^ File Type  ^ Edge^ Firefox ^ Chrome ^ Safari ^ Opera ^ iOS Safari ^ Opera Mini ^ Android Browser ^ Opera Mobile ^ Chrome for Android ^ Firefox for Android ^ Samsung Internet ^  
-| APNG | Yes | Yes | Medium-Big | Very Good | Yes | Yes | <wrap em>No</wrap> | +| JPG | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | 
-| ZopfliPNG | Yes | No | Small | Very Good | Yes | Yes | Yes | +| PNG | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | 
-| GIF | Yes | Yes | Medium-Big | Bad | 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> | 
-| Brotli | Yes | No | Very Small-Small | Very Good | Yes | Yes | Yes | +| GIF | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | 
-|SVG| Yes|Yes|Very Small|Very Good|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 ====
-^ Tool ^ Compression ^ Quality ^+<sortable> 
 +^ 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>