Images are not only engaging and visually pleasing, they also break the monotony of long passages of text. An image such as an animated gif or an infographic, keeps people entertained and brings a person’s attention to key information. Since images are an essential part of creating an engaging content, it is imperative to learn how to optimise images for Search Engine Optimisation (SEO).

Why Optimise Images for Search?

Images account for a large proportion of downloaded bytes on a web page. Optimizing images for search can yield significant byte savings and performance improvements for a website, thus improving the overall user experience. Learning how to optimise images for search enables a smooth delivery of images while ensuring that the image quality is not compromised.

Images account for a large proportion of downloaded bytes on a web page. Optimizing images for search can yield significant byte savings and performance improvements for a website, thus improving the overall user experience.

A well-optimised image will be properly indexed in the search results. This can be done by including a descriptive alt attribute and inserting a proper title to the image.

Page Speed as an Important Ranking Factor

The page loading speed is an important ranking factor in Search Engine Optimisation. Multiple large images greater than 1MB each will drastically slow the loading process of a web page. In order for a web page to score well on Google PageSpeed Insights, images have to be displayed at the exact dimension (100% width and height), rather than being scaled down with CSS or HTML.

Optimising Images on Google PageSpeed Insights

Digital Marketing and WordPress Tutorials - Optimise Images for Search Engine Optimisation - Google PageSpeed Insights - Leow Hou Teng

Google PageSpeed Insights

The free Google PageSpeed Insights allows a user to find out how well a website scores in speed performance. By inputting a web link in the ‘Analyze’ box, a user will be provided with a list of factors affecting page speed, including ‘Optimize Images’. It further lists out specific images to optimise to improve on the overall loading speed of the web page.

Digital Marketing and WordPress Tutorials - Optimise Images for Search - Download Optimized Images on Google PageSpeed Insights - Leow Hou Teng

Download Optimized Images on Google PageSpeed Insights

Continue Reading
A recent change on PageSpeed Insights automatically optimises images to the correct sizes, allowing users to download the relevant images and upload to the site.

Step 1–Preparing Images for Search

#1 Resize Images

While optimising images for search, the challenge is to reduce the size of the image without compensating for image quality & clarity. This is of increasing importance as screens on computers and mobile devices are adopting retina displays.

The images below compare the same image at different resolution and file size. The two images are scaled to the same size. Notice how the smaller image is significantly blurred while the same image at a higher resolution has greater clarity.

Digital Marketing and WordPress Tutorials - Optimise Images for Search Engine Optimisation - Low and High Resolution Comparison - Leow Hou Teng

High and Low Resolution Image Comparison

Recommended Image Size:

  1. File Size < 1MB
  2. For .gif animated images, the file may exit 1MB
    1. File size may be controlled by reducing the number of frames,
    2. Or reducing the number of colours used
  3. Dimensions <1200 px x 1200 px
  4. For portfolio images, 1920 px images may be used

Tools to Resize Images

  • With professional programmes such as Adobe Creative Suite
  • Free online tools like Canva
  • Directly on WordPress for WordPress users

Word of caution ⇒ ALWAYS keep the original images for future changes.

#2 Lossless Compression

Lossless compression, as opposed to lossy image compression, retains every single bit of data that was originally in the file. This ensures that images while being compressed, do not degrade in quality.

Tools for Lossless Image Compression

  • On Adobe Photoshop ‘Save for Web’
  • On WordPress, use a plugin such as WP Smush

#3 Remove EXIF Image Data

An image’s Exchangeable Image File Format (EXIF) data may contain information such as date, time, camera settings, and possible copyright information. These data are unnecessary in most cases and it may add significant size to an image.

On Mac or PC, these data are viewable with the ‘Get Info’ on Mac and ‘Properties’ on a PC.

PC has an inbuilt function to ‘Remove Properties and Personal Information’ at the bottom of the properties dialogue. For Mac users, a software may be required.

Step 2–Use Image Alternatives

#1 Limiting the Number of Images

The most obvious way to reduce image loading is to limit the number of images used on every page. However, this may not be ideal or workable on many occasions. Basic JPEG and PNG images are manageable by following the steps above to reduce the file size. The number of animated GIFs used should be minimized.

#2 Leverage on CSS Animation

Consider adding animations with CSS in replace of animated GIFs. Basic animations such as rotation, slide-ins, or other movements may be achieved with animation keyframes. The Animate.css provides a sample of animations that can be added to any websites. For Divi users, a recent update in September 2017 allows animation on almost every element on the website. Other unique animations may be added to Divi with Animate.css

Consider adding animations with CSS in replace of animated GIFs. Basic animations such as rotation, slide-ins, or other movements may be achieved with animation keyframes.

#3 Use SVG

SVG is a file format that is vector-based, hence scaling does not affect its image quality. SVGs are increasingly used as it may have a transparent background and it can be animated with CSS. This will be a good alternative to GIFs and PNG.

READ  How to Add Divi Animations to Any Sections, Rows and Modules

