As of September 30, 2024, Sitecore XM Cloud has introduced full support for uploading and using WebP files in the Sitecore XM Cloud media library. You can now utilize WebP images in image, rich text, and link fields within Sitecore Pages. The benefit is improved website performance, reduced page load times, and a boost in SEO rankings. With WebP files, XM Cloud users can provide a faster, more responsive experience for their visitors.
What is a WebP File?
A file with the .webp extension is an image format developed by Google, designed to reduce the size of images without sacrificing quality. The goal of WebP is to make the web faster by offering smaller, more optimized images that don’t compromise on visual richness. Smaller images mean quicker load times, reduced bandwidth usage, and a more efficient web experience overall.
Key Benefits of WebP:
- Smaller File Sizes: WebP images can be up to 30% smaller than JPEG or PNG files, which speeds up website performance.
- High-Quality Compression: WebP maintains excellent image quality while offering both lossless and lossy compression options.
- Faster Web Experience: The reduced size of WebP images leads to quicker load times, creating a more responsive website.
- Improved SEO and User Engagement: Faster load times enhance user experience and help improve search engine rankings.
The JSS NextImage Component for Optimized Image Delivery
In addition to the now available native WebP support in the XM Cloud Media Library, Sitecore JSS developers already could take advantage of the NextImage component in their Sitecore JSS applications. Introduced in version 20.1.0 of the @sitecore-jss/sitecore-jss-nextjs package, the NextImage component is built on top of Next.js’s optimized next/image component, which automatically outputs WebP images when supported by the browser.
Key Features of the Sitecore JSS NextImage Component:
- Optimized Image Delivery: The NextImage component ensures that images are served in the correct size and format for each device, including WebP where possible, enhancing performance and load times.
- Lazy Loading: The component supports lazy loading, meaning images are only loaded when they enter the viewport, reducing initial page load time.
- Visually Appealing Placeholders: NextImage allows you to display attractive image placeholders while the actual image is loading, improving the visual stability of your site.
- Automatic Resizing: Images are resized on demand, whether they are hosted locally or remotely, ensuring they fit perfectly across all screen sizes.
- Modern Image Formats: In addition to WebP, the component supports other modern formats, ensuring the most efficient image delivery possible.
To use the NextImage component in your JSS application, ensure your @sitecore-jss/sitecore-jss-nextjs package is updated to version 20.1.0 or later. This component is an excellent tool for optimizing image delivery of your normal .jpg, .png, etc… files on your Sitecore JSS-powered websites, combining the flexibility of Sitecore JSS with the performance enhancements of WebP.
- Check out the Sitecore documentation on the JSS NextImage component.
Happy Sitecore-ing!
–Robbert
