When it comes to giving a website personality, most people think of using images or illustrations to round out the design process. But if you’ve ever created something to use as branding on a website (logo, photo, illustration), it’s not as simple as it looks.
I’m talking about what image formats to use for different types of content and their intended purposes on a website. Most people have heard of GIF, PNG, and JPEG—but when should they be used?
Lossy vs. Lossless
When creating and then saving digital content, it’s also important to consider whether the format is Lossy or Lossless.
Lossy image formats are compressed to smaller file sizes by removing data when saving. This often lowers the image’s resolution but can be helpful when saving images online, where size and website speed correlate.
Lossless image formats allow you to save the original (uncompressed) file without losing any data. The resolution is not diminished, though conversely, the size of the file is larger.
It’s a good idea to save and keep a copy of the original photo in a lossless format in addition to your optimized (lossy) website photos.
Knowing this information is not only helpful in keeping up with the best practices, but it can also make your website faster by using the right size and format for that specific type of content.
So what are the most common formats for different types of image content on a website?
Most Common Formats
- JPG: Joint Photographic Experts Group
- Displays millions of colors
- Well-suited to high compression levels
- Lossy
- PNG: Portable Network Graphics
- Ideal for images with flat colors and hard edges
- Supports transparency
- Lossless
- GIF: Graphics Interchange Format
- Formatted to showcase animations
- Supports transparency
- Only supports up to 256 colors
- Lossless
- SVG: Scalable Vector Graphics
- Vector image format
- Will smoothly scale to any size
- Supports transparency
- Lossless
- WebP: Web Picture Format
- Newer format
- Excellent choice for both images and animations
- Better compression than PNG or JPEG
- Supports transparency
- Lossy or Lossless
Why this matters…
The types of images you use affect your website in a few different ways.
- Look & Feel: As you might imagine, some image formats include more detail and are higher quality than others, directly impacting your brand.
- Load Time: Since some image formats have larger file sizes, this is the single most common issue we see on slow websites.
- Responsiveness: When you stretch or shrink an image too much, the quality can suffer depending on the image format, which could inhibit your site’s ability to look great regardless of screen size.
It’s typically advantageous to use the best format possible for the content and have fallbacks to older formats. For example, You might primarily use WebP and SVG but fall back to JPG and PNG.
Content Types and Their Appropriate Formats
Many different types of image content can be used to enhance one’s website. According to research, people only retain about 20% of what they read while remembering 80% of what they see. This fact might be explained, in part, by another study that suggests 65% of adults learn better through visuals.
Below is a list of image media often used on websites and what format they should be so your website will run optimally.
Logos
Widely recognized as a crucial branding element, logos are necessary for every website to tell users they’re in the right place. It is best practice for logos to be SVGs with a transparent background. This also goes for icons.
Photographs
For most cases, JPEG is an excellent format for displaying photographs with many colors and intricate details.
JPEGs generally hold up well when compressed, but you may see a slight drop in quality after optimizing images. But this will only happen if you’re using a high compression level, and even then, it shouldn’t be too noticeable unless someone’s looking for it.
It’s also important to note that JPEGs aren’t ideal for images with solid colors and text, like screenshots (generally better as PNGs).
Diagrams, Digital Illustrations, and Charts
SVG is a good choice for images using vector graphics (like those made in Adobe Illustrator). It scales easily to any size, even if the size may change or is unknown at the time of creation.
(Simple) Animations
GIF supports simple animation or a series of images that changes with each frame; think of it as a digital flipbook.
Animated GIFs have been around for a long time and are very popular. In the past few years, their re-entry into social media can be seen through the explosion of short video clips, memes, and other simple animation sequences.
While fun to use, you should aim to use GIFs sparingly throughout your website since they are a bit more challenging to optimize and can therefore slow down your site’s loading time.
Take Note!
We want to note that formats like PNG, JPEG, and GIF have lower performance when compared to newer formats like WebP and AVIF (AV1 Image File Format).
WebP can generally be used in place of JPG, GIF, and PNG. And virtually every Page Speed Project we work on incorporates WebP, but we do recommend having a fallback version of the content in the (rare) case the browser doesn’t support it, as part of our image optimization strategy. However, we don’t recommend AVIF this time since it doesn’t yet have widespread adoption among web browsers.
To Conclude
When it comes to creating a successfully branded and user-friendly website, using different types of media is key to keeping people engaged and making your site memorable.
Using the correct format for the content on your website is crucial if you want to get potential customers to find and engage with your site and make your (or your web designers’) life and the internet better overall.
Have a question about a specific image format for your website? Ask us in the comments! Think you may need more help with your website? Reach out with any other questions you may have.
Links:
How to Choose the Best Image File Format for Your Website
Image File Type and Format Guide
What’s the Best Image Format for Your Website