Optimizing Web Images with Hugo Partials

Optimizing Web Images with Hugo Partials

Introduction

As web developers, we are always looking for ways to improve site performance and deliver an optimal user experience. One key aspect is efficiently handling images, which often make up a significant portion of a web page’s size. In this article, I will share how I leveraged Hugo partials to generate optimized <picture> elements that boosted our website’s PageSpeed scores.

The Challenge

Our company website, https://webmobix.com, features many high-quality images. However, serving large PNG files to all devices was negatively impacting load times, especially on mobile. We needed a solution to optimize image delivery while preserving visual quality. Additionally, since JPEGs don’t support transparency and our design uses images on various background colors, we required a way to match each image’s background to blend seamlessly with the page.

The Picture Element Solution

The HTML <picture> element allows serving different image versions based on device characteristics or browser support. By providing multiple <source> elements, the browser can choose the most appropriate image file. For our use case, I decided to generate two versions of each image:

• A WebP format image for browsers that support it. WebP offers excellent compression while maintaining good quality.
• A JPEG image with a customized background color to match the page design. This ensures visual consistency.

I also wanted to include semantic alt text and specify eager or lazy loading for each image.

Harnessing Hugo Partials

Instead of manually coding <picture> elements throughout the site, I created a reusable Hugo partial. Partials allow abstracting complex or repeated code into a single file that can be called with custom parameters.

Here’s the code for the picture.html partial:

{{ $bg := default "#ffffff" .bg }}
{{ $altText := default "" .alt }} 
{{ $loading := default "eager" .loading }}
{{ $fmtJpgString := print "jpg " $bg }}
{{ with resources.Get .path }}
<picture>  
  {{ $fmtWebP := .Process "webp picture" }}
  <source srcset="{{ $fmtWebP.RelPermalink }}" type="image/webp" />
  {{ $fmtJpg := .Process $fmtJpgString }}  
  <source srcset="{{ $fmtJpg.RelPermalink }}" type="image/jpg" />
  <img src="{{ .RelPermalink }}" 
    alt="{{ $altText }}" 
    loading="{{ $loading }}" 
    width="{{ .Width }}" 
    height="{{ .Height }}">
</picture>
{{ end }}

The partial accepts four parameters passed in via dict:

• path: The path to the original high-quality PNG image
• bg: The background color for the JPEG (defaults to white if not provided)
• alt: The alt text for the image (defaults to an empty string)
• loading: The loading strategy, eager or lazy (defaults to eager)

The partial uses Hugo Resource to process the original image into WebP and JPEG formats. The JPEG background color is set using the fill argument. The processed images, alt text, loading attribute, and dimensions are then output in the <picture> structure.

To use the partial in a template:

{{ partial "picture.html" 
    (dict 
    "path" "images/hero.jpg" 
    "bg" "#f5f5f5" 
    "alt" "Stunning landscape" 
    "loading" "lazy" "context" .
    )
}}

This approach allows easily generating optimized, art-directed <picture> elements anywhere on the site with a single line of code. The partial can also be extended to include additional image sizes for different breakpoints if needed.

Results

After implementing the picture partial across our site, we saw measurable improvements:

• Google PageSpeed Insights scores increased on both mobile and desktop
• Page load times decreased, especially on slower connections
• Visual quality remained high while reducing image file sizes

Conclusion

By leveraging Hugo partials, we created a systematic way to optimize and art-direct images on our website. The <picture> element with WebP and background-matched JPEG sources improved performance while maintaining design fidelity. This technique showcases the power of Hugo’s templating and pipes to streamline complex frontend tasks. Adopt this approach on your own Hugo site to efficiently manage images and provide an enhanced user experience. Your visitors (and PageSpeed scores) will thank you!