≪ 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
development:webimages [2018/03/05 05:39]
eServices Greece 		development:webimages [2020/06/25 16:41] (current)
eServices Greece [Image Type Browser Support]
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 | Yes | 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>