If you run an ecommerce business, there’s a good chance you’ve had to wrangle and upload images. Whether they were logo graphics for your website, high-quality studio photos of your products, or behind-the-scenes pictures to share on social media, images are an essential part of your online presence.
There are several common file types you can use on the web, and others that are better for print. Understanding when to use different image file formats helps you keep web pages lightweight, ensure quality, and streamline your workflow.
What are image file types?
Image file types are standardized formats for saving and displaying visuals, such as photos, graphics, and logos. Each format balances quality, file size, color support, transparency, and compatibility differently. Choosing the right image file type depends on where the image will appear (web or print), how it will be edited, and whether features like transparency or animation are needed.
Factors to consider when choosing an image file type
There are different types of image files for a reason, and these factors make some file types better than others for specific applications. Keep these core differences in mind:
Vector vs. raster
Vector and raster graphics refer to the way an image file is composed at its most basic level. Raster files are grids of tiny dots called pixels. The more pixels in an image, the higher the resolution. If you zoom far enough into a raster photo, you eventually will see those pixels, so there will always be a limit on how big the image can scale. Most photographs you work with will be raster images, and all of the graphics and images you see online are in a raster format, even if they originally were edited and exported from a vector file.
Vector files use mathematical equations to create shapes and lines, so you can enlarge them without losing definition. Businesses typically use vector files as master files for logos and graphic artwork.
High resolution vs. low resolution
When it comes to online images, bigger isn’t always better. Most are made of thousands of pixels. The more pixels that compose an image, the higher the resolution will be. That means the image is sharper, and you can post the picture clearly at a larger size.
However, if an online image has a resolution that’s too high, it might slow down the page load speed—which is bad for a website’s technical SEO—and be harder to share or store. File types like JPG and PNG are able to walk the line between quality and performance, which is why they are some of the most common file types.
Lossy vs. lossless compression
Compression is the act of digitally shrinking files, which makes them easier to manage and transmit online.
Lossless compression, as the name suggests, is a method of compression that retains all of the original information, like colors, brightness, sharpness, and the makeup of each individual pixel, while still making the image smaller. A lossless compression algorithm might look at an image and find identically colored pixels throughout. To save space, it will create an abbreviation for “black pixel,” so it doesn’t use memory for every single black pixel.
Lossy compression determines an acceptable amount of image degradation, which is a loss of detail and quality, in order to shrink the image. It may lump pixels together or merge similar shades of a certain color.
Image file types
You’re likely familiar with the main image file types like JPG, PDF, or GIF, but there are several more, each with its own strengths and weaknesses. Here are 10 image file types you might encounter:
JPEG or JPG
Short for: Joint Photographic Experts Group
File extensions: .JPEG or .JPG
As one of the most common image file formats, JPEGs (or JPGs) are good at keeping file sizes small while maintaining reasonable image quality. If you run an ecommerce business, it’s a great image format for your product photos pretty much anywhere you want to display an image online. You can use JPEG and JPG interchangeably as a file extension.
The JPEG format is a lossy raster image, so it’s prone to pixelation when zooming in. This is problematic when you’ve saved and reuploaded JPEGs multiple times, as they tend to become distorted. If you struggle with this issue, there are tools that can help with resizing photos, like Shopify’s Image Resizer.
Short for: Portable Document Format
File Extension: .PDF
A PDF is a file format that preserves the appearance of a document, allowing you to share it regardless of the software, hardware, or operating system you initially used to make the file. Created by Adobe as a proprietary format in 1993, PDFs became publicly available in 2008. They’ve since become a default way to share documents and high-quality images, and you can also upload PDFs to your website for readers to click and read. You can also open these files in a viewer like Adobe Acrobat.
If you run a business, you’ll likely use PDF files for materials such as multipage documents, style guides, and reports with multiple images. You may also find public-facing use for them as downloadable white papers or trend reports, which you can use as lead magnets.
PNG
Short for: Portable Network Graphics
File Extension: .PNG
The PNG file format is similar to JPEG, but not as ubiquitous. Unlike JPEGs, PNG is a lossless image format that allows for more detailed editing without losing quality. Despite the lossless compression, it’s not as high-resolution as other file formats, so you shouldn’t use it for printing.
The real strength of the PNG is its ability to include a transparent background. If you maintain a website for your company, the PNG format is likely the best image format for logos, graphics, and product photos. The ability to make the background transparent means you can place images of your products directly over the website background.
HEIF or HEIC
Short for: High Efficiency Image File or High Efficiency Image Container
File Extensions: .HEIF or .HEIC
A HEIF is a modern image format you can use to store photos and sequences of images, like bursts or animations. An HEIC is a type of HEIF file, and it’s the default file format for photos taken on iPhones and iPads. It is not an Apple-specific format, however. HEIF files are basically JPEG files, but with higher quality and a smaller size, thanks to technological advances in compression algorithms.
HEIF uses compression derived from the MPEG video format to create smaller, higher quality images. HEIF and HEIC files are not yet accessible by everyone, so you may have to convert them into JPEGs until the format is widely adopted.
GIF
Short for: Graphics Interchange Format
File Extension: .GIF
If you’ve clicked around the web at all, you’ve definitely seen animated GIFs. They have a very small image file size and allow for animation of multiple frames repeating in a loop. This type of file can contain still images too.
GIFs are small and load extremely fast, thanks in part to their having a limited color palette of 256 colors. You may use GIF format image types for animated images on your site, but you may also find uses for them where you want to display small, simple images that will load fast and not take up much bandwidth.
TIF or TIFF
Short for: Tagged Image File or Tagged Image File Format
File Extensions: .TIF (or .TIFF)
TIFF files are raster files that use lossless compression, meaning you can copy and edit them without losing information or quality. A TIFF file is great for storing images and photos for print, so you may use this image file type for a mailer, flyer, or brochure. However, TIFF is typically too big for web graphics, and it will cause your website to load too slowly on your users’ web browsers.
PSD
Short for: Photoshop Document
File Extension: .PSD
Photoshop is the most well-known photo editing software, so it’s no surprise that Adobe Photoshop’s proprietary image extension (.PSD) is a common file type. It’s a fairly specialized file type that’s not meant for image display. PSD files are not uploaded as images to your website, but are project files that allow you or someone else (likely a graphic designer) to edit images before exporting them as another file type for upload.
It’s also worth noting that PSD files open only in Adobe Photoshop, so they are useful mainly to designers and consumer-users of the software. PSD files include image layers, giving you the ability to edit with much more precision. Photoshop works only with raster image files and does not support vector graphics. In ecommerce, the main way you’d use a PSD file is to send a project to another person in your company or to a designer to work on before exporting a JPG, PNG, PDF, or another image file to upload.
AI
Short for: Adobe Illustrator
File Extension: .AI
Note: AI files (Adobe Illustrator, not artificial intelligence) are arguably one of the best image formats for logos, as they work with vector data instead of pixelated graphics. This means the lines in your logo will be perfectly sharp with no pixelation or degradation, no matter how big you enlarge it. That said, they are not built for display, so you likely will keep a master logo file in AI format but export a PNG or JPEG to display on your website.
Similar to Photoshop files (PSD), Adobe Illustrator files are a proprietary file format of Adobe, and are meant for use by designers. They aren’t file types that are displayed publicly online. What sets Adobe Illustrator documents aside is scalable vector graphics. Unlike Photoshop, which creates raster images made of many pixels, Illustrator uses vector image files. An AI file is perfect for keeping master files of your logos and graphics, so you can send them to designers or printers to achieve perfectly straight lines with no pixelation.
WebP
Short for: Web Picture
File Extension: .WebP
If you’ve ever dragged and dropped an image from your web browser, there’s a good chance you’ve come across a WebP. This web-specific image file can support transparency like PNGs and animated frames like GIFs, and works pretty similar to JPEGs.
In recent years WebPs have become more common online as a catch-all internet image format. They have higher quality and compression ratios than JPEGs or PNGs, so WebP images are great for image-heavy websites that need to load quickly. Nearly all modern browsers support WebP; for older or legacy browsers, provide fallback formats if needed.
RAW
Short for: Nothing (it literally means “raw”)
File Extension: .RAW, .CRW, .NEF, .CR2, more
RAW files are unprocessed digital images. They’re uncompressed and contain as much data as possible. Digital photographers often snap pictures in this format and edit them later. RAW is a catch-all term that refers to a constellation of proprietary and non-proprietary file formats for different camera systems. Canon created the CRW and CR2 RAW file types, while Nikon developed the NEF file extension.
You won’t run across RAW image files online, but you will open them in editing software like Lightroom or Photoshop to edit and create different image file types for display, like JPGs and PNGs.
Image file types FAQ
What are the most common file formats for images?
Common file formats for digital images include JPEG, PNG, PDF, and WebP for the web, with TIFF popular for print.
What is the most used image file format?
JPEG is the most common file format for online digital images, but each file format has its own strengths and weaknesses as they try to balance quality with size.
Is TIFF better than PNG?
The term “better” is subjective, as both TIFF and PNG have different uses. TIFF is a high-quality format, best for images you want to print. PNG is a lower-quality format with the ability to support transparent backgrounds, making it a good choice for displaying logos and graphics on a website.
