What Image File Extensions to Use for Websites
Uploading images to your website can be a lot more tricky than you might think. Not only do you need to ensure that your images are a reasonable size, but you also need to be sure to use the correct file extensions.
Depending on where you are sourcing your images from, or whether you are making them yourself, you are likely to come across a number of different file extensions and it can be confusing to understand what each is designed for.
That is what we are going to make crystal clear for you in this article.
How do image colors work?
Before we get into the long list of different image file extensions, it’s important to understand the fundamentals of how images are viewed online, and it all starts with the color profiles.
The colors used for images can often determine what file extension you can or need to use.
There are two types of color profiles for images. They are CMYK (Cyan, Magenta, Yellow, and Key (black)) and RGB (Red, Green, and Blue).
If you look inside your inkjet printer, you will see that it has four ink wells that make up the cartridge. They are colored cyan, magenta, yellow, and black. This is the color profile that you would associate with a physical version of an image, aka a print or a photograph.
When you display an image on a screen, you should be using RGB because that is the color profile of the individual pixels that make up the screen. Every single pixel will have a precise combination of these three primary colors to make up millions of color variations – 16,777,216 to be precise.
Generally speaking, if you are going to be uploading content to your website, it is always best practice to use the RGB profile wherever possible. In the case of JPEGs, the color profile will be referred to as sRGB. The sRGB color range is slightly smaller but for web use, it shouldn’t be noticeable.
What are the most used image file extensions?
All images that you may use will fall into one of two categories. They are raster and vector files. These two image file types have very different properties and are therefore used for different purposes. There are also file extensions that are used specifically for each.
Raster files
A raster file is what people typically have in mind when they think of an image. That is, the further you zoom in, the more pixellated it will become. That is because raster images are made up of individual colored blocks or pixels.
Raster images cannot be resized without affecting their resolution. You should always retain the full-resolution source image and export it as the specific resolution (size) that you need for each application. This is especially important on websites where you will often find a recommended dimension for different sections of your site.
The three most important and commonly used raster file extensions are .jpg, .png, and .gif.
.jpg
This is the file extension for JPEG (Joint Photographic Experts Group) files, and you might come across it sometimes written in full as .jpeg. If you do, don’t worry, it’s the exact same file type. The change was made to three letters to accommodate a three-letter restriction on file extensions for Windows.
Most image files that you come across will have the extension .jpg. These are very adaptable files equally suitable for printing as they are used on your website. One particularly important characteristic of a .jpg file is that it is known as “lossy”. This means that as you change the image resolution, you will lose quality. For this reason, you must always pay close attention to the pixel resolution that is expressed as, for example, 640 x 480px.
.png
Otherwise known as a Portable Network Graphic, a .png is designed specifically for digital use. They were specifically created to be viewed on a display and are capable of displaying a much wider range of colors than a .jpg file. You can also create files with a transparent background (no white or black) which makes them hugely adaptable to present logos, text, or any type of image on top of another. This means that when you are effectively stacking images on a website (for example a logo on top of an image or a background color) they are the perfect solution.
PNG files are ‘lossless’ meaning that they can be edited without losing quality, but they are still low resolution. They are also not suitable for printing.
.gif
You will no doubt be aware of what a GIF is, but you will probably be thinking of the animated image version. This is how they are most commonly used, either as a meme, re-purposing pop culture clips, or flooding your work’s Slack channel.
GIFs are normally formed from 256 colors using the RGB color profile and are used on websites where an image needs to be loaded extremely quickly, as opposed to one that needs to be high quality.
Vector files
Vectors are also image files but instead of pixels they are made up of complex formulas and are used to create graphics that can be easily re-sized without affecting the image quality. Your business logo will (or at least should) have been designed as a vector.
If you are not sure whether you have the vector logo or not, it is vital that you contact either the graphic designer responsible for designing the logo. You can also try anywhere you had your business card or merchandise printed because they will have requested a vector logo before printing or at least a PDF from which you can extract the vector logo.
(An important thing to note is that .pdf, .eps, and .ai file formats are not suitable for uploading images to your website. They are mainly included in this article for reference purposes and to explain ways in which you can develop original images and graphics.)
A .pdf is an incredibly powerful file format designed by Adobe that allows for high-quality information to be reviewed on any computer and with anyone. It doesn’t require any design or editing software to view files, only that you have downloaded the Acrobat reader software for free. The fact that you can also make further changes to the file makes this possibly the most powerful extension for sharing graphics.
PDFs are also an ideal solution for displaying high-quality images alongside graphics as it supports both rasterized and vector content in the highest possible resolution. This is why printed and digital marketing materials such as leaflets and brochures will always use the .pdf extension for printing or online use.
.eps
EPS is a strict vector file format designed to produce high-quality graphics for printing. Because almost any design software can create a .eps file, it is considered a universal file type used to open vector artwork on any design editor.
.ai
AI is a file used specifically for Adobe Illustrator and is arguably the industry standard for designers to create artwork and graphics from scratch. Your logo will most likely be created using this software. Illustrator allows you to produce vector artwork that is very easy to manipulate in a huge number of ways. It can also export artwork in ANY of the file extension types we have mentioned.
Image file extensions to look out for
We have all become very used to JPEGs being the standard for image file extensions, but this is a technology that has literally been around for decades (it launched in 1992, so that’s THREE decades). One of the ongoing issues with this file type is that in order to be high quality—especially for viewing on high-resolution monitors and screens which is the norm these days—the file sizes need to be huge. This is a very big problem for businesses and even entire industries that need to display a lot of premium content because it requires huge amounts of processing power and storage.
Fortunately, there are now a couple of file extensions that are not commonly used but we could see them growing in popularity in the very near future.
WebP
WebP is a format that has actually been around for over 10 years! But don’t let that fool you into thinking it is no longer relevant. Compression software like Cloudflare is now swapping images to the .webp format boosting its wider adoption.
Part of the reason for its slow uptake was thanks to Apple not adding support for the format to their Safari browser until 2020. A large part of this was down to the format being created by Google. The first version of its supporting library (resources used by computer programs) emerged in 2018 so you may have seen it appear before without realizing it.
The big advantage over a JPEG is that WebP lossless image files are 26% smaller than PNGs and WebP lossy image files are 25-34% smaller. This is particularly exciting for websites, for which the image format was designed because it will increase performance for individual sites and more broadly speed up the web!
AV1
The AV1 image format (aka AVIF) is pretty much the most exciting f