We are a team of passionate designer and developer that build impactful and visually stunning websites
If attracting your target audience’s attention and keeping them engaged has become a struggle for you, chances are that you do not use enough images in your blog posts or articles. Images are not only important in the initial stages of web design, but they can also make your articles more appealing and greatly enhance your website’s visibility by making it more SEO-friendly.
These are the basic steps you need to follow to improve your web design, achieve better image SEO and bring your website back to life:
Stock photos are great but to achieve a more authentic and memorable web design, you should try to use original images taken by yourself. Websites such as Flickr.com or Unsplash can also be great alternatives to stock photos.
Treat your image file name as a key phrase that tells Google about everything there is in the image and your image captions (the text displayed below your image) as the most important piece of text for the reader. For example, instead of naming the image abc_1.jpg, name it london-eye-sunset.jpg.
To make page loading faster, resize the image dimensions to their intended display size. As for the image file size, Websites such as Kraken.io or jpeg.io can help you resize images without compromising their quality.
The srcset attribute lets you display different images according to the screen width which is especially effective in case of mobile devices.
The alt text is crucial as it provides information if the image cannot be seen by the reader for some reasons, while the title text is usually either not shown to the reader where intended or is not shown at all unless you move the mouse cursor on it.
If you incorporate structured data into your web design, your images may be displayed as rich results by search engines and your article may get more exposure. In the case of Google, some guidelines need to be followed.
To generate more interaction, you should make sure that the image is included in the case of social sharing (on Facebook, Pinterest etc.). To ensure that, you can add the image tag as displayed below to the <head> section of your page HTML:
<meta property=”og:image” content=”http://example.com/link-to-image.jpg” />
Make sure to follow those steps to achieve better web design efficiency and image SEO.