Today, there is an overwhelming number of file extensions out there, making it hard to know when to use them in your design or web projects. Nevertheless, knowing which file type to use is an important concept to understand, as it can make or break your project’s quality or performance. There is nothing you want less than to have your website load slowly due to something as simple as using the wrong file type.
Terms Defined
Raster vs. Vector Images
The first thing you should understand about file extensions is that there are two main categories of them: raster-based files and vector-based files. But what does that mean?
Raster images are made up of pixels that come together to form an image. This is why when you zoom in on them, they become blurry and pixelated.
Vector images are instead made up of a combination of anchor points and lines that come together to form artwork. As a result, these types of files can be blown up or shrunk down without affecting the resolution.
Lossy vs. Lossless Compression
Images are a great way to add meaning to your website content, enhance your design, and elevate your user experience, however, they can also weigh down your site performance if they are too large. Image compression is an important process that improves loading speeds and ensures your images are helping your site rather than hurting it. There are two different types of image compression: lossy and lossless.
Lossy image compression permanently removes some of the data from an image, resulting in a smaller overall file size. This process greatly reduces the size of an image file, but it also can cause the quality to degrade along with it.
On the flip-side, lossless image compression does not reduce image quality. The main difference between the two is that lossless compression only removes data that is non-essential to the image. Normally this is data added by the camera or device to take the photo. Lossless compression process is great for maintaining quality, but it doesn’t result in a significant decrease in file size or save you much storage space.
With that understanding, here are seven different types of files and when you should use them.
Raster-based File Types
.JPEG
JPEGs are one of the more familiar file types for the general public. They are raster-based images that most cameras use as their default capture format. They are so common because most, if not all, programs support them. JPEGs are considered lossy files, which can be both a pro or a con depending on what you are trying to use them for. If you’re using JPEG images on WordPress, it will handle the compression automatically when you upload these files to the media library.
JPEGs are great candidates for being used when you need small “preview” images. JPEGs are also best used for when you need to print off an image or include it in a print PDF. They should ideally not be used for logos.
.PNG
PNGs are another popular file type, and continue to become more widely used. They are also raster-based files, but unlike JPEG files PNGs are lossless instead of lossy. This means that they retain their data as you compress them. Though this can be a good thing, it also makes the file a lot larger than JPEGs. A big pro of PNGs is that they support transparency, meaning that you can layer them on top of other images or backgrounds.
That means that PNGs are great to use in the case of logos, or other line art. Since they have such a high resolution, however, they should be used sparingly on websites, in order to not slow down the loading time.
.GIF
You likely know GIFs from the funny animated pictures that you send to your friends. These raster-based files are a series of images that run in a loop. They are very small lossy files, with a low limit on the number of colors that can be used. This is why they are so easy to send over text and messenger.
That in and of itself is one of the best uses of GIFs, but because their size is so small, they are also easy to include on websites. Since they are only in the RGB color space (and their animation is part of their charm), GIFs do not work for print, and should instead only be used for digital purposes that support animation and do not require high resolution.
.TIFF
TIFFs are probably the least-commonly-known raster file type. This is probably because TIFFs can be great resources for photographers or designers, but are not necessarily the best option for everyday use. They are very large lossless file types that retain all their data when they are shrunk. They are also editable and preserve their layers.
With all of that in mind, TIFFs are best used in cases where photographers or designers want to be able to use programs like Photoshop to continue to edit and make changes to their work. They are also not recommended for web use due to their large size, and should be used only for print purposes.
.WEBP
Developed by Google, WEBPs are one of the newest, popular, raster-based file types. These types of files can be both lossless or lossy, and support transparency, like a PNG. The biggest pro to WEBPs in comparison to other raster-based file types is that they are very small. A downside is that since they are newer, they are not yet supported by all browsers.
Since WEBPs are such a small file, they are a great option for optimizing your website. You can find free software or sites online to convert your currently used JPEGs, PNGs, etc. to WEBPs, which is a great way to get your website moving faster. Reach out to our team and find out if your website supports WEBP files.
Vector-based File Types
.EPS
EPSs are a powerful type of vector-based files that can be opened in programs like Adobe Illustrator to modify and manipulate them. They are lossless files that are typically converted to file types such as PNGs, JPGs, etc. before official digital use.
Overall, EPSs are normally used to store and pass along artwork to different members of a project team that need to make edits. They are also beneficial for high-quality printing, and many printers will actually request you send them your artwork in the form of an EPS to print.
.SVG
SVGs are another form of vector-based files that can easily be shrunk or expanded without lowering their resolution. They are excellent for website use because they are now supported by all popular browsers, however, keep in mind they are not supported by social media platforms right now. Though they are not the smallest, SVGs are still a fairly small file type compared to others.
For these reasons, SVGs are best used for displaying logos, illustrations, or other art on the web. They are especially the best option when it comes to responsive design, since they can easily be resized without loss to the quality. SVGs should not be used for print.
Though this is a good summary of what file types you should save images and illustrations as, there are many other challenges that come with executing your own web design and digital marketing. Let us give you a hand. Reach out to Webspec today for an audit/assessment of the file types that are on your site, and how they impact your site speed or user experience!
