Understanding Image File Formats
Every day in the Digital Media world, we are compressing images whether its by putting them on a website, app or any digital platform. Images can vary in file size and honestly, the smaller files perform better and load faster on these digital media platforms, but it comes at a cost of quality.
Have you ever gone to a website or found an image online and thought “man, that image sure looks blurry or pixelated” Well, that’s because it is. It is very likely that the image was compressed so much (reducing it’s size) that when it is being enlarged, the pixels have to be enlarged too, to compensate.
First, lets talk about the most common types of image files.
.jpeg
Qualities: JPEG uses lossy compression, this means that when you save it, it loses a lot of its data which is why it can create a smaller file size. It compares every 8 by 8 block of pixels to how much data is contained in them and when compressed it condenses it because we can’t really see the differences anyways.
Uses: JPEG is best used with photos because it tends to hide the compression much better than say a logo or an image with really sharp edges.
.gif
Qualities: GIF is a Lossless compressed file format designed to keep the image’s original data resulting in clean clear lines and edges. the GIF format is used most commonly with Logos, digital graphics and illustrations. GIFs can also provide animations most commonly those 3 second short videos that are widely used as internet memes. GIFs are created by a numerous amounts of images piled together and viewed in rapid succession. A downside to GIF is that it only provides 256 colors which means if you have an image with a lot of detail, it may come out pixelated and grainy. Because of these limitations PNG was created.
Uses: Now, generally used for basic motion graphics.
.png
Qualities: PNG is also a Lossless compression meaning that when compressed it doesn’t lose any of its data. PNG was designed as a replacement for GIF because GIF had some limitations that PNG wanted to resolve. PNG is most notably known for its ability to recognize transparency. GIF and JPG don’t have transparency as an option which makes PNG a great tool for design.
Uses: Images with transparency.
Those 3 file formats are widely used in today’s world and still hold up in trend standards. They are also considered Rasterized files, but we also have what’s called Vector files, i’ll explain.
RASTER VS VECTOR
Raster images are files that have data of every single pixel and what color they are on an image. Now when you want to enlarge this image, the picture tends to become more blurry and lose their quality. that’s because those pixels are having to expand and the computer is having to somewhat guess on where the rest of the pixels need to go and which color to be. Vector Images uses lines and shapes and where they are placed. So when these images are enlarged or expanded the color is just filled in or expanded as well keeping the integrity of the image just on a larger scale. This fortunately doesn’t increase your file size, but keeps it relatively small. Vector files are primarily used for graphic design, logos and illustrations and Raster is primarily used for photos.
.svg
Qualities: SVG file format unlike JPEG or PNG. With SVG the user is able to scale an image as large or small and not lose any image quality. That’s because it is a Vector image. SVG’s are commonly used with graphics that need to be enlarged to big sizes to fit on signs or anyplace larger than a computer screen. Graphic Designers will use SVG to scale their designs without losing its quality.
Uses: Vector graphics such as logos, large displays like billboards and anything you need to ensure it’s going to be quality regardless of the image size.
Compressing in 2018
We have come a long way in our abilities to compress images, the software we use has become so technically advanced that our human eyes can barely tell the difference, for example:
I took a decently large image and compressed it to different sizes, and honestly its almost impossible to tell the lack of quality in the smallest file. This is great for us all because we can benefit of having good quality images, small files and high speeds when loading them on the web.
Reboot Branding is apart of the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Media Output Project) in the (DGM 2341 course) and representative of the skills learned.
