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 file extension you have never heard of. It offers significant file size reduction compared with JPEG, PNG, and even WebP.
With this file format being so new, it is a little harder to keep up with which browsers are supporting it. This regularly updated page regarding what browsers support AVIF shows that it is now available with the latest Firefox, Microsoft Edge (the new version with a Chrome engine), Opera, and of course, Google Chrome. If you want to test your browser yourself or understand more about how you can start using AVIF on your WordPress site, just click the link.
But either way, probably the best thing about AVIF is that if your browser ‘cannot’ display an AVIF file, it will fall back on a JPEG picture instead. Although that does have to be set up.
More good news is that if you host your images with Cloudflare, they have already added support for the format within the image resizing tool. You can also use a number of WordPress plugins to support AVIF.
What resolution should I use for website images?
When uploading an image to a CMS like WordPress, it is common for you to see a recommended image size in pixels. It is best to stick to the resolutions suggested so that your images appear as clear as possible, and just as important so that they don’t bog your website down with heavy image sizes and reduce its performance.
The resolution ratio of your source image may not exactly match the destination image, in which case your best option is to export your image at the maximum width possible. So for example, if a box states that it will accept images at a maximum resolution of 1000 x 800px, but your image is a 4:3 ratio, export it with the maximum 1000px width and it will auto-adjust to 750px in height.
This same principle applies to all raster images.
What image file formats to use on your website
Having absorbed all of this information (and there is a lot), what then are the best practices for uploading images to your website.
Currently, based on the more traditional approach—so disregarding WebP and AVIF for now—we would suggest that for pictures with a text overlay(test in the picture), PNG (.png) is the best option. For other pictures, JPEG (.jpg) should be your preferred file format, and for very simple indicators or graphics such as icons, logos, etc, PNG (.png) works perfectly.
GIF (.gif are fine for short animated images. But use them sparingly the file size can be large and if to many on a page slow your page load time down).
WebP is definitely a format to keep in mind, and if you have the option of uploading your images as WebP, they will go some way to improving your website performance and load times. Because WebP is the only newer format to currently be supported by all browsers, Apple’s Safari included, you can’t go wrong.
Hopefully, in the coming months and (hopefully not) years, we will see AVIF become the new standard so that we can all enjoy a faster web experience.