On the flip side, SVG files are not indexed by image search and limited to vector illustrations. Complicated vector images may be significantly larger in size than PNG files.

Tools for Creating SVG

  • SVG files may be exported from Adobe Illustrator

#4 Use Icon Fonts

For icons, such as common social media or basic navigation icons, an alternative is to use an existing icon font.

Digital Marketing and WordPress Tutorials - Optimise Images for Search Engine Optimisation - Font Awesome - Leow Hou Teng

Font Awesome

Font Awesome is a good resource to search and add icons on websites. The fonts can be easily integrated on websites and can be used on menus or any part of a web page.

Digital Marketing and WordPress Tutorials - Optimise Images for Search Engine Optimisation - Elegant Themes Font - Leow Hou Teng

Elegant Themes’ – Elegant Icon Font

Elegant Themes’ WordPress themes are integrated with the Elegant Icon Font. The fonts are available for download and may be used by other websites.

#5 Repeat Patterns

Instead of a full-size background image, consider adding a small repeatable pattern. Patterns can create interesting textures and unique designs on a website without having to load a large image document.

Digital Marketing and WordPress Tutorials - Optimise Images for Search Engine Optimisation - Toptal Subtle Patterns - Leow Hou Teng

Toptal Subtle Patterns

Toptal provides free subtle background patterns that can be used on websites.

To use an image as a background, add the CSS code below to the desired element.

.YOUR_OBJECT_CLASS{
background:url(IMAGE URL HERE) repeat;
}

 

Step 3–Delivering Images

#1 Serve Different Images for Different Devices

Images may be displayed differently on different devices. For example, a wide image on a desktop may have its sides cropped off or be scaled to full width on a mobile device. Similarly, a long image on a mobile device may require scrolling on a desktop to view the full image.

Digital Marketing and WordPress Tutorials - Optimise Images for Search - Image Comparison on Different Device - Leow Hou Teng

Face Cropped Out on a Mobile Device

Due to this difference in display sizes, consider serving images that are suitable for different display ratios. This will not only make sure they look good, but will also ensure that images are displayed at the right size.

#2 Use a CDN

Host images on a Content Delivery Network (CDN), instead of on the server itself. A separate server to host images lessens the load on the server where the website is being hosted hence potentially quickens the page loading speed. As I have yet to try this out, you might want to check out this post by WPBeginner on how to set up the Free CloudFlare CDN.

#3 Lazy Load Images

Lazy load images mean images are only loaded when a person strolls to it, preventing any delay in loading the website. Often, a user may close the site when it fails to load within a certain timeframe, hence delaying the loading of images may prevent such instances.

Digital Marketing and WordPress Tutorials - Optimise Images for Search Engine Optimisation - BJ Lazy Load - Leow Hou Teng

BJ Lazy Load

On WordPress, use a plugin such as BJ Lazy Load to lazy load images, videos, and iframes. The plugin is easy to install and has the choice to include a placeholder image, such as a logo, to show that an image is being lazy loaded on the website.

#4 Caching Web Sites

Caching websites is useful for returning visitors as it keeps a ‘record’ of existing data and reducing the need to load any previously seen information. This avoids having to load the same images every time a person visits the same page.

Step 4–Optimise Images for Search

#1 Proper Image Permalinks

Images uploaded to a website has its own link or permalinks. In most cases, these links will automatically be named according to the file name. In order for images to be indexed according to keywords strategy, rename the files with the keywords prior to uploading them onto the server.

#2 Add an Image Title and Alt Text

After uploading an image on WordPress, the file can be found in the Media Library. Click on an image to view the attachment details. Add a descriptive image title and alt text to allow search engines to better understand the images.

Digital Marketing and WordPress Tutorials - Optimise Images for Search Engine Optimisation - WordPress Media Library - Leow Hou Teng

WordPress Media Library

The caption and description boxes can be filled but the step is not necessary. For Divi users, learn how to make use of the image captions and style them for a blog post.

#3 Defining the ‘OG:Image’ Attribute for Facebook

A feature image is required when sharing articles on Facebook. This ensures a better conversion rate or the likelihood where followers click on a link on Facebook. In order for the feature images to show up, the Open Graph ‘OG:Image’ field should contain the image file link.

For WordPress users, use an SEO plugin such as the ALL-in-One SEO Plugin or the Yoast Plugin to handle social media images. In addition, use the Facebook Sharing Debugger to verify the right image is being loaded.

Hou Teng

Hou Teng

Art Director, Digital Marketing Strategist at LeowHouTeng.com
Hou Teng is a Singaporean graphic designer, specialising in both print and web. After graduating from Nanyang Technological University, School of Art, Design & Media, he has worked in advertising and launched an education startup as a side project. He has also worked briefly in a renovation start-up in Shen Zhen, China. While his strengths are in branding and layout design, he is also skilled in digital imaging, web design (HTML & CSS), WordPress content management and administration, search engine optimisation, and digital marketing.
Hou Teng