Almost anyone can take a good photo today. Since we have already a good camera included in our smartphones, we just need good light and the amazing image scene.
But when it comes to our website a good photo is not just about the subject. Of course the subject is a key element. But before anyone can find our photo via a search engine, the search engine needs to find our photo. While search engines are smart and can read, they don’t have eyes to see. Hence, we need to help the search engine to find, understand and enjoy our photo.
Therefore, we need to optimize the image for its use on our website. Here comes a simple 3 step approach that will increase the user experience when searching, finding and seeing our photo.
My 3 step approach:
- First of all, we should use the right file name. IMG20095 does not tell anything about the image. If the image shows a forest, probably it is good to call the file “forest”. Now, the search engine understands the image content by its name. One should be as specific as possible to make it easy for our customers to find the beautiful forest. Therefore, if it shows a special situation, add this to the file name: “forest in autumn”.
- In addition, let us reduce the file size. A screen is not the same as a printed brochure, it has a limitation in the details it could show. As of today, 72 Pixels per Inch (ppi) is perfect. This might probably change in the future, but we are still far away from 300 ppi as it is needed for printouts. Furthermore, the browser needs to download each image we show on our website from the server. Maybe the biggest impact on our customers’ experience is the loading time of our website. Therefore, a picture should have the right size so we minimize the loading time. If we want to show a picture in a width and height of 300 pixels, we should reduce the image size to get rid of unnecessary details and data. This has no impact on the visual quality, but a great impact on the file size and consequently on the download speed.
- Finally, the Alternative Text (Alt Text). The alternative text helps us to secure that the visitors to our site will understand its content, even in the unlikely event of not loading the images. For example, my website shows the message “we market your business from a different angle”. And the Alt Text of my (not-possible-to-see) photo shows “photo of forest in autumn, low angle shot”. Then the visitors will understand that the intention of the image is to reinforce my message. Nothing is worst than looking at a page with broken images and not understanding it because of parts that you can’t see. In addition, screen readers use the Alt Text to interpret our website and help visual impaired users. Therefore, the Alt Text should be as descriptive as our file name.
These are 3 key steps to maximize the photo experience for our website visitors.
In case you have any question or need help, please contact us.