Sustainability Best Practices
CMSCloudHeartcoreDXP
  • Introduction
  • Infrastructure
    • Infrastructure Overview
    • Hosting
    • Architecture
    • Security and Bots
  • Backend
    • Backend Overview
    • Upgrades and patches
    • Cache responses
    • Sustainable Design Patterns
    • Performance Testing
    • Common pitfalls
    • SOAP, REST and GraphQL
    • SQL optimization
    • JAMstack
    • Monolithic vs. Service based Architecture
    • Async
    • Background tasks
  • Frontend
    • Frontend Overview
    • Page weight budget
    • Image optimization
    • Asset optimization
    • Limit use of 3rd parties
    • Lazyload resources
    • Mobile first
  • Editor
    • Editor Overview
    • Content Types
    • Content Optimization
    • Design Choices
    • Data Management
    • Housekeeping
  • Telemetry
    • Telemetry Overview
    • February 2024
Powered by GitBook
On this page
  • Optimize before Upload
  • Use the best File Format
  • Consider using SVGs
  • Image Delivery

Was this helpful?

Edit on GitHub
Export as PDF
  1. Frontend

Image optimization

PreviousPage weight budgetNextAsset optimization

Last updated 1 year ago

Was this helpful?

Images typically make up element for websites, being responsible for the largest over-the-wire transfer rates. We can reduce their size and deliver them with optimization in mind.

Optimize before Upload

We must optimize these before uploading them to our website. This results in a smaller footprint for a user to download, but will also use less computing to upload. Tools such as or resizing to an appropriate maximum expected size can be used for optimizing. Then the images displayed on the website will help reduce the overall emissions during the website's lifetime.

Use the best File Format

We can make use of better image formats. It could be AV1 Image File Format (AVIF) and WebP to see 50% and 26% smaller file sizes than JPEGs respectively. AVIF is less well supported than WebP so it’s important to use a <picture> tag to ensure compatibility. You can read more about this in the article.

The other benefit of using a <picture> tag is that we can denote which images to use based on screen size. This helps us to provide the most appropriate image to the user, avoiding unnecessary downloads of larger images.

There is a package available for Umbraco called that makes setting this up easier. This is done by using the GetCropUrl method to match the crop settings that can be configured within Umbraco with .

Consider using SVGs

For icons or illustrations, these would be better suited to be included as an SVG than raster outputs (PNG, JPEG, WebP, AVIF, etc). These can also be and you can include them directly in the HTML to avoid additional requests. There is a tag helper <our-svg> for this included in a for Umbraco. It reads the file contents of an SVG file and outputs it as an inline SVG in the DOM.

However, if your SVG is complex, then it would still likely be a smaller size in another image format. It's important to test for your use case to ensure the smallest file size.

Image Delivery

Other options when it comes to image optimization could be to use external services. It could be to provide a Content Delivery Network (CDN) to deliver images at the edge with good optimization and caching in place. Cloudflare and Cloudinary are examples of these.

For Cloudflare specifically, there is a package available for Umbraco called . It offloads image format conversion of AVIF and WebP formats to Cloudflare Image Resizing. This can also be combined with Slimsy.

42% of the Largest Contentful Paint
Squoosh
Using Modern Image Formats: AVIF And WebP
Slimsy
Image Cropper
optimized
community package
CloudflareImageUrlGenerator