START YOUR PROJECT TODAY! CALL: 0141 374 2374
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.
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.
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.
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.
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!
ServeOnly - Design and Search |
The Web Design & SEO Company
A: Park Lane House, Broad Street Business Complex, Glasgow, G40 2QW | 1330 Avenue of The Americas, New York, USA
DEVELOPED & POWERED BY SERVEONLY.COM