How to Optimize Images and Videos for SEO in Magento 2

Media content plays a critical role in the user experience of a Magento 2 store. Optimizing images and videos for SEO not only enhances the visual appeal of your store but also impacts page load speed, search engine rankings, and user engagement. In this guide, we'll walk through how to optimize images and videos for SEO in Magento 2, covering file formats, alt text, and techniques to improve loading speed.

Why Image and Video Optimization Matters in Magento 2

Optimizing media is essential because:

Improved Loading Speed: Smaller, optimized files load faster, providing a better user experience and reducing bounce rates.

Enhanced Search Engine Rankings: Search engines prioritize faster-loading sites and properly optimized media with descriptive alt text, captions, and relevant keywords.

Higher Engagement and Conversion: Visual content that loads quickly and aligns with SEO best practices helps keep users on your site longer, potentially increasing conversions.

Steps to Optimize Images and Videos for SEO in Magento 2

Step 1: Choose the Right File Formats

Images

JPEG: Ideal for photographs and detailed images due to high compression with minimal quality loss.

PNG: Best for graphics with transparent backgrounds but produces larger file sizes.

WebP: A modern format that offers better compression than JPEG and PNG, reducing file size while maintaining quality. Magento 2 supports WebP natively in later versions (2.4.3+), so it’s worth using if supported.

Videos

MP4 (H.264): The most widely used video format, compatible with most browsers and optimized for compression without sacrificing quality.

WebM: Another highly compressed video format supported by newer browsers; it’s ideal if you need an additional format for modern browsers.

Step 2: Resize and Compress Media Files

Image Compression

Use tools like:

TinyPNG (for PNG and JPEG) – Free online tool for compressing images without quality loss.

ImageOptim (for Mac) and RIOT (for Windows) – Useful for compressing and optimizing images locally before uploading.

Magento 2 Image Optimizer Extensions – These plugins compress images directly in your Magento store, automating the process.

Video Compression

For videos, use tools like:

HandBrake – A free tool for compressing and converting videos without significant quality loss.

FFmpeg – For advanced users, this command-line tool offers high customization for video compression.

After compression, test the quality to ensure it remains suitable for your site’s visual standards.

Step 3: Add Descriptive Alt Text and Titles

Alt text (alternative text) describes images to visually impaired users and helps search engines understand the content, contributing to better SEO rankings.

Log in to Magento Admin Panel.

Navigate to Catalog > Products and select a product.

In the product's image gallery, select each image and fill in the “Alt Text” field with a brief, descriptive phrase that includes relevant keywords.

Example: For an image of a red leather handbag, use “Red leather handbag for women with adjustable strap.”

Best Practices for Alt Text:

Be concise yet descriptive, aiming for under 125 characters.

Avoid keyword stuffing; keep it natural.

For decorative images, you can skip alt text to focus on content-relevant images.

For video content, use captions or transcriptions whenever possible. They improve accessibility and can help videos rank better in search.

Step 4: Enable Lazy Loading

Lazy loading defers the loading of images and videos until they appear in the user’s viewport. This technique speeds up the initial page load and improves user experience.

Magento 2 (2.4.3+) includes built-in support for lazy loading images, but if you’re using an older version, consider using an extension like Lazy Load.

Alternatively, add lazy loading manually by:

Updating image tags in your HTML or template files with the loading="lazy" attribute:

<img src="image.jpg" alt="product image" loading="lazy">

Ensure that lazy loading doesn’t interfere with critical images at the top of the page to avoid layout shifts and a poor user experience.

For videos, lazy load by embedding the video and delaying its loading until the user interacts with it. You can also use a placeholder image in place of the video thumbnail, loading the actual video only when clicked.

Lazy Load extension is included in the BSS Magento SEO plugin Suite. INSTALL to boost your search rankings effortlessly and optimize every aspect of your Magento store for visibility and growth!

Step 5: Use Responsive Images

Responsive images adjust to the size of the user’s screen, improving load times and optimizing the display on different devices.

Add srcset Attribute: This HTML attribute allows you to provide multiple versions of an image for different screen sizes.

<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" alt="responsive product image">

Magento 2 Responsive Design: Magento’s theme framework supports responsive design, which adapts image display based on screen size. Ensure that your images are optimized for various device sizes by testing on multiple screen resolutions.

Step 6: Optimize Video Embeds and Thumbnails

Videos can significantly impact loading speed if not optimized properly.

Use YouTube or Vimeo for Hosting: Hosting videos on a third-party platform can reduce server load. Simply embed the video in your Magento store, leveraging the platform’s streaming infrastructure.

Optimize Video Thumbnails:

Use an optimized JPEG or WebP image as the thumbnail to improve loading time.

Ensure the alt text of the thumbnail image describes the video content (e.g., “Product demonstration video for leather handbag”).

Step 7: Generate Image and Video XML Sitemaps

Sitemaps help search engines find your media content and improve the likelihood of it being indexed.

Image XML Sitemap: Magento 2 generates XML sitemaps natively, but extensions like the Magento 2 SEO Suite offer enhanced sitemap features, including image URLs. Ensure that your image sitemap is updated frequently, especially after adding new media.

Video XML Sitemap: If your site hosts a significant number of videos, create a video XML sitemap to help Google index them.

Use online tools like Yoast Video SEO or Screaming Frog to generate a video sitemap if needed.

Step 8: Test Loading Speed and Performance

Use performance testing tools to evaluate your media optimization:

Google PageSpeed Insights: This tool provides insight into how your images and videos impact loading speed and offers recommendations for further optimization.

GTmetrix: Measures page performance, including media loading times, and suggests potential improvements.

Magento Performance Toolkit: A tool specifically designed for Magento stores to measure load times and optimize accordingly.

These tools often provide actionable insights, such as compressing specific images further or adjusting lazy loading.

Step 9: Monitor Media Performance Regularly

Regular monitoring helps ensure that your images and videos continue to perform optimally:

Magento Admin Reports: Use Magento’s reporting features to analyze which products have high or low engagement and adjust media as needed.

Google Analytics: Track user behavior on media-heavy pages. High bounce rates might indicate a need for further media optimization.

Final Checklist for Media Optimization in Magento 2

✅ Choose the Right File Formats: Use optimized formats like WebP for images and MP4 for videos.

✅ Resize and Compress: Compress images and videos before uploading them.

✅ Add Alt Text: Include descriptive and keyword-rich alt text for SEO.

✅ Enable Lazy Loading: Defer media loading until needed.

✅ Implement Responsive Images: Use src set for different screen sizes.

✅ Use Optimized Video Embeds and Thumbnails: For videos, consider external hosting and optimized thumbnails.

✅ Generate XML Sitemaps: Ensure images and videos are included in sitemaps.

✅ Test Loading Speed: Use tools like PageSpeed Insights to assess media impact.

✅ Monitor and Adjust: Regularly review media performance and adjust as necessary.

Conclusion

Optimizing images and videos for SEO in Magento 2 is essential for achieving faster page load times, better search engine rankings, and a positive user experience. By following these steps, you’ll create an efficient media optimization strategy that enhances the visibility and performance of your Magento store. Regularly revisit your media content to ensure it remains optimized as your store grows and as search engine guidelines evolve.

>>> If you are a newbie, don't worry, we have complied full steps to setting up an SEO extension in Magento 2