Vector vs. Raster Images
Vector:
- Vector is ideal for images that consist of geometric shapes.
- It is consistent at different zoom and resolution settings.
- Vector Graphics represent images using lines, points, and polygons.
- Examples: logos, text, icons
Raster:
- Raster should be used for more complex, detailed images.
- Raster graphics encode individual pixel values within a rectangular grid to represent an image.
- Example: Photos
- Formats: GIF, PNG, JPEG
Image Formats
Animation: GIF
Preserve Detail: PNG
- PNG uses a larger file size.
- If the file uses geometric shapes, consider SVG as an alternative.
Optimization: JPEG
- JPEG can be optimized for smaller file sizes.
Image Alternatives
Image resources often require a large number of bytes relative to HTML, CSS, and JavaScript. The best optimization strategy would be to eliminate images where other resources can be used.
Alternatives to Consider:
- CSS: Effects, such as gradients and shadows, and animations are often only a fraction of the bytes used by an image file. They are resolution-independent and look clear at every resolution and zoom level.
- Fonts: Fonts come in a wide variety and improve usability by preserving the ability to select, search, and resize text.
Savvy IT 