17 Oct / 2015
How to Use Images in Your Website for Better Results
Images are an important part of the website. They help users connect to the context of the website. Images deliver a powerful message and play an important part in brand building. Image selection is a part of the website design process. Hence, image optimization forms an important consideration for a better website. The very first consideration is to find out if an image is absolutely necessary or not. Avoiding the use of an image can free a large number of bytes used on the page. However, an appropriate image can communicate your business message better than words.
Key Considerations for Using an Image
- Use the Appropriate Image: Indiscriminate or unnecessary use of images in a webpage may overshadow the main focus of the page. It is preferable to use paid images for uniqueness of the website design. Freebies will only make the site look like other website representing the same business. Graphical Data is retained more by the human memory compared to the textual data. The images should only be used to get a message across to the customers. In case it is used for decorative purposes then it should resemble the context of the website.
- Position: Images should be placed close to the related text. The text beside the image will be perceived better by the viewers of the page. Improper positioning of images will make the website confusing.
- Size, Dimension and Resolution: Size and Dimension should not be confused with one another. Size refers to the file size while dimension refers to the height and width of the image. Smaller files load faster. If the image is saved at a higher resolution and is forcibly resized to fit a small space it will result in increased load times. Most computer monitors do not display images more than 72dpi. Image resolution greater than that makes the file unnecessarily larger. Great image compression tools can be found online. They help to create smaller versions of the images to fit into the required space. In case it is required to show the high definition image to the user, this can be achieved by using pop ups.
- Naming the Image: Search Engines not only crawl the text content on the webpage. They also search for keywords in the image files. Hence, using a plain descriptive text for naming images will increase its possibility to appear in the Google’s Image search listing page. Image named as Coffee-table.jpg is better than 1.jpg. A look into ones website analytic will give an idea of the phrases used to perform searches.
- Alt Text and Title: Alt Texts are alternatives to the images when they cannot be displayed by the browser. Appropriate use of alt tags for images add SEO value to that webpage. In fact, usage of alt tags is the best way for images to show up in the Google Image Search page. However there are some rules to be followed while specifying the alt tag. Unnecessary words should not be stuffed into the alt texts. Alt tags may be ignored for decorative images. Over optimization of a page can be penalized by the Search Engines.
- Handling Thumbnails: The thumbnail image sizes must be made as small as possible. The alt tag for the thumbnail images must be different than that used for its corresponding larger image. This is recommended so as to avoid listing of the thumbnail versions in Google image search results.
- Featuring same product image through multiple angles: For E-Commerce websites, it is common to show the same product through multiple angles. The best way to leverage this opportunity is to fill out all the alt tags uniquely. This will make the potential searchers land into your website without you being penalized by the Search Engines.
- Image Type to be Used: Three kinds of image files can be used in a webpage. They can be jpeg, gif or png. Jpeg files can be considerably compressed to lower sizes without losing the display quality. Gif files are even lower quality used for mini icons. Pngs are now used as alternatives to gif file types. Make sure that text is not embedded into images unless absolutely necessary. Embedded image texts cannot be copied, are not searchable and represent poor quality designing.
Image optimization can be directed towards achieving two goals – for better Search Engine Optimization of the Website and for better design aesthetics. Images account for the most amount of downloaded bytes. Optimizing images saves byte downloads and improves the performance of your website. The optimal setting of an image depends on a careful analysis across multiple dimensions such as format, quality, content, dimensions and purpose.