JPGs, PNGs and GIFs, Oh My!
Choosing the best image file format for your website is a big deal because the images on your website play a large part in the visitor’s online experience.
We’re visual by nature and visually driven. We perceive pictures faster than words, so images are scanned first, before the text.
Photos, screenshots and animations are often used to enhance the text content on a web page because visuals are highly informative, emotionally appealing and subconsciously communicate messages, brand and aesthetics.
We love consuming images!
Not surprisingly, only 7.3% of websites don’t use any visual content at all. Websites need good images if they want to inform, persuade, connect with and sell to their visitors.
BUT many website owners still don’t know what image file format to choose or how to optimize it. The end result? You accidentally export low-quality graphics and slow down your page speed because it’s not the best format available or optimized for the web. Yikes!
Your choice of image formats is vital.
Just like logo file formats, each image type is used for a specific purpose and has its pros and cons. Understanding the basics will give you confidence in being able to decide what format is best in every situation.
This post explains why the image formats you use matter, key differences, file types and when to use each format in order to provide the best possible user experience to your website visitors.
Why image file formats matter
All graphics online are image files. These files come in many formats and while you can often convert the initial file format into a different type, doing so is not always good. They render the same images in different ways and have different file sizes.
Each file is intended for a specific use and matters when it comes to appearance, performance and scalability.
Appearance: Some image formats include more detail and are of higher-quality than others.
Performance: Some image files take up more space than others which will affect your site load time.
Scalability: Some image formats can be scaled (made larger or smaller) without losing quality while others cannot. This can affect appearance on different screen sizes.
The files on your website should result in a small file size, fast-loading image (performance) without a loss of quality (appearance/scalability).
What are the different image file formats?
Image formats are divided into two main categories: raster files and vector files. Each category has its own intended use.
Vector graphics use lines, points and polygons to represent an image. They are best suited for simple geometric shapes and work great for logos and icons.
Vectors can be infinitely scaled without losing quality, making them ideal for high-resolution screens and varying sizes. However, vectors are not the best file format to save photos.
Vector file formats:
SVG
PDF
EPS
AI
Raster graphics use pixel values within a rectangular grid to represent an image. They are best suited for complex images such as photographs.
Unlike vectors, these file types are resolution-dependent and based on their size, meaning they can’t be scaled up without losing quality and becoming pixelated. The majority of images online are in raster format.
Raster file formats:
JPEG
PNG
GIF
TIFF
PSD
Image Color Modes: CMYK and RGB
Images can be saved in one of two primary color modes: CMKY and RGB.
What’s the difference? One mode is always better than the other—It depends on where and how the image is displayed.
CMYK (Cyan, Magenta, Yellow and Key/Black) is the color space for print. These colors represent the four inks that will be combined during the printing process. Image files saved in this mode are optimized for print.
RGB (Red, Green and Blue) is the color space ideally used for the web. These colors of light combine to produce other colors. Image files saved in this mode are optimized for the web.
You can convert between RGB and CMYK if you need to. Know your color modes to get greater color control over the final images on your website.
Image Resolution and Dimensions
Resolution is the detail an image holds. Image resolution is described in PPI (pixels per inch) for display resolution and DPI (dots per inch) for printer resolution.
Higher resolutions mean that there are more pixels/dots per inch, resulting in more pixel information and creating a high-quality, crisp image.
In fact, screen images work differently than print. Why? Because we must think about the pixel dimensions of monitors rather than the size of the object being printed.
Each monitor has a different screen resolution and display quality is constantly improving with new tech (Apple’s Retina display), which can make it difficult to design a website with images that display perfectly across all devices.
With printed images, you need to have at least 300 DPI for a good-quality image at a useful size. DPI and PPI significantly affect an image's print quality but not its display quality online.
A common misconception is that images must be optimized for screen display at 72 PPI and that PPI value is the deciding factor of image quality for web images, where it’s actually about pixel dimensions.
The physical size of an image refers to the dimensions it would print (ex: 5" x 7") or the pixel dimensions displayed on the web (ex: 500 pixels x 700 pixels).
The resolution and pixel dimensions affect the memory size: how much space an image file takes up on a hard drive or your web browser.
When taking photos or scanning, capture your images at a large resolution and size because it’s easier to reduce the size of the image (discard pixel information) than to enlarge it (create pixel information).
Optimize your images with consistent pixel dimensions, so it’s better for performance and display on the web. Upload your images at a similar size to that which you'd like to display.
Squarespace has a guide on formatting images for the web and I recommend reading it (and their other help guides) if you this CMS platform for your website.
Lossy and Lossless
All raster files are either lossy or lossless.
Image optimization is done with lossless compression. Lossy image formats are compressed to smaller sizes by removing data when saving the image. This can result in a lowered image resolution but is ideal to use online where file size and download speed are essential.
Lossless image formats capture all the data of the original file—nothing is lost and therefore the resolution is not decreased. Always start with your original photo in a lossless format and keep a copy of it, in addition to your optimized website photos.
EXIF Data aka Image Metadata
Every image stores information about it within the file, such as the type of file, size, dimensions, device model, camera settings, GPS coordinates, date and time, an image thumbnail, descriptions and copyright info.
This format is the EXIF (Exchangeable image file format).
View EXIF data on your operating system:
For Mac: highlight your image in the Finder, then press command I OR press control and click, then select Quick Look
For PC: highlight your image, right-click, select properties, then select details
Here’s an example of EXIF data from a photo I took on my iPhone. You can also view EXIF data in Adobe Photoshop and Lightroom.
This data can be useful for photographers who want to know what tools and settings were used to create that image or the exact location they took that photo, but more data means a larger file size.
EXIF data is often edited or removed from images to optimize them for the web. In addition to reducing the file size, there are also privacy concerns with information like location data.
If you notice in my EXIF data example, there are no latitude and longitude coordinates because I have location services disabled for my camera.
But, geotagging does have some local SEO benefits and can help improve ranking in search engines. Location tags can help searchers find location-based search results and increase the chance your images will be seen in image searches. If your business is location-specific you can benefit from using geotags on your photos.
In Squarespace, you can import metadata to uploaded images in galleries, but first you must enable the metadata import setting. Before you upload your optimized image make sure they have all the metadata you do or do not want to be included.
When to use each file format
Choosing the best image file format depends on the type of image and the end goal. Photos should use a JPG file format whereas logos and simple illustrations should use PNG or SVG files.
Keep in mind, JPG and PNGs can also have the same quality and smaller file size with the lesser-known format, WebP.
Overall, low(er) resolution, lossy image formats are best for where smaller file size and fast-loading is more important than super high image quality. Although, it is possible to optimize an image for the web without losing too much quality and that’s exactly what you want!
Aim for the best image quality and pixel dimensions for the intended display of the image, without sacrificing web page speed and overall site load time. The result? A superlight website that reads on any device and looks amazing at the same time. Yay!
Optimizing photos for your site isn’t always easy to get right (I’m not speaking from experience or anything 😉) and will likely take some experimentation and testing. But once you get your image optimization process down, your website’s speed will improve.
If you have images on your website, test it with an image speed test to see what images can be better optimized. The good news is you can always make improvements and update your website with a better-sized graphic.
Common image formats used on the web: JPEG, PNG, WebP, SVG and GIF
Not all image formats have wide browser support, like TIFF or BMP files, so I’ll cover the image file types generally supported by web browsers. You’ll want to select the most appropriate format to use for your site’s imagery.
JPEG – Joint Photographic Experts Group
A JPG file is a raster-based image meant for web and print use. JPG format is the standard file format of digital cameras and is the most common image format used on the web because of its compression and universal support.
These files are best used for saving photographs with small file sizes and little noticeable quality loss. JPGs use lossy compression which means every time you re-save, quality decreases.
JPGs must be saved with the correct size and resolution for the end-usage. Social media platforms use specific image sizes to control the resolution, avoid pixelation and image stretching and ensures the full photo will be seen.
Pros:
Universal browser support
Small file and email attachment size, fast loading
Supports displaying millions of colors
Sharp, good quality photo images
Cons:
Does not support transparent backgrounds
Lossy image compression leads to low quality or poor text readability
Not to be used for computer-generated graphics
PNG – Portable Network Graphic
A PNG file is standard for web usage. These files are pixel-based and cannot be scaled up without pixelation. Similar to JPGs, this means they must be exported with the correct size for the end-usage.
However, a PNG file supports transparent backgrounds and retain overall higher quality images than JPGs for graphics (not photographs) due to lossless compression—you can save a PNG and not lose any quality.
It’s much better to use PNGs for graphics with fewer colors and rapid transitions between colors that need to remain sharp like logos, icons and simple illustrations.
Use PNGs on your website and social media because they create a sharper, more defined image on digital and mobile displays. Optimize your PNG files for the web by making your file size as low as possible while maintaining good quality.
PNG-24 exports a crisper image than PNG-8 because it saves an image with more colors, but the file size can be much larger. If your website CMS doesn't allow SVG file uploads, a good quality PNG file is the next best thing.
Pros:
Universal browser support
Supports transparency
Best used for graphical elements
Lossless compression
Small file size with limited colors
Cons:
Large file size with millions of colors
Not ideal for printing–optimized for the screen
WebP
WebP is an image format developed by Google in 2010 specifically to provide better lossless and lossy compression for web images.
Next-gen image formats like JPEG 2000 and WebP have better web compression than PNG or JPEG. Switching from JPEG and PNG to WebP can help save server space because the image compression keeps the sharpness of the original image AND greatly reduces the size of the file.
That means less data consumption and faster downloads. According to piio, WebP reduces file size by almost 35% in comparison to JPEG and 50 % to PNG.
Unfortunately, WebP format is not compatible with most CMS platforms and often needs a plugin extension or workaround to upload these files which is why we have yet to optimize our site’s images with this file format.
Pros:
Smaller file size for the same image quality
Uses both lossy and lossless compression
Supports transparency
Cons:
Not supported by all browsers, specifically Safari and Internet Explorer
Not supported by all CMS platforms, including Squarespace
SVG – Scalable Vector Graphic
SVG is an extensible markup language (XML) vector-based image for describing two-dimensional graphics developed by the World Wide Web Consortium (W3C).
An SVG doesn’t use pixel format which allows the image scale and maintain super high quality. These files support transparent backgrounds and can be opened in image editors and web browsers.
An SVG file is the ideal format for logos, icons and simple illustrations because they provide the sharpest quality graphic compared to PNG and JPG (in that order).
Pros:
Universal browser support
Small file size
Loss-free scaling for basic shapes and text
Supported by illustration software
Cons:
Not an ideal format for images or complex drawings
Not supported by all CMS platforms, but there are workarounds
Not supported by some default image editors
GIF – Graphics Interchange Format
GIF is the only animated image format supported in all major web browsers and most image editors. GIFs support transparency and animation and can be highly compressed to reduce file size.
GIF is a lossless raster format that’s best used for animated graphics where few colors are needed. GIF only supports 256 colors which means they are not recommended for saving photographs.
Other alternative animated image file formats include: APNG(Animated Portable Network Graphics), WebP, MNG(Multiple-image Network Graphics) and FLIF(Free Lossless Image Format). But these are not widely supported.
Image editing programs like Adobe Photoshop, GIMP, Microsoft GIF Animator, Giphy and Gyfcat can be used to create GIFs.
Pros:
Animation support: used for small animations and low-resolution video clips
Universal browser support
Small file size
Cons:
Loss of quality of photographs
Limited colors due to 8-bit (PNG and JPG supports 24-bit)
Copyright issues
Key Takeaways
When it comes to choosing the right image file format for your website, understanding the different file types and their intended use can help you improve your image quality and performance.
BUT picking the correct file format is only the first part. After getting the file format right, be sure to optimize your images with the correct pixel dimension, optimal file size, SEO keywords (search engine optimization) and alt text for accessibility.
We’re coming out with our own blog with tips on optimizing images for the web with SEO in mind, but we know you need it now so check out Kinsta, Shopify, or Jimdo’s guides on how to optimize images for the web.
If you found this post helpful or have any questions let us know in the comments. I’d also love to know what image file types are you using on your site? At Design Powers we mainly use JPG, PNG and SVG.
Need help with your small business brand and website? We’d love to chat. Please fill out our contact form and let’s schedule a time to talk.
Quick Guide to Logo File Formats
Download our free Quick Guide to Logo File Formats to know what file you need, where to use it, who uses it and why it’s right for the job.
