This is an old revision of the document!
Web Images
Rules
Image Dimensions
- Image Size = 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
- Never resize images in code.
Image File Size
- 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.
| File Type | Transparency | Animation | Size | Quality | Compressions Type | Chrome | Firefox | Edge | Safari |
|---|---|---|---|---|---|---|---|---|---|
| JPG | No | No | Very Small | Good | Lossy | Yes | Yes | Yes | Yes |
| PNG | Yes | No | Medium | Very Good | Lossless | Yes | Yes | Yes | Yes |
| APNG | Yes | Yes | Medium-Big | Very Good | Lossless | Yes | Yes | No | Yes |
| GIF | Yes | Yes | Medium-Big | Bad | Lossless | Yes | Yes | Yes | Yes |
| Brotli | Yes | No | Small-Very Small | Lossless | Very Good | Yes | Yes | Yes | Yes |
| SVG | Yes | Yes | Very Small | Perfect | Lossless | Yes | Yes | Yes | Yes |
| WebP | Yes | Yes | Very Small | Very Good | Lossless | Yes | No | No | No |