≪ 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/27 14:19]
eServices Greece 		development:webimages [2020/06/25 16:41] (current)
eServices Greece [Image Type Browser Support]
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 ^ Safari ^ +^ File Type  ^ Transparency ^ Animation ^ Size ^ Quality ^ Compressions Type ^ 
-| JPG | <wrap em>No</wrap> | <wrap em>No</wrap> | Very Small | Good | Lossy | Yes | Yes | Yes | Yes | +| JPG | <wrap em>No</wrap> | <wrap em>No</wrap> | Very Small | Good | Lossy | 
-| PNG | Yes | <wrap em>No</wrap> | Medium | Very Good | Lossless | Yes | 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> | Yes | +| APNG | Yes | Yes | Medium-Big | Very Good | Lossless | 
-| GIF | Yes | Yes | Medium-Big | Bad | Lossless | Yes | Yes | Yes | Yes | +| GIF | Yes | Yes | Medium-Big | Bad | Lossless | 
-| Brotli | Yes | <wrap em>No</wrap> | Small-Very Small | Lossless | Very Good | Yes | Yes | Yes | Yes | +| Brotli | Yes | <wrap em>No</wrap> | Small-Very Small | Very Good | Lossless | 
-| SVG | Yes | Yes | Very Small | Perfect | Lossless | Yes | Yes | Yes | Yes | +| SVG | Yes | Yes | Very Small | Perfect | Lossless | 
-| WebP | Yes | Yes | Very Small | Very Good | Lossless | Yes | Yes | Yes | No |+| WebP | Yes | Yes | Very Small | Very Good | Lossless |
 </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 | 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 ==== ==== 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 | +| [[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 | Perfect |+| [[software:esgtools|esgtools]] | Very Good | Perfect | Local |
 </sortable> </sortable>