Image optimization
The process of image optimization includes producing and providing superior-grade images with the appropriate format, dimensions, and clarity to enhance user involvement. Additionally, it encompasses the precise tagging of images with metadata to enable search engine bots to comprehend them and deduce the webpage’s significance.
The HTTP Archive reports that in 2018, images accounted for 21% of the total weight of a typical web page. As image usage has increased over the years, their share is likely to have grown further, surpassing any other component on the website in terms of byte consumption. Therefore, the performance of a site is significantly affected by the size and complexity of images.
Improving page load times and enhancing the overall user experience can be achieved by reducing image size without sacrificing quality. This, in turn, can lead to better search engine rankings, increased customer engagement, more conversions, and improved customer retention.
A helpful hint is to use optimized images as they occupy lesser storage space on your server, thereby hastening site backups.
1. Resize your images
The dimensions of an image, such as 1024 pixels by 680 pixels, are known as the image size, whereas the amount of storage space it takes up, such as 350 kilobytes, is referred to as the file size. Having larger, high-resolution images can significantly decrease page load times and work well for printed materials, but they should be resized for web use.
ADVICE: Refer to this guide for determining the most suitable image dimensions for various social media networks.
Choose the right compression rate
The file size and quality of an image are both impacted by the level of compression used – if the file size is reduced, the image quality will suffer.
Try out different file formats and levels of compression to determine the most suitable ones for each image. Some software for editing images, such as Adobe Photoshop, feature a “save-for-the-web” function that reduces file size while enhancing image quality.
The biggest factor affecting the ability of images to improve a page’s ranking and attract traffic is site speed. The impact is substantial, as not only does site speed affect a user’s ability to navigate through your conversion path, but it also plays a crucial role in determining your page’s rank. If your pages take too long to load, they may not receive positive recognition from Google. In such cases, image compression can be beneficial.
PageSpeed Insights may not be a tool you’re familiar with, but it’s incredibly useful. By inputting any URL from your website, you can receive a detailed analysis from Google on the factors slowing down that specific page. As you continue to run these tests, you’ll begin to identify recurring issues.
Improperly sized images are often the primary inhibitor of page speed. And because image SEO and page speed are inextricably linked, image compression is a crucial aspect of image SEO.
By merely expanding the necessary tab within your PageSpeed Insights evaluations, the images that are causing the most problems on your page will become visible. In addition, you will discover the amount of storage you can conserve by compressing them.
TinyPNG is a tool that you can utilize to compress images individually in a quick manner, or you can opt for CMS-specific plugins/tools (such as Smush for WordPress) that are designed to bulk compress all the images on your site.
In case you are not using Photoshop, these tools and plug-ins may be useful.
Tools for optimizing images.
- Affinity Photo
- FileOptimizer
- Gimp
- ImageOptim (Mac only)
- JPEG Mini
- Kraken (bulk compression)
- Photopea
- Pixlr (JPEG optimization)
- OptiPNG
- Trimage
Plug-ins designed specifically for optimizing images on WordPress.
Test speed
Once you have optimized your images, how can you determine if the loading times of your website’s pages are fast enough? Utilize one of these tools to conduct a speed test of your site:
Advisory: It is advisable to monitor your website’s loading times on a regular basis if your content is subject to frequent updates.
2. Optimize image file names
To maximize your SEO potential, use descriptive and relevant keywords when naming files. Begin with your target keywords and separate them with hyphens instead of using underscores, as search engines cannot recognize individual words when they are connected with underscores.
It is important for filenames to be understandable by both individuals and search engines. For instance, if an image of a woman in a salon is labeled as salon234.jpg, it should be given a more explicit and descriptive title like woman-getting-haircut-in-salon.jpg.
3. Use alt tags
Image comprehension may be possible for viewers, but search engine spiders require additional information. If alternative text is not provided, search engines will be unable to precisely index your image content.
Having a descriptive alt tag not only assists users with visual impairments, but also aids in situations where images fail to load due to technical issues. Moreover, search engines rely on alternative text to determine the significance of an image on a webpage. Therefore, it is recommended to compose an alt tag with at least 10 to 15 words that convey specific details about the image. This way, users and search engines can easily grasp the context and significance of the image.
It is recommended to incorporate the main keyword of the page along with any relevant additional keywords related to the image, and to exclude any non-descriptive words such as articles.
The necessity of image titles when used alongside alt text has been a subject of ongoing discussion. However, they do play a role in determining the ranking as Google utilizes them to determine the sequence in which images are displayed during image search.
According to Google, captions and image titles are used to extract information about the subject matter of an image from the content of a page. Thus, positioning images close to relevant text can aid Google in identifying the image. Employing captions guarantees a thorough and contextually appropriate description of the image.
A helpful hint is to include brand-related terms in alt tags to improve visibility, but refrain from overloading them with keywords.
4. Make images mobile friendly
Mobile-first indexing is the algorithm used by Google, which means that a website’s mobile version is primarily evaluated by crawlers. As a result, it is crucial to ensure that your images are also mobile-friendly. The best way to do this is by making sure that both your website layout and images are responsive to the device being used for viewing.
Website templates and builders may automatically adjust image sizes, but you have the option to set image size according to a device’s width by including custom CSS code on your site. You can explore this straightforward guide for insights on creating responsive images.
5. Optimize the image title
If the image title is not available or doesn’t adequately describe the image, it is advisable to add relevant keywords to it, as you would with file names. This applies even if you are not using WordPress.
Image titles are less important for SEO, but they can provide additional context to the alt text. Image titles are more helpful in terms of user engagement, so consider adding a brief call to action such as “buy now” or “download today.”
6. Include captions
Although image captions do not have a direct impact on SEO, they can still contribute to the website experience since they are visible unlike file names and alt text. Using captions could indirectly boost SEO by enhancing user experience and engagement metrics.
7. Use unique images
Although using stock photos is acceptable, it may not improve your search rankings as other websites may also utilize the same images. In a similar vein, it is advisable to post distinctive visuals just as unique written content is better for SEO.
8. Ensure text complements the images
If your text does not provide adequate information to describe an image, amplifying the description can aid search engines in establishing the significance of your images.
9. Add image structured data
By incorporating structured data on your web pages, you can enhance the likelihood of search engines showcasing your images as enriched outcomes. Google Images is capable of supporting structured data pertaining to videos, product images, and recipes. For instance, if Google recognizes the presence of text such as a recipe along with an image, it appends a badge to it.
According to @IsaacJustesen via @CMIContent, incorporating structured data into your webpages assists search engines in presenting your images as enriched results. Familiarize yourself with Google’s overarching instructions on structured data implementation to ensure compliance with the search engine’s criteria.
10. Use site maps
A sitemap is defined by Google as a document that includes a list of web pages on your site, allowing Google and other search engines to understand how your site content is organized. To put it simply, it is a file that delineates your site’s content.
In order to inform search engines about your website structure and pages, incorporating site maps is crucial for SEO. To ensure that all types of media, like videos, thumbnails, memes, infographics, and photos are detected by search engine crawlers, these should be included in your site map.
Include the title, description, URL location, caption, and license information for each image entry. For video entries, provide the title, description, URL location, thumbnail URL, and raw video file URL. Implement Yoast SEO on your WordPress website to facilitate the inclusion of visual content in a site map.
11. Upload images in next gen formats
“Next-generation image formats should be used to serve images,” is also a common suggestion in the PageSpeed Insights report.
We are referring to JPEG 2000, JPG XR, and WebP formats, which are not as widely used as JPG or PNG. If you are not familiar with any of them, do not worry, as they are not as common.
JPEG and PNG are still the primary image formats, but next-generation formats such as JPEG 2000 are unquestionably better. Using these formats instead of older ones significantly enhances image loading speed and reduces mobile data consumption.
You can easily begin using next-gen image formats by making use of several free online conversion tools that are available.
12. Scale your images to work with your website
The suitable size of an image, in terms of its dimensions, depends on both the CMS you are using and the page format where you plan to upload the image. It’s advisable to research the ideal dimensions for your CMS, such as Shopify’s suggested use of 2048 x 2048 pixels for square product photos, prior to uploading any images.
Your CMS may have automatically adjusted the size of an image to fit well with your content. This change in size only affects its display, not its file size. In most cases, larger images with more pixels will have bigger file sizes.
To ensure that you are using the appropriate image sizes, it is advisable to determine the ideal image size for your website and crop the images accordingly prior to uploading them.
Acquiring images from various websites can be a laborious task. However, opting to download stock photos or delegating the responsibility of creating product images to a designer can be made simpler by selecting a size that suits your website.
13. Create original image content
Although stock photos usually come in sizes that are compatible with most sites, they may not be as efficient as original, branded creative. This is in contrast to the ease of sizing that comes with downloading images from Adobe Stock, Shutterstock, or other vendors.
Images that have been carefully selected from your own data or excellent visuals showcasing your product in action are the types of graphics that tend to be shared on social media and sought after through reverse image searches.
Essential to note is that your page must have distinct and appealing visuals to ensure its uniqueness and significance for your audience.
Repeatedly, Google’s experts advise that in order to achieve strong SEO or recover from a drop in rankings caused by a change in algorithms, the key is to prioritize creating pages that provide significant value to your audience. This requires incorporating images that enhance users’ overall experience on your website.
14. Ensure seamless social sharing
We should discuss Open Graph tags and Twitter Cards which are HTML tags that guarantee the correct display of images and descriptive snippets when someone shares your page on Facebook or Twitter. This is highly important if you wish to boost your images’ popularity on social media as well as redirect traffic and establish powerful social signals to your website.
In case of uncertainty, you have the option to look for these components in your source code. Additionally, you can attempt to post a mock version of your page on social media platforms like Twitter or Facebook to confirm that the post appears appropriately. This approach distinguishes between displaying your acquaintances and supporters a single link and displaying them a large, interactive image card featuring a page description.
Your CMS will determine whether or not you can utilize Open Graph tags. Those who are utilizing BigCommerce may access open graph fields on all product listings within the backend; however, they will not find one available on their homepage.
When utilizing WordPress, you can locate these sections within Yoast (an excellent SEO plugin for WordPress users). It is advisable to review your pages that receive the most traffic and hold significant business value, ensuring they are equally sharable on social media.
