What is the Best Raster Image File Format: JPG vs WebP vs PNG vs GIF vs PDF
If you are just starting as a graphic designer or just curious about image formats, you may find some answers here. I will be discussing 5 major graphic-related raster image file formats widely used. Discussing pros and cons for each format and why some formats are better for certain uses. This is from my personal experience throughout the years and I will likely dip slightly into the more technical territory.
A raster image is referred to as a static image. Image information is stored by pixel and color. It’s a set image and cannot be scaled. If you are scaling it, you are basically stretching the pixels to make up more space. Apps like Photoshop help with this “stretching” by filling in the gaps with estimates of nearby pixels. Some AI tools do a better job estimating missing pixel information to upscale, but what I’m trying to say is that a raster image is ultimately a static image and resolution is a constant. Imagine a real-life 5×3 photo. Let’s pretend that this photo paper doesn’t rip or physically get wrapped. Now imagine, you were going to blow this up into a poster just by pulling on each side. The image quality will stay the same and it will be just bigger, filling up larger space and blurry up close.
JPG
JPG, also called JPEG, is most commonly used for photos and websites. Most devices support JPG viewing. It uses lossy compression to store the image. However, it is an aging file format and it does not support transparency.
GIF
GIF uses indexed color palettes with lossless compression but it supports transparency and can have multiple images in a single file. The ability to store multiple images in a single file can be used to animate with a simple time duration between each frame. This is an aging file format as JPG is.
PNG
PNG is also commonly used for websites and motion graphics as it offers transparency with images. It is a lossless compression image format but it is not as effective as JPG in compression. PNG 8-bit mode uses indexed color palettes.
PDF is a popular format for documents. It supports image, text, and vector information. A raster image can be stored using JPG compression.
WebP
Most recent format of the bunch and uses more efficient compression than JPG. It supports compressed transparency. Because it was created by Google for websites, it is mainly used for websites. Unsurprisingly, Google always recommends WebP over JPG. Perhaps a biased opinion from Google?
Shifting File Formats
JPG, or JPEG, is the most popular format for the image file format. It has been the king of image file formats for decades. JPG initially gained traction with a 24-bit color palette and compression in the age of emerging 16-bit and 24-bit color modes on desktop PCs connected to the World Wide Web.
The 16-bit and the 24-bit refer to the number of colors a display or an image can reference, the 24-bit being able to reference millions of colors. It’s easy to think what’s the big deal with millions of colors? In the mid-90s, most desktops were still in 256 color modes. Even if you had a PC and a monitor capable of 24-bit colors, the file sizes for images were no joke. Imagine using a 512MB hard drive and a single low-resolution image taking 5-10MB of space using Bitmap, uncompressed image file format. It was the perfect storm for JPG to take over.
Space Jam’s 1996 website is one of the oldest surviving websites. It relies heavily on GIF file format and would have taken roughly 30 seconds to load with 1996’s typical modem speed.
Early websites depended on GIF format heavily. Thanks to indexed color palettes, the sizes of the file could be shrunken down considerably. Buttons and icons from this era’s websites were completely done in GIF file format and even used as repeating background patterns. As the internet speed improved, JPGs slowly took over for photos and PNG took over for transparent raster images such as logos. Now, WebP is gaining popularity as it can be replaceable for both JPG and PNG with file size reduction, and most big website platforms are converting JPGs into WebP format.
Pros and Cons of WebP
WebP is definitely a superior format for websites. There is no doubt about that. It supports transparency and compresses images better than JPG can. Websites will load faster from smaller file sizes with better image quality. Win-win right? This is the format that websites only dreamt about in the 90s.
But it’s not all sunshine for WebP. WebP is still an emerging file format and compatibility is an issue. Most modern web browsers support WebP but even some slightly out-of-date browsers don’t support it. I say slightly but in reality, it’s as recent as 2-3 years ago. Yes, 2-3 years ago was a billion years ago in the tech world, but have you seen how some old folks use computers? They rarely keep their devices up to date and some are happy to browse the web with Internet Explorer on a Windows XP computer, cus’ it ain’t broke yet. Did you know Apple’s Safari browser in iOS only started to support WebP in late 2020?
Imagine you are building a website that’s informative to seniors and your grandfather decided to use iPad you got him 3 years ago, in 2019, to view the website. Your grandfather never bothered to update his iPad because you never visited him during the forever-19 COVID era. You’ll be yelling at him about how he needs a new pair of glasses when he tells you he can’t see jack s#!t. So you decided to mail him WebP images on a flash drive. Your grandfather gets the flash drive and then plugs it into his favorite digital picture frame you just got him last Christmas. He calls you to tell you that he needs to go to the hospital ASAP because he still can’t see jack s#!t.
As you can see from the episode above, WebP clearly has compatibility issues for it to be a JPG replacement. Anything that was remotely internet accessible will support JPG formats and almost all displays and devices support JPG format.
Image Quality and File Size Comparison
Below is 3 image file formats compared side by side. Image quality is debatable at 50% for both WebP and JPG. 16 color index was selected GIF file to get the file size down to a similar size to the JPG file. GIF looks worse due to color palette limitation, even though the GIF file size is larger than both.
WebP at 50%
File Size -16.2KB
JPG at 50%
File Size -33.5KB
GIF Indexed 16 Colors
File Size -49.7KB
Note how WebP can display transparent gradient smoothly on the right side of the image while JPG doesn’t have the function to do any transparency, and GIF is not able to display different transparency levels.
WebP at 100% Lossless
File Size -226KB
PNG Lossless
File Size -354KB
Above is WebP showing an advantage over PNG with compression in lossless. Lossless means it does not lessen the quality when stored. Next, we compare WebP and JPG at their highest compression settings, which means worst possible quality.
WebP at 0% Quality
File Size – 3.58KB
JPG at 1% Quality
File Size -11KB
JPG shows slightly superior image quality over WebP in the highest compression settings but no one should be using these settings unless it’s a must. You can see 1% JPG file size is comparable to WebP 50% quality. In general, WebP has superior image quality to file size ratio.
Best Use Case For Each Format
This is strictly from my experience and your miles may vary depending on your workflow or need.
| JPG | GIF | PNG | WebP | ||
| Image Quality | ✓ | ✓ | ✓ | ||
| File Size | ✓ | ||||
| Versatility | ✓ | ✓ | ✓ | ||
| Compatibility | ✓ | ✓ |
A checkmark is given if they are in the top tier in the category.
JPG
JPG is the best for general photo images or if you are in the need of compatibility. JPG format almost always guarantees that whoever you shared images with will be able to view them on the device they are using. It’s a good choice to send a JPG preview image of your designs. If you are working on a vector design, sending a preview of it in a JPG image will be viewable almost everywhere.
GIF
GIF use cases are very limited nowadays because PNG is just a better version of it. However, if you need a non-video that is considered an image file, and is animated. GIF is still it for GIF Ads. GIF file has the compatibility edge over video files so sometimes it is preferred over video file formats. It is also an indexed color image format. If you only have a few colors in the design, it can be useful for small file sizes. Having said that, I would not recommend GIF for any modern professional output unless the end product must be GIF.
PNG
PNG is the best image format for workflow. Because it’s a lossless format with alpha channel support, PNG assets can be pulled into a design project without a hitch. If you pulled in a highly compressed JPG file, you will need to deal with macro blocking and artifacts from compression. PNG uses RGB color with alpha channels so it is also an excellent choice for a video asset. Also note, there is an 8-bit indexed color mode for PNG with smaller file size output.
WebP
As I have mentioned before in this article, WebP currently is the only best fit for websites. Converting JPGs to WebP guarantees file size reduction. It will also maintain better quality over JPG with a smaller file size. As for now, it’s not a viable format for other workflows.
PDF file format is simply the best for prints and a good choice for final output. It is not really fair for other file formats to be compared because PDF is much more versatile. Technically, PDF commonly uses JPG compression technology for raster images but also supports lossless compression. PDF can have layers with both raster and vector images. By default, PDF isn’t made to alter by the end-user. File size can get rather large at print quality settings, which should be at least 300 DPI with 100% quality JPG compression. Most printing shops will prefer PDF over other file formats unless they need a specific format for the print.
PDF is also great for any graphic material that shouldn’t be changed. For example, branding guides and digital brochures should be permanently static. PDF negates most attempts at altering, by choice or accident, better than other formats, especially with PDF’s security and password features.
In the general rule of thumb, stick with JPG for compatibility, PNG for workflow, PDF for prints, WebP for websites, and GIF for specific projects. However, it is ultimately up to you to choose which will work best in a given situation.
