How to Choose The Best Image File Type for Your Website

We won’t be discussing jpg vs jpeg in today’s post, though after almost a decade in the industry, I still find myself switching between the two. Today it’s JPG by the way. Moving on…

When it comes to choosing images for your website, you have a lot to think about. You need to weigh the style, filter, subject matter and more. But what about the best image file type for websites? Think about what you want in an image from a technical perspective on your site. You want a clear image, and you want it to load fast. Simple enough, right?

JPG

JPG is a great file format for large images that load fast. Think about it like a sliding scale – the larger the image the slower it loads. So, if you want to have a large image on your site, you need to make your large-sized image a smaller format. The only way to do this is to compress the file. JPG files are lossy. In short, lossy is a type of compression where the file discards some of the content. The file approximates or estimates the data using a smaller representation to determine the whole. In most cases, you won’t even be able to tell the difference. That said, lossy compression is permanent. So, if you have a large file and compress it down to a lighter JPG for the purposes of faster load time, you won’t be able to then reverse the file and “get the quality back” down the road. 

In general, JPGs

• are smaller file sizes
• have faster web loading time
• may not be as clear
• do not support transparency  
• enable different levels of compression 

JPGs are great for:

• Large-sized rectangle masthead and hero images
• Web pages with lots of images (image galleries and albums, e-commerce catalogs, etc) 

PNG

The PNG file type holds more data than a JPG. Unlike JPGs, PNG compression is lossless. Simply put, you can reduce the size of the image while maintaining the quality. If you are a photography website, for example, even the smallest downgrade in quality can make a difference for your audience. For a website like yours, you may prefer crisp PNGs, even if it means sacrificing some loading time. 

In general, PNGs

• support transparency 
• are larger file sizes (they “weigh more”)
• have slower loading time
• are clearer and higher quality 

PNGs are great for:

• transparent images
• logo files
• icons
• illustrations
• complex, smaller size images
• images with text as part of the graphic

​

Other Image File Format Options

It wouldn’t be fair to end the age-old debate of PNG vs JPG if we didn’t mention 2 other file types. THE GIF and SVG are also popular image file types for websites. 

SVG - Unlike JPGs and PNGs, the SVG file type is vector, meaning you can increase and decrease the size of the image indefinitely and never get a blurry outcome. How? It’s actually pretty simple. Unlike raster images, vector images are not made up of solid color pixels. Instead, the file is made up of lines, points, and curves. So, when you zoom in and out of the file (or increase/decrease the size), the lines points and curves follow a mathematical equation.  

GIF - GIF files use the 265 colors from RGB, but like their PNG counterpart, they are lossless. With that color limitation, you would avoid the GIF format if you were saving a photo, any illustration with a gradient, or any other colorful image. GIFs are commonly used for website buttons and occasionally icons. And, as you probably know, GIFs also support animation. 

Image Compression & Optimization Tools

No matter what format you use, it's important to find the right balance between size and clarity. Here are some of our favorite compression tools for your images:

1. Tiny PNG: https://tinypng.com/
2. JPEG Optimizer: http://jpeg-optimizer.com/
3. Optimizilla: https://imagecompressor.com/
4. Resize Photos: http://www.resize-photos.com/

Quick FAQs

What is the best image format for a website?

That depends on what you are looking for. If you want a fast loading compressed image, choose a JPG format. If you are looking for a high quality, clear image, choose a PNG.

What kind of file type should I use for my website logo?

PNGs support transparency, and it is the best option for website logos that need to appear on various color backgrounds. 

Is a PNG or JPG better?

JPGs are better for a quick loading website. PNGs are better for clearer images.

Is PNG or JPG better quality?

PNGs are higher quality.