Web design trends have changed over the years and one big design trend is the use of images, they not only help websites look good they also help aid user experience. It has been proven that images can help drive emotion and guide your users to click on elements of your website to help create conversions.
When using images on your website there are some key preparation steps before uploading your images:
Choosing the correct file type
There are 3 file types available for saving images:
- JPEG – stands for Joint Photographic Experts Group and is classed as a lossy compression technique for colour.
- PNG – stands for Portable Network Graphics and is a lossless data compression graphic file.
- GIF – stands for Graphic Interchange Format this is commonly used for animated graphics and is also used for images.
Each image format can be used for different situations, but choosing the correct file type is vital to how well the image will display online. When saving your images here are some tips for each file type:
- Most situations JPEGs will be the best use as this provides the best quality of image at the smallest file size, especially for large images.
- For simple graphics PNGS are a better alternative to JPEGs as they can save the file in a smaller format as they use less colours, this can be ideal for logos or icons.
- GIFs are great for thumbnails and decorative images; they are not good for large image formats.
Image editing software will save image files into these formats or you can use a converter to convert between each file format.
Using descriptive Alternative tags (Alt Tags)
Alternative tags are text which are displayed when the image doesn’t appear on the webpage, this has three main benefits.
- Accessibility – if a visitor to your website is has a visual impairment they may need a screen reader; screen readers rely on alternative tags to help describe what an image is to the user. This is a requirement of the WCAG Guidelines.
- User experience – If an image does not render on a page for any reasons the text will be displayed in place allowing the user to see what the image is about.
- SEO – Search engines crawl over alternative tags, so complete them with keyword rich text, don’t stuff with keywords keep them natural, so if the product is an iPhone 6 then the alternative text could be iPhone 6 White 32GB.
Use appropriate file names
When you upload your image to a website the file name is turned into the URL for where the image can be found. This means that search engines can also crawl these images and add them to search results. It is vital to rename these files with descriptive and rich keywords. So before uploading your images don’t just use the file name from the camera or from the stock website the image was downloaded.
An example of this could be an ecommerce website that sells electronic products. They sell Samsung Televisions and have product images of each television. Instead of uploading a picture like DSC101.jpg it could be Samsung-ultra-hd-tv-ue50ju6800.jpg. This provides the branded name, the product ID and some important product details. This will help search engines crawl your images better and make your website more user friendly.
Reduce the size of the image file
When a visitor arrives at your website they expect the website to load within 3 seconds, and large image files that have not been compressed can affect the load time of your website. If you are using high quality images on your website, the image files can be anything from 1MB to 5MB. which can increase load time to over 15 seconds.
Image optimisation is vital to help aid in decreasing the load time of a website, decreasing the file size to below 400KB for large images and below 100kb for small images will help in website speed.
There are tools available which can help decrease file size, within Adobe Photoshop there is a save for web mode and online there is Tiny JPG and Tiny PNG available which can decrease file size.
If you have a WordPress website then you can use Imagify or WP Smush to help decrease file size when uploading to the media library.
Choosing the correct image dimensions
To help with decreasing file sizes as part of compression resizing images to the dimensions required for your website will help cut the file size further.
Applying this technique also helps with speed optimisation, if you use two images which are the same but are needed at different sizes this means the browser has to download 2 images which means an increase in load time, serving scaled images means one image set at the correct dimensions can be downloaded once at a reduced size.
Image optimisation is important
When uploading and using images on your website optimisation is just as important as content it should be taken seriously as it can help with your Search Engine Optimisation strategy, improve your usability and user experience.