Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
development:webimages [2018/03/05 05:37] 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 |
* 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. | ||
+ | < | ||
+ | ^ File Type ^ Transparency ^ Animation ^ Size ^ Quality ^ Compressions Type ^ | ||
+ | | JPG | <wrap em> | ||
+ | | PNG | Yes | <wrap em> | ||
+ | | APNG | Yes | Yes | Medium-Big | Very Good | Lossless | | ||
+ | | GIF | Yes | Yes | Medium-Big | Bad | Lossless | | ||
+ | | Brotli | Yes | <wrap em> | ||
+ | | SVG | Yes | Yes | Very Small | Perfect | Lossless | | ||
+ | | WebP | Yes | Yes | Very Small | Very Good | Lossless | | ||
+ | </ | ||
- | ^ File Type ^ Transparency | + | === Image Type Browser Support === |
- | | JPG | No | No | Very Small | Good | Yes | Yes | Yes | | + | < |
- | | PNG | Yes | No | Medium | + | ^ File Type ^ Edge^ Firefox |
- | | APNG | Yes | Yes | Medium-Big | + | | JPG | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | |
- | | ZopfliPNG | + | | PNG | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | |
- | | GIF | Yes | Yes | Medium-Big | + | | APNG | Yes | Yes | Yes |
- | | Brotli | Yes | No | Very Small-Small | + | | 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</ |
+ | | SVG | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | ||
+ | | WebP | Yes | Yes | Yes | <wrap em> | ||
+ | </ | ||
+ | Note: Firefox will be supporting WebP in the near future (65+), Firefox for android will not yet | ||
==== Compression Tools ==== | ==== Compression Tools ==== | ||
- | ^ Tool ^ Compression ^ Quality ^ | + | < |
+ | ^ Tool ^ Compression ^ Quality | ||
| **PNG** | | | | **PNG** | | | ||
- | | [[https:// | + | | [[https:// |
- | | [[http:// | + | | [[http:// |
- | | [[https:// | + | | [[https:// |
+ | | [[https:// | ||
+ | | [[https:// | ||
| **JPG** | | | | **JPG** | | | ||
- | | yum install jpegoptim | Very Good | Very Good | | + | | yum install jpegoptim | Very Good | Very Good | Local | |
- | | [[https:// | + | | [[https:// |
+ | | [[https:// | ||
| **SVG** | | | | **SVG** | | | ||
- | | esgtools | Very Good | Very Good | | + | | [[software:esgtools|esgtools]] |
+ | </ |