Search engines rank images and rich text on all websites. If you optimise your images for each page, you can drive traffic to your online business. For example, people search for pictures using search engines. If you click on the image results, this will push the click directly to the website from where the image is located (your website).
You can also optimise images for a website, where we have some top tips to get you ahead of the game.
Size Of Image
Make sure the image you upload to the website is not of massive size (2000px) in width for a web page, especially if it’s on a web page. For example, you might need to upload background images or slider images saved at this size, but for everyday images, try to keep the constraints between 1200px in width and 800px in height (or for blog pages 800px by 600px). If you start using massive images for your website, it can slow down the site load time.
Quality Of Image
If you are saving images for your website using an image editor, always try and save them in the quality range of 60-70% (Photoshop uses a ‘save to web’ function where you adjust the quality of the image). The image’s quality affects the photo’s data size and can slow down page load times, especially if the file is saved too large. Overall, depending on the viewer’s connection speed, a high-quality image may take longer to load and result in a poor user experience.
Image Alt Tag
Using the alt tag is a good idea. It adds search value to the page for search engines. Always try and say what the image is in the alt tag. The alt attribute’s purpose is to describe an image file’s contents. One of the most cited uses of alt attributes is to provide text for visitors who can’t see images in their browsers. The image alt tag is perfect for visitors using browsers that cannot display pictures or have ‘image display’ disabled, visually impaired visitors, and for those who use screen readers. Most website editors will ask you for the alt tag once your image is uploaded to the content management system.
The title tag is commonly used to make the image a link. Furthermore, If you hover over the image with the mouse, a title will pop up, giving the viewer more Information. Try optimising your title tag to fit in with the content of the page information. The title tag should be relevant, short, catchy, and concise. Finally, If you hover your cursor over the image below to see the title tag pops up.
The Image Name
Save the image to describe what the picture is. Example:
- landscape.jpg (a picture of a landscape)
- milkbottle.png (a picture of a milk bottle)
- chicken.gif (a picture of a chicken).
It’s a good idea to understand when and how to use different formats for your image. Understanding image formats will also help with optimisation. Here are some tips to get you started:
- Use a JPG when using highly detailed images. You can afford to lose some quality as the human eye won’t pick up on it
- Use a PNG if you need to save a transparent image. If you want the background colour of the webpage to show through. A PNG is also suitable for keeping text on a picture of high readable quality
- A GIF is best used for flat graphics and high-colour objects
- Avoid using TIFFS on a website page. These images are high in data and will cause prolonged page load times and possible errors
- Image galleries on web pages can also be a visual and searchable tool. Make sure to add the titles and alt tags.
Image descriptions also come in very handy. Some website editors have this built-in, so you don’t forget to type some relevant text into the image description field. Furthermore, the image description gives the reader a better idea of what the image refers to.
Would you like some help optimasing your online website? Why not get in touch today and say hello! We offer a range of website maintenance packages.