START YOUR PROJECT TODAY! CALL: 0141 374 2374

Home > The SEO Web Design Blog > What’s the Best Type of Image for the Web – PNG, JPG or GIF…?

When it comes to file types of images for the web, there’s no doubt it can be confusing!

Images on the web aesthetically may look the same, however the file types used on the web vary greatly in how large an image is in terms of file size and the abilities an image has such as transparency or animation also depend on the type of file the image is.

Why have so many file types for images on the web?

Think of it this way,

You store images on your PC’s hard drive, which takes up space, when your hard drive gets full you upgrade to a larger hard drive.

When you’re working with files online, large files don’t just take up a tonne of space on the web they also consume a lot of bandwidth and download time.

Think when you visit a website and their page is slow and sluggish to load and the images seem to load line by line. This can be caused by the images being in the wrong file format, adding huge page load times due to the file size of the images being as large.

So what’s the answer…. Reduce the image and compress it?

The risk with simply just compressing the image and keeping it in its original format is you risk losing image quality, the image becomes pixelated or perhaps even blurred.

To get round this issue of reducing file size whilst still maintaining image quality, you need to use alternative file formats that allow the image to be reduced in file size, without any reduction in quality.

Commonly Used Image File Formats

The most commonly used image formats for web images are JPG, PNG and GIF.

The main reason these file formats are used so often for the web is smaller files sizes are a lot easier to transmit, compressing image data and are far more web-friendly than some of the other file formats.

JPG = Joint Photographic Experts Group

JPG image format is a loosy file format commonly used for images shared via email and online. JPG images are full colour images with at least 24 bits memory dedicated to each pixel, meaning images can incorporate 16.8 million colours!

The plus side to choosing JPG images is you have a huge colour selection to choose from, 24 bit colour with up to 16 million colours. JPG’s are an ideal choice for photos and a good choice generally for saving images in a smaller file size.

The downside to JPG’s is they don’t support transparency nor can they be animated. JPG’s after compression also create artefacts and are usually not a good choice for text images or images with sharp edges.

PNG = Portable Network Graphics

PNG is also a loosy file type that’s also an efficient choice when it comes to saving images for the web that are intended for sharing, emailing, adding to blogs or website content. The PNG file type is an alternative file type to GIF.

Pros of using PNG images is their file size is small and they provide great transparency, perfect for logos and text images.

The downside to PNG images is their not the greatest file format for large images and not supported by earlier browsers or versions or Lotus Notes.

PNG file format was developed in the 1990’s as a free alternative to the GIF format following a patent dispute.

GIF = Graphics Interchange Format

The GIF file format has been in use since the 1980’s and supported by all browsers. GIF images are also an efficient image type suitable for all web based images on blog posts, website content, email sharing and social media.

The plus side to using the GIF file format is it also supports transparency, GIF images can be animated and are an ideal choice for drawings and clip art.

The downside to GIF images is they only support 265 colours and therefor are not a good choice for photos, logos or anything with a lot of detail. GIF file formats are best kept for text images or basic web images that don’t have a lot of colour or detail.

Other Image File Formats

There’s also less common image types you might come across from time to time, these include;

BMP = Bit Map Image File

BMP is an image format used within Microsoft Windows for graphics elements, not at all an image format to be used for saving images or for images intended for the web due to the un-compressed very large file size.

TIF or TIFF = Tagged Image File Format

This type of image format is quite adaptable, it can be loosy or lossless. Used mainly within the printing sectors and storage of high quality photographs.

Due to the large size and complexity of this file type, its not recommended to use for web images, graphics, email or storage within a PC. Many PC’s and programmes may also not be able to open or access this type of file.

RAW = Raw Image Format

RAW image types kind of like a digital negative photograph, RAW image types are images taken from a cameras sensor before they have been processed and saved into a JPG.

RAW images are used to store as much detail of an image as possible before selecting the desired JPG size and resolution. RAW images are also very large and should not be used for anything on the web.

 

Which File Format is Best?

With all that covered and detailed as simply and as much as I can without getting too techy…

Let’s take a look at which file format is best for the various types of images we use regularly on the web, share via email, upload to social media or indeed use within our own website content or blog posts.

 

Know Your File Types: When to Use JPEG, GIF, & PNG - Via Who Is Hosting This: The Blog

Source: WhoIsHostingThis.com

 

In Summary

Saving images intended for the web in the correct image format makes sure your web pages, content or social shares don’t bog down your recipient and cause more frustration that elation when it comes to viewing, sharing, reading and accessing your content.

If you’re wishing your websites images took less time to load or unsure if this could be the reason your site suffers long page load times. Contact ServeOnly for a free website audit and web image checkup!

 

 

Lizzie Thomson
Creating, developing and imagining is the place I love the most! Great websites take more than just great design. A great website, deserves great digital marketing! Web Design and Internet Marketing both parallels that drive the addiction I have for the fascinating world of the web! Digitally crafting concepts into completion and making websites be the best they can be in both performance and design, is my daily drive and commitment!

Add comment

DEVELOPED & POWERED BY SERVEONLY.COM