Categories
Digital Marketing

Image Optimization for SEO

Image - Optimize Images for Web
Image – Image Optimization For SEO

For better rankings and user experience, Image Optimization for SEO plays an important role in boosting visibility, enhancing the visual appeal of your website, and attracting more Web Traffic. Optimized images can rank higher in Google Images search results, and enhance website accessibility.

In Image Optimization for SEO, many tools and programs are available both free and paid. Photo editing software such as GIMP (free) or Photoshop (paid) etc allows you to do your optimization. Tools such as Optimzilla (free) or kraken.io (free & paid version) etc do the optimization work for you. With Image Optimization For SEO, one has to strike a balance between quality and compression. The higher the quality, the lower the loading of images on the web because of the file size.

Introduction

Make your images load faster to show up in searches. For search engines to understand what your images are all about begin with image names and descriptions to match what people search for. Resize images to the right image size for the web. For viewing and sharing, the best resolution is 72 ppi-pixels per inch. Image Compression tools like JPEG Optimizer & TinyPNG can shrink the file size without losing quality. Understand the difference between lossy and lossless compression. Lossy compression reduces file sizes whereas with lossless compression the file is compressed without losing datasets. Use the lazy loading concept to show images when users scroll to them which Optimize Image Loading Speed. Use responsive images that adjust to different device screen sizes. Use page speed insights to monitor and improve further on your website image

File Formats

Image Optimization for SEO, for the web starts with a selection of the best file type. The different types of files which can be used are

PNG – Portable Network Graphics are higher quality images with a larger file size created for a lossless image format but can also be lossy.

GIF – Graphics Interchange Format uses 256 colors and is the best choice for animated images using lossless compression.

JPEG – Joint Photographic Experts Group(.jpg) uses both lossy and lossless optimization and the quality level can be adjusted for a good balance of file size and quality.

TIFF – Tagged Image File Format is a standard in the printing and publishing industry.

SVG (Scalable Vector Graphics) is a vector image file format drawn from mathematically stated curves and shapes, not pixels. SVGs can be animated and support transparency given any combinations of colors or gradients.

Selecting the correct file formats.

The PNG format is suited when it comes to its use on the web requiring small file sizes to store iconic graphics, text, and line drawings. PNG supports 8-bit color like GIF but also supports 24-bit color RGB, similar to what JPG does. JPG format stores photographs of a smaller size than a BMP (bitmap image file). A high pixel count delays the loading of web pages, so web images need compression using the jpeg format. JPEG files do not have transparency. The SVG is a lossless file format like GIF and PNG, and they are fairly large files when compared with other formats for the web. SVG image remains clear and crunchy at any resolution or size. BMPs are both uncompressed and lossless which are always in full quality.

Image Optimization For SEO: Compression Apps

They reduce the file size of images without losing image quality. A low compression rate will yield the highest quality but larger file size and a very high compression rate will produce a very low-quality image but smaller file size. The two types of compression are lossy and lossless. Lossy are filters that eliminate some data that degrade the image and reduce the file size to a greater extent. Lossless are filters that compress the data that do not reduce the quality but the images have to be uncompressed before they can be used.

Image Optimization for SEO: GIMP

(A) GIMP (GNU Image Manipulation Program) is an image editor and publishing tool and its functions are similar to Photoshop. GIMP can create, modify, compress, and publish images for website use.

Basic Optimization

  1. Open the image you want to optimize for the Web in GIMP.
fig1-Image Optimization For SEO: Gimp-flatten-image
fig1-Image Optimization For SEO: Gimp-flatten-image

2. Click on Image and go to Flatten Image fig1 changing the image from RGBA indexing to RGB by removing the alpha channel as it is most likely not used for Web images. RGBA stands for (R)ed (G)reen (B)lue (A)lpha.

3. Click on Image, go to Mode, and select Indexed. In the maximum number of colors choose 256 to save space

fig2- Image Optimization For SEO: Gimp-mode-index-256
fig2-Image Optimization For SEO: Gimp-mode-index-256

4. Check the Generate optimum palette box fig2 on the Indexed Color Conversion menu and click Convert.

5. Click on File and select Save As to bring up the save dialog and save as a .xcf file.

fig3-Optimize Images for Web: Export-image-as-PNG
fig3-Optimize Images for Web: Export-image-as-PNG

6. Open the .xcf file and click on select file type (by extension) to choose the format to PNG and select ‘export as’ under the file dropdown menu to get the export dialogue box as shown in the above fig3 and click on the Export tab.

fig4- Image Optimization For SEO: Original-1400x1867-2.9MB .png
fig4-Image Optimization For SEO: Original-1400×1867-2.9MB .png

7. The original PNG file is 2.9MB fig4

fig5- Image Optimization For SEO: Compressed-image--807.4 KB PNG image
fig5-Image Optimization For SEO: Compressed-image–807.4 KB PNG image

8. As required select the compression level value to get the compressed image which is 807.4KB shown in the above fig5.

fig6-Image Optimization for SEO-file type by extension

9. To save as .jpg in (fig 6) above select file type (by extension) and choose the file in JPG format.

 fig6-Image Optimization For SEO: Export-Image-as-JPEG
fig7-Image Optimization For SEO: Export-Image-as-JPEG

10. Check the “Show preview in image window” box to bring up a preview image of your JPEG and adjust the JPEG Quality slider fig7 to about 80 and the file size gets calculated (514.9 KB)

fig7- Image Optimization For SEO: JPEG-preview-advanced-options-subsampling-export
fig8-Image Optimization For SEO: JPEG-preview-advanced-options-subsampling-export

11. Click on “Advanced Options” to open the additional JPG options and select Optimize with other boxes unchecked fig8.

12. Choose 4:4:4 (best quality) in the Subsampling box and when satisfied with the image preview, click on the export tab to export this JPEG file in the SAVE location.

Other common Photo editing software are:

  • Inkscape
  • CorelDraw
  • Adobe Indesign
  • Illustrator
  • Befunky
fig8- Image Optimization For SEO: Optimizilla-online-image-optimizer
fig9- Image Optimization For SEO: Optimizilla-online-image-optimizer

Image Optimization For SEO: Optimzilla

(B) Optimzilla fig9 is an online tool for image optimizing, the interface supporting only 2 file formats viz JPEG and PNG that have the drag-and-drop option (up to 20 files) in the marked area. Select the individual file in the queue after uploading and use sliders to set optimization levels of either more quality or less compression. Compare images to find the desired optimization before downloading files either in a ZIP or a standard format.

Image File Names, Titles & Captions & Alt Text

The file name depicts the subject matter of an image to web crawlers. Use relevant keywords for your file names. Do not use generic names such as “image2853.png” instead replace it with “red-rose.png

Title tags pop up when users hover over an image with their mouse and do not necessitate the addition of a keyword in the text.

Alt text is an HTML attribute that describes the image for visually impaired screen reader users and web crawlers used by search engines to understand the images better.

< img src = “image.png” alt = “image description goes here”>

Optimize Alt text by making it descriptive but to the point. Include relevant keywords that relate to the image but avoid keyword stuffing.

< img src = "sports-store-mumbai.png" alt = "best-sports-store-in-mumbai">

When the image does not load the alt text is visible to all users thereby improving user experience. It boosts your SEO and is a ranking factor as web crawlers cannot see web images but can read alt text. The alt text needs to be unique, describe the image, contain keywords, etc.

Image Captions on the other hand are for sight users who need to provide context and may contain keywords.

Use the free ‘INK’ an AI-powered Content Optimization and Generation platform to optimize images when you upload them to your site. The software helps by grading scores for your alt text, and image caption

Image Optimization for SEO: Responsive Images

By responsive design, you can ensure that your images can adapt to the different device screen sizes such as mobile, tablet, or desktop

Image-Text Relationship and Unique Images

Image Text relationship indicates the relevant text that appears near the image which needs to bear context as search engines use this criteria to rank pages.

Businesses ensure that the images displayed on their website are unique and not from stock photos which commonly appear all over the net. Beware of the risks that lie with using licensed and copyrighted images which may end up in litigation and lawsuits.

Add Images to Your Sitemap

Images in a sitemap help search engines crawl and index your images. The Yoast SEO plugin adds Images in XML sitemaps for users of WordPress CMS.

Use a CDN to deliver your images

A CDN will deliver images from the cache closest to the user thereby speeding the delivery time and loading your site faster.

ImageKit.io is a free image and video cdn that optimizes and transforms the image taking into consideration your default settings with URL parameters for returning a response.

Image Optimization for SEO: Schema Images

Add schema markup for your images by specifying the type of image, the subject, and any copyright info and then adding it to your website. Read more by clicking on Schema SEO.

Image Optimization for SEO: Tools

  • Compressor.io (Image Compression)
  • ImageOptim (Image Compression)
  • Short Pixel (Image Compression)
  • TinyJPG | TinyPNG (WP plugin)
  • Optimole (WP plugin)
  • Smush (WP plugin)
  • GT Metrix (for page speed)
  • Google PageSpeed Insights (for page speeds)

The ideal image resolution for the web is 72 pixels per inch and anything less can render the image pixelated. Resolution describes the purpose of the use of the image. Print works at 300 PPI. Web images are not suited for resizing and web graphics can never be accurate when compared to print. The compression process is essential for fast loading but degrades both color and detail.
The original image dimensions uploaded to your website have a bearing on how images are displayed. Use images that are 1500 and 2500 pixels wide.

fig10-Images-Raster versus Vector Graphics

Raster v/s Vector Graphics

Raster graphics are a common type of image file that consists of a grid of pixels fig10 where each pixel stands for an individual color within the image. Web graphics and digital photos are stored as raster graphics. Some raster image formats are uncompressed, but most use image compression. Examples of raster image file extensions include Vector Graphics, 3D Image files, BMP, TIF, JPG, GIF, and PNG.

Vector graphics on the other hand make use of mathematical equations to outline designs. These mathematical equations are converted into points (vector paths) to connect lines or curves. These vector paths make up the different shapes that are rendered in vector graphic images. Hence vector graphics can be scaled to any size in small file sizes without image quality losses. Examples of vector file formats are .svg, .eps, .dxf, etc.

Retina Display Images

High pixel density retina images increase UX. Retina Images look sharp on retina displays but images not optimized look blurry. Use SVG images if possible to make your website retina-ready. Raster image formats jpeg or gif look pixelated when stretched to render on larger screens as the bits per pixel are fixed. To create bitmap retina images the image taken should have two times the number of pixels displayed at 300×300 pixels to fill half of the space at 150×150 pixels. WordPress websites can use the WP Retina 2x plugin. For example, a retina image (image@2x.png) is double the normal image (image.png). The normal image and your retina image should reside within the same WordPress Media Library folder.

Use HTML for displaying images on web pages by specifying the width and height. Alternatively, HTML attributes to shrink images by 50% can also be used.

<img src="url(image@2x.png)" width="150" height="150" />

Use the CSS properties below to shrink the Image by 50%

{
image: url(image@2x.png);
height: 50%; width: 50%
}

Conclusion

When it comes to Image Optimization For SEO, keyword relevancy matters for webpage ranking on search engines. Creating descriptive, keyword-rich file names is the key to image optimization. Search engines not only crawl the text on your webpage, they also crawl your image file names. It is possible to keep the image at its original file size by rendering the resized image using HTML Images / CSS Images. The browser has to load a larger image even though the image appears to be small. To increase web page speed, resize the image using an image editor which will reduce both the download time and its file size, and then upload it to your website.

Implement Image Optimization For SEO, and best practices by using original images, and relevant text near images, avoiding keyword stuffing, including captions, and optimizing image titles. Responsive design makes images adapt to the different device screen sizes. Choose the correct file format and compress images to improve page load speed.

By D Anthony

D Anthony is a SEO content writer and blogger with a passion for digital marketing. When not at work, he goes site seeing.