optimize images for page speed

All posts tagged optimize images for page speed

Top 10 Tips to Optimize Images in Your Website

by Carol Lobo on

2e1ax_simplistic_entry_bigstock-Picture-globe-17944166Image optimization in the website is quite necessary process that is inevitable for many reasons. The complex requirements of computer, technology and internet world demand the images to be optimized in such a way to acquire three attributes that are:

High Quality
Less loading time
Original Colors

The problem that is faced is when we try to increase the quality of the image it takes more time to load. The longer loading time is very annoying to the users. When we try to minimize the loading time the quality gets low, even the image loses its original colors sometimes.

Here we are discussing some useful tips for the web designers by which they can optimize website images in their web design. By using these tips the web designer can optimize images of your website without losing the quality of the image, the original colors and with minimum loading time.

1. Saving original image files

This is very important for a web designer to save the original image files in a separate folder. This folder should be separate with no scope of losing data.

2. File format to save original image files

You may save the files in .raw, .psd, .tiff, or .png, file formats. The client may demand at any time to alter the word or any graphic shade on any of the layer.

3. JPEG File format for full color photographs

JPEG (Joint photographic expert group) file format allows you to save images with millions of colors also accompanying such graphics having variety of gradients and shades.

4. Reducing JPEG File size

Here the issue is that .jpg images are normally larger and take long time to load. To counter it there are editing tools available that facilitate you to compress files for .jpg. For instance there is an option to choose between the Maximum, Very High, High, Medium, and Satisfactory. This provides you the ultimate control over the file size. You may test the images with different settings and balance the quality, loading time and compression. Finally select the one that suits you the best.

5. GIF format for Charts, icons, buttons

The Graphics interchange format is basically a bitmap image format. Unlike JPEG, in GIF the number of colors is limited. The maximum number of colors is 256 in GIF and data for every pixel is stored. GIF is best suitable for website images like charts, icons, graphics, bullet points, textual details, logos etc.

6. PNG format

PNG (Portable network graphic) format is also a bitmap image format created mainly to resolve the limitation of 256 colors limit faced in GIF format. This file format is also used in buttons and icons with small pixel dimension. A typical 48*48 button size ranges between 3 kb to 7kb.

7. Properly using HTML IMG-tag

Never forget to add height, width, Alt-attribute, title attribute to the IMG-tag. When the image cannot be displayed the alt-text is used. The search engine also uses it while searching the required image. Therefore use accurate keywords in alt-text to best describe image. Al-text is also the “anchor text” when the image is linked.

8. Height and width helps in faster loading

When height and width of an image are defined the browser can continue to load rest of the page while filling the space defined with height and width of the actual image. This is necessary for website images.

9. Do not use ambiguous/non-representative website image names

Always use descriptive website image file names that describe what is in the image. For example “Black Mercedes” is appropriate instead of writing “IMG00002541”. This is very crucial for SEO as well.

10. Scaling image via HTML loses originality

Changing the height and width size of website images is very bad for website performance. The originality of the image is lost and the image quality as well. Using tools like Shrink O’Matic helps in creating optimized preview images fast.

read more
Carol LoboTop 10 Tips to Optimize Images in Your Website