Raster or bitmap images are a display of a rectangular grid of pixels arranged in rows and columns and assigned color values.
Raster: a set of horizontal lines composed of individual pixels, used to form an image on a screen or in matrix printing.
https://www.dictionary.com/browse/raster
Two types of image compression
- Lossy – reduces file size by permanently eliminating certain information (transitions are averaged)
- Lossless – retains raster values during compression (colors can be limited)
GIF – 1987 (lossless)
- always reduced to no more than 256 unique colors
- can be animated
- primitive background transparency – jagged edges
- patented by Unisys in 1995
- pretty good for icons & logos
JPG – 1992 (lossy)
- the most common file type you run across on the web
- for photographs not suited to images with text, large blocks of solid color, and crisp edges
- compression averages out variances in spectrum of colors & gradients
- best for photographic images
PNG – 1997 (lossless)
- can save your image with more colors on a transparent background
- more efficient compression than GIF
- open source
- better for icons & logos than GIF
SVG – 1999
- wide web support by 2011
- purely a vector graphic format – not raster or bitmap!
WAYS TO GENERATE SVG FILES
SUBSCRIPTION
WAYS THAT WORDPRESS HANDLES SVG FILES DIFFERENTLY THAN OTHER IMAGE TYPES:
- SVG files are not resized upon upload so the image size options (full, large, medium & thumbnail) cannot be applied
- For the same reason the size percentage settings are not reliable
- The viewBox & Style size attributes set in the .SVG file will be the default size of the image (as presented on the front end)
- The width control will modify the size of the image – but the height control will not
- A containing block will limit the size of the .SVG image regardless of other settings by default