Every website admin should pay attention to optimize images for web because it reduces the time browsers take to download an image and that results in browsers rendering the page quickly while not compromising the user experience.
Moreover, it will help search engines to find and rank these images higher.
In this article, we will elaborate on followings tips to optimize images for web:
- Select an Appropriate Image
- Select Suitable File Format
- Resize and Compress the Image
- Use SEO-friendly Image File Name
- Alt Text should be SEO-friendly
- Describe Image in Caption
- Publish Image Sitemap
Tips to Optimize Images for Web
Select an Appropriate Image
You should select an image that represents the essence of the article you are writing. Such an image will arouse people’s interest to read the article. You can either create such image or find one at the famous photo websites, such as Flickr.com, StockSnap.io, Unsplash.com, Pexels.com, etc.
For the sake of an example, consider the below image:
This image represents moving from an insecure HTTP state to the secure https. Thus, it fully justifies the article-title Migrate from HTTP to HTTPS: Raise security and search engine ranking
Select Suitable File Format
In general, two types of images are available for the web —Vector images and raster images.
Vector graphics use geometrical shapes like points, lines, and polygons to create an image. These images are independent of resolution and zoom. It means quality of a vector image will remain intact even if you change the resolution and zoom parameters.
Vector formats are used where geometric shapes are required, like, in logos and icons. The main file types of a vector image are AI, EPS, and SVG.
Raster images are formed by encoding each pixel within a rectangular grid. Whenever complex scenes (like a photo) are to be captured, raster format is used. The popular file types of raster images are JPEG, PNG, and GIF.
The quality of a raster image depends upon the resolution and zoom parameters. If you scale up a raster image, you will see a blurry graphics.
Resize and Compress the Image
Now, it is time to resize and compress the selected image. This activity is essential to minimize file size of the image.
Think of the optimum image size required and then resize it using any of the offline or online photo editing tools. For a large image, 736×386 pixels size can suffice your requirement.
Examples of some free online image editors are online-image-editor.com, freeonlinephotoeditor.com, ipiccy.com, etc.
Once you have reduced your image size, now proceed to compress it. Although, there are plugins for WordPress websites, to compress images. But I prefer not to use any such plugin; instead, use a free online image compressor, like ShortPixel.com.
You can find similar tools at compressor.io/compress, compressjpeg.com, compressnow.com.
This image’s original dimension was 640×371, and file size was 75.7 KB. After resizing to 400×232 dimension and compressing the image, file size has reduced to 20 KB. In all, 55.7 KB has been saved without losing noticeable quality.
Use SEO-friendly Image File Name
Do not use default name of an image created or downloaded from a website. To make it search engine friendly use keywords in the name. For example, if the keyword for your article is http to https then, you can name the image as http-to-https.jpg assuming your image file format is JPEG.
Alt Text should be SEO-friendly
For some reasons, if an image is not rendered on a device, the user can still see the alt text which describes the image. Moreover, search engines cannot read the image, but with the help of alt text, they can understand the image and rank accordingly. Therefore, alt text is an essential aspect of on-page-SEO strategy.
If possible, you should include keyword in the description of alt text. For example, if the keyword is http to https the alt text can be Guide to migrate your website from http to https.
Describe Image in Caption
Many readers look at the images and captions before they decide reading the article. Therefore, description in the image caption is also an important point.
While captioning images, remember the following points:
– The information described in the caption must be accurate. Leave the information if you are not sure of its accuracy.
– Describing the photo will not serve any purpose. Therefore, mention something which is not obvious from the image. For example, if you have a photo of your friends in a get-together, then you should not describe it as my friends. Instead, mention place, date and occasion or the event taking place.
– You can avoid certain words like a, an, or the at the start of the caption as these are not necessary.
Publish Image Sitemap
The standard sitemap that you submit to Google is created by an SEO plugin (for example, Yoast SEO plugin). It also contains information about images under post sitemap. If you do not want to submit an image sitemap, you can add suitable details to images under post sitemap.
To create an image sitemap, you can refer the following example for a web page http://example.com/sample.html, which contains few images:
For detailed information on image sitemaps, you can visit Sitemap extension page on Google.
Wrapping it all
If you consider the SEO and user-experience benefits, then it is worth applying the above mentioned tips to optimize images for web.