Images are a large part of any website, so I decided to learn more about them today.
Images come in compressed, uncompressed, and vector format. A vector format is an image that is drawn every time using math. For example draw a line 45 degree from this point and color it blue. A non vector image or rasterized image is pixels. Basically the computer has a grid and knows what color each point on the grid should be. This is why you can zoom in on a vector image forever. The image is redrawn each time so it is perfectly sharp. You can not zoom into a raster image because the computer only knows what goes in each grid point. When you zoom in, there are more points than the computer knows what to do with, and so it gets super blocky. If you ever want to print something big, it usually has to be in a vector format for this exact reason.
PNG, JPEG, and GIF formats are the Big Three image formats. They are the most used formats for displaying images on the internet today. (Try to guess why the formats are matched to the player. 🙂
JPEG – compressed raster – small file sizes, image quality can degrade if edited and saved repeatedly.
PNG – large file size. Open source successor to GIF.
GIF – limited to 256 colors. Useful for simple colors, small file size.
So the simple rule is, use PNG for everything unless you have a specific reason not too. This post on Quora about PNG details why.
So there you have it. A short post about images. Anything that I is glaringly wrong or didn't make sense?