I’ve noted many people not familiar (did you know you can contact me if you have specific questions? – go on, don’t be shy) about which file format to use when it comes to generating images for your website.
There are actually many different types of image formats, but the three most common and relevant ones are: JPEG, PNG & GIF.
Here is a brief overview of what file type you should use, and when you should use it:
JPEG (.JPG)
Use for Photos – especially images with low colour range and contrast. You will notice a big difference in the file size of a JPEG in colour, compared to one that is in black and white.
Do not use for photos with a very high dynamic range or contrast as the file size will be very big.
Do not use for simple website images as the file size will be bigger.
GIF
Use for some animated images.
Use for small and simple graphics such as logos, lines and web site “assets” (borders, shadows etc.).
Do not use for Photos if at all possible as the range of colour and file size is prohibitive.
PNG
Use for Photos – especially images with high contrast and colour ranges.
Use for images that need a transparency of some kind.
Do not use for photos with lower contrast or colour depth as the file size becomes larger.
PNG is the newest type of graphic format out of the three and was originally designed as a replacement for GIF. Unfortunately, some of the browsers took their time to gain support for PNG and, even though nearly all browsers now support the format, it still remains a bit of a mystery to some people.
As mentioned previously, Google is now using website performance as a metric in its search rankings for websites. This is an extremely important issue for websites as so many of us (and I include myself in that statement), put images that are way too big onto our websites.
Even in these days of ever increasing broadband use, you really should watch the file size of the images that you are placing on your website.
My broad rules to optimize the performance of a website are:
Never load more than five or six images on the home page. This includes carousels and gallery images.
Keep your image sizes to a maximum of 970 pixels wide. This will enable full size images to be viewed comfortably on most peoples screen resolution and at the same time keep the image size low.
Keep images to a maximum of 200K in size.
If you are loading lots of images – use a gallery system and thumbnails to enable the page to load faster and the user to select the images to view.
Use a tool such as YSlow to identify bottle necks in your site and get your web developers to take a look.
So, a breif overview of image formats and types. A simple rule of thumb is to open your website on another persons computer (or your iPhone etc), and see how long it takes for the homepage to load. In my experience, people will wait no more than 8 seconds or so before closing the site down.
There are actually many different types of image formats, but the three most common and relevant ones are: JPEG, PNG & GIF.
Here is a brief overview of what file type you should use, and when you should use it:
JPEG (.JPG)
Use for Photos – especially images with low colour range and contrast. You will notice a big difference in the file size of a JPEG in colour, compared to one that is in black and white.
Do not use for photos with a very high dynamic range or contrast as the file size will be very big.
Do not use for simple website images as the file size will be bigger.
GIF
Use for some animated images.
Use for small and simple graphics such as logos, lines and web site “assets” (borders, shadows etc.).
Do not use for Photos if at all possible as the range of colour and file size is prohibitive.
PNG
Use for Photos – especially images with high contrast and colour ranges.
Use for images that need a transparency of some kind.
Do not use for photos with lower contrast or colour depth as the file size becomes larger.
PNG is the newest type of graphic format out of the three and was originally designed as a replacement for GIF. Unfortunately, some of the browsers took their time to gain support for PNG and, even though nearly all browsers now support the format, it still remains a bit of a mystery to some people.
As mentioned previously, Google is now using website performance as a metric in its search rankings for websites. This is an extremely important issue for websites as so many of us (and I include myself in that statement), put images that are way too big onto our websites.
Even in these days of ever increasing broadband use, you really should watch the file size of the images that you are placing on your website.
My broad rules to optimize the performance of a website are:
Never load more than five or six images on the home page. This includes carousels and gallery images.
Keep your image sizes to a maximum of 970 pixels wide. This will enable full size images to be viewed comfortably on most peoples screen resolution and at the same time keep the image size low.
Keep images to a maximum of 200K in size.
If you are loading lots of images – use a gallery system and thumbnails to enable the page to load faster and the user to select the images to view.
Use a tool such as YSlow to identify bottle necks in your site and get your web developers to take a look.
So, a breif overview of image formats and types. A simple rule of thumb is to open your website on another persons computer (or your iPhone etc), and see how long it takes for the homepage to load. In my experience, people will wait no more than 8 seconds or so before closing the site down.
Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.
ReplyDeleteWeb Designing Company Islamabad