Web images are a very big part of the internet these days. It’s a form of visual communication that’s really important for a wide range of websites, especially entertainment sites, blogs, and of course, E-Commerce stores. Optimising your images for the web is not only important for the user that views it and interacts with it, but for the search engine as well. You need to create that “invisible link” between the images uploaded on your website, and all the major search engines so they can better understand where you’re coming from. So, without further ado, here are some tips and tricks for all of you out there that wish to enhance your visual web content.
Featured Image Choice
Before we get into any technical tips, we thought of sharing some basic ideas behind uploading images on your web page. The choice of your main ‘featured image’ is a very important factor in our image optimisation process as it can determine if the user clicks on your article/web page from a social media platform like Facebook for instance. We recommend you to try and pick a relevant, yet ‘pleasing’ image for your web page so that users are visually attracted to your content. If you have social media in mind from the get-go, we would also recommend you to read more about featured image size for all major social media platforms, so you don’t get your image cut in an unpleasant way like this on platforms like Facebook and Twitter: *see the red outlines.
Now that you have the image on your page, it’s also important to think about compression. We’ve seen countless sites with low-speed loading times because of poor image optimisation. Image compression can make a very big difference in the search engine result page. Having a low-speed loading time on your web page can push you down the SERP as google penalises websites that load slowly. What you need to do is compress your images before uplading them. There are a number of ways you could do this, via a compression plugin, or simply doing it yourself manually in photoshop. Here’s an example of an image rendered with different levels of compression:
First, here’s the image with high-quality settings on. Quality – 12, 590.6K
Second, here’s the same image but with lower-quality settings. Quality – 3, 103.3K
As you can see from the results, there are next to 0 differences between the two images. But if you save both of them on your hard drive, you will notice that there is a 600% size reduction. That difference will have a major impact on your web page speed, which will result in more traffic.
Image Title and ALT text
We’ve got out of the way the importance of image selection and image compression, it’s now time to move on to our last segment, image title and ALT text. Google and other search engines are looking for ways to identify what does your image mean so it can display relevant image results to its users. For example, if we upload an image with a butterfly on a blog post with the title: DSC_0002432asdg_sdge_123.jpeg Google will not show its users your photo if they keywords do not contain these letters and numbers. If you want your image to rank for what it stands for, a better, more suited name for it would be: Butterfly_flying_over_rocks.jpeg Now you have a chance of ranking in the image section of Google’s search engine. The ‘HTML <img> alt Attribute’, or simply the ALT, is another way to tell the search engines what does your image mean. Think of it as an anchor text for images. In our case, a good ALT text would be: “Colourful Butterfly and Rocks“. Notice how I varied the text so it’s not identical to the image title, this way we can have multiple keywords in a single image which will increase the chances of ranking for these two keywords. Adding the ALT attribute can be done automatically (most CMS’ have the ALT text box when adding an image), or you can do it manually like this:
<img src=”Butterfly_flying_over_rocks.jpeg” alt=”Colourful Butterfly and Rocks“>
Textmimedia is experienced in design and image optimisation for a wide variety of websites including, E-Commerce websites, blogs, corporate websites, and much more. If you’re looking for Web Optimisation Solutions, don’t hesitate to contact us right away!