Choosing the right image file types might seem like a trivial decision. But human beings are visual creatures, and images are an integral part of the online experience. Most pages and articles use screenshots and images to enrich the text content. In fact, only around 8% of websites don’t include any visual content. Unfortunately, many website owners still don’t understand which image file types to choose for different use cases. The result? They end up slowing down their site loading speed because their images aren’t the best format available, nor are optimized. In this article, we’ll cover all the most important image file extensions and when you should use them to provide the best possible user experience to your visitors.
Image file types and formats are divided into two main different categories: raster image files and vector image files. Let’s take a closer look at each category.
The most common image formats for the web (JPEG, GIF, and PNG) are all under the raster category. Raster image file types display static images where every pixel has a defined color, position, and proportion based on their resolution (for example 1280×720). Since they’re static, you cannot efficiently resize the images, the original design and pixels will simply get stretched to fill the extra space. This ends up creating a blurry, pixelated, or otherwise distorted image. The vast majority of the photographs or images you see on the internet use a raster image format.
SVG, EPS, AI, and PDF are examples of vector image file types. Unlike the static raster image file formats, where each design shape and color is tied to a pixel, these formats are more flexible. Vector graphics instead use a system of lines and curves on a cartesian plane, scaled in comparison to the total area, not any single pixel. This means you can endlessly enlarge the original image resolution without any loss in quality or distortion. As you can see, the difference between quality when magnified 7x is completely incomparable. Since the SVG calculates the positions based on a percentage of the total area, and not pixels, there’s no pixelation at all.
JPEG (or JPG) is a raster image file format with lossy compression that makes it suitable for sharing images. JPEGs are “lossy” meaning they reduce file size, but also the quality of the images when you use the format. JPEG is still one of the most used image file types that you’ll see on the internet because of its compression and virtually universal browser/OS support. Most social media platforms (like Facebook and Instagram) automatically turn uploaded image files into JPEGs. They also use unique social media image sizes to control the resolution of your photos.
PNG is a raster graphics format that supports lossless compression, maintaining detail and contrast between colors.
In particular, PNG offers much better text readability than JPEG.
This makes PNG a more popular choice for infographics, banners, screenshots, and other graphics that include both images and text.
The GIF is another image file type falling within the raster format. It uses lossless compression but “constrains” the image to 8 bits per pixel and a limited palette of 256 colors.
The GIF format is most famous (and most used) for animated images because its 8-bit limitation keeps file sizes of animations small and internet-friendly.
WebP is an image format developed specifically to provide better lossless and lossy compression of images.
Switching from JPEG and PNG to WebP can help save server disk space and significant bandwidth, with up to 35% smaller image files for identical quality.
One format that shouldn’t be missing in this guide to image file types, we have TIFF.
TIFF, which is short for Tagged Image File Format, is a raster image format most commonly used for storing and editing images that will be later used for print.
While it does support lossy compression, it’s typically used as a lossless image format. Furthermore, most professional graphics applications that support TIFF (Photoshop, Illustrator, etc.) do not use compression. Thus, it’s common for TIFF images to be large in file size.
Bitmap (BMP) is a mostly outdated image file format that maps individual pixels with little to no compression. That means BMP files can easily become extremely large and are impractical to store or handle.
HEIF, short for High Efficiency Image File Format, is an image format developed by the team behind the MPEG video format to be a direct competitor to JPEG.
In theory, the compression is almost twice as efficient as JPEG, leading to images of up to double quality with identical file sizes.
It’s a raster image format, based on pixel mapping, meaning you cannot scale up the images without losing quality.
The Scalable Vector Graphics file format, usually referred to as SVG, was developed by W3C as a markup language to render two-dimensional images right within the browser.
It doesn’t rely on pixels like a raster format, but rather uses XML text to outline shapes and lines in a similar way to how mathematical equations create graphs.
This means you can scale up SVG images infinitely without any loss of quality.
In essence, an EPS (Encapsulated PostScript) file is a vector image file used for storing illustrations in Adobe Illustrator and other illustration software like CorelDraw.
Like SVG files, EPS is actually a text-based document that outlines shapes and lines with code, rather than mapping pixels and colors. As a result, EPS files also support lossless scaling.
You probably associate PDF with storing, saving, and reading mostly-text based documents. That’s perfectly understandable — document is right there in the name after all.
But PDF files are actually based on the same PostScript language that powers EPS vector image files and can be used to save images and illustrations as well.
It’s the image format of choice for storing illustrations, magazine covers, and more for later printing. It’s also the preferred choice for our Kinsta ebooks.
As the name suggests, the PSD file format is an image format used for saving image documents and works in progress with Adobe Photoshop.
It’s not a web-safe image format, so it’s not supported by any browsers or standard image viewers or editors.
AI is another image format specifically developed by Adobe to not just save the image, but also the project state.
Like PSD, it’s not meant for use on the web and isn’t supported by any browsers, nor most default image viewers.
Unlike PSD files, you can freely scale AI files without any loss in quality.
XCF, which stands for eXperimental Computing Facility, is an image file type native to the open source image editor GIMP. It’s the equivalent of PSD files and saves paths, transparency, filters, and more.
Once again, this is a native file type for storing projects and it’s not supported by any browsers or default image viewers.
The INDD is a native file type for Adobe InDesign users where you can save project files including page content, styles, swatches, and more.
Although sometimes referred to as an image file format, it tends to link to visual elements beyond text.
It isn’t supported by any browsers or default image viewers, as it’s not a web-safe format.
Raw image formats are the file types a digital camera uses to store full-quality images for later post-production and editing.
Major raw image file types by camera maker:
Rather than the 256 shades per color channel (8 bit) available in a JPEG file, RAW files offer up to 16,384 shades per color channel (14 bit) in a single picture. That gives you more flexibility when tweaking colors and contrast in post-processing.
Raw images aren’t meant for the web or sharing and aren’t supported by any major browser or image viewer.
Based on data related to web usage, the three most common image file types are JPEG, PNG, and SVG.
Let’s examine what makes them so widespread below.
Since PNG as a format lends itself better to text inside the image, it’s more often used for screenshots, banners (depending on the banner ad size), and more.
Since it uses lossless compression, it’s also used by designers and photographers to showcase high-quality pictures on their portfolio websites for example.
These two factors, along with its universal browser and OS support, make it the most popular image file type on the web. PNGs are present on a whopping 77% of websites.
The lossy compression means that JPEG is a better option to use to showcase pictures throughout your content. The loss in quality is barely visible to the average internet user, and you can save considerable disk space and bandwidth.
That’s why it’s the second most popular format on the internet, used by almost 72% of websites. Most sites use both PNGs and JPEGs for different purposes.
As a reminder: There’s no difference between JPG vs JPEG, they’re two different acronyms and file extensions for the same format.
SVG files are scalable vector files that are perfect for icons, logos, graphs, and simple illustrations. The image can even be inserted directly into the page as CSS code.
That’s why SVGs come in third, used by 27% of websites.
While rarely the format of choice for static images, GIF has made a comeback as the #1 choice for sharing animations.
As a result, around 22% of websites use GIFs on their pages, even though they likely use PNGs and JPEGs as their standard formats as well.
Raw image formats are the highest quality but have unreasonably large file sizes of up to hundreds of megabytes.
For web images, the WebP file format offers 25-35% smaller file sizes than JPEG for the same quality photos, meaning you can upload higher quality images for the same disk space and speed up your site.
HEIF is another JPEG alternative with more efficient compression but isn’t currently supported by any major browsers.
PNG files offer lossless compression, but that means the file sizes will be exceedingly large and slow to load. A single PNG file can often be hundreds of KB or even 1MB+. However, if you take advantage of some tactics like lazy loading (available in core since WordPress 5.5) and a CDN, you could still have a fast site.
The most common image file types for the web that support transparency are PNG, WebP, GIF, and even SVG.
Most native project image file types like PSD, XCF, and AI also support transparency.
On the other hand, the popular JPEG image format does not support transparency.
The main difference between PNG and JPEG is that PNG is a lossless image format, while JPEG is a lossy one. This basically means that PNG uses compression techniques without sacrificing the original quality or detail of the image.
For text in images, tutorial screenshots, and when you want signs or other fine elements to be 100% visible in a photo, PNG is the right format.
As you can see from this funny picture above, PNG, which is depicted on the left, is much better at clearly displaying text and simple shapes when compared to JPEG, the one on the right.
Does this mean JPEG is a bad image file type? Not at all!
For regular blog posts or header images, JPEG offers more than good enough quality with significantly lower file size. You can often save up to 50% or more space while struggling to spot any difference in quality with the naked eye.
There’s no shortage of images you could legitimately use for your projects. Hopefully, this article has helped you understand which image file types and formats to use in which context for the best results.
Raster formats are best used for images and pictures, while vectors are a great substitute for logos, icons, and digital graphics.
Using the right image file types for the right task can not only help improve your page loading speeds but also lower bandwidth and server loads. As a subsequent positive effect, your overall user experience will also improve big time. Not bad, uh?
Save time and costs, plus maximize site performance, with $300+ worth of enterprise-level integrations included in every Managed WordPress plan. This includes a high-performance CDN, DDoS protection, malware and hack mitigation, edge caching, and Google’s fastest CPU machines. Get started with no long-term contracts, assisted migrations, and a 30-day money-back guarantee.
Check out our plans or talk to sales to find the plan that’s right for you.
