We are working on a website and noticed that the GIF images(100kb - 200kb) are loading very slowly.
The site is a static site with CSS/HTML.
Does any one have any pointers to why the images might be loading slowly?
Would using JPGs improve the performance?
Here is the HTML code for that image:
<div><img src="images/mainImg_3.gif">
Are your images properly sized? If you displaying them on your webpage as 300x300 pixels make sure the original image is the same size.
This helps two-fold, one its less data to download, and 2 it doesn't require extra processing power for the browser to resize. Additionally, the image will look crisper if its the exact size.
As far as the difference between GIF and JPG, (with the exception of transparency, which JPG doesn't support), it boils down to what your image contains. GIF uses a color table and a map to that color table to store the image, while JPG uses a compression algorith. So, if you image contains few color variation you will get a smaller filesize from a GIF. Conversly, if you have a photograph with lots of color variation you'll want to use a JPG.
They're loading slow because they're huge. 200KB is a very big image file. I don't know exactly what the going recommendation is for web images, but it's a very good idea to keep them under 50K.
GIF images are not very efficient for photographic images. You should experiment with other formats like JPG and PNG to see if you can get the same quality with smaller file size. You should be able to shrink the file size quite a bit while retaining the quality.
Another trick: use thumbnails. Save two version of each image, one 25% the size (by resolution) of the other. Your site visitors can click the thumbnail if they want to see more. This will speed loading times and reduce your bandwidth bill.
It depends on how large the image is, if you're displaying wallpaper-sized images at 100kb, that's not too bad. If you're displaying thumbnails of this size, then you have a problem.
JPEG images are lossy but can be compressed with ease. Depending on how much compression you select, you can really decrease image sizes with JPEG.
Read the following article entitled Best Practices for Speeding Up Your Web Site:
Also take a look at YSlow
It will analyze your site for you and tell you where the bottlenecks might be.
Enable caching for image files (the example below also adds css and js caching) which will ensure users don't download files twice. If you are using apache 1.3 or 2:
ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
It is probably a reasonable idea to enable gzip compression for html and css. In apache 2:
SetOutputFilter DEFLATE
and in apache 1.3:
mod_gzip_on Yes
The fastest loaded resource is always the resource that doesn't need to be loaded at all. I.e. apart from shrinking your images to reasonable sizes you should read about HTTP caching.
You should instruct your web server to deliver the responses with proper caching informations so that user agents may reuse local cached versions.
Mark Nottingham wrote a tutorial about HTTP caching. It's a good starting point. And this is a tutorial about apache configuration on HTTP chaching.
You should specify the height and width attributes for the img tag, see below for the W3C Schools explanation of why you should do this. And for further info see http://www.codinghorror.com/blog/archives/000807.html for further more radical techniques.
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
Tip: Do not rescale images with the height and width attributes! Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). The correct method is to rescale the image with a program, before using it on a page.
This is copied from http://www.w3schools.com/tags/att_img_height.asp
Look into the free tool: Smush It!
It's co-developed by Stoyan Stephanov, Nicole Sullivan (of Yahoo!) and incorporates every tidbit for images from YSlow (from Yahoo!) and the Yahoo Developer Network findings.
It will analyze your image(s) and determine from a set of server side tools what the optimal image type is (e.g. PNG8, PNG24, GIF, JPG, etc.) and also create the optimized image... e.g. even if you feed it a PNG image, it will find the best method to compress it, and "Smush It" to its smallest possible file size.
Then take the output image, and then serve it up from a (cookie-less domain) if you can, preferably on a CDN, with far-future expires headers, with gzip compression.