Skip to content
Hugo Template Demo

Image Handling Demo - Responsive Images and Galleries

Hugo Template
2 min read
images responsive gallery demo

This post demonstrates the advanced image handling capabilities of the Hugo template.

Simple Image Shortcode

The basic image shortcode provides automatic WebP conversion and optimization:

{{< image src="/images/example.jpg" alt="Example image" caption="This is a caption" >}}

Features:

  • Automatic WebP conversion with JPEG fallback
  • Lazy loading by default
  • Responsive sizing
  • Optional captions

Responsive Images

For full responsive behavior with multiple sizes:

{{< responsive-image src="/images/hero.jpg" alt="Hero image" caption="Responsive hero image" >}}

Benefits:

  • Multiple image sizes generated automatically
  • Optimal image served based on screen size
  • WebP format for modern browsers
  • JPEG fallback for older browsers

Image Galleries

Create beautiful image galleries with lightbox functionality:

{{< gallery >}}
{{< gallery-image src="/images/gallery/img1.jpg" alt="Gallery image 1" caption="First image" >}}
{{< gallery-image src="/images/gallery/img2.jpg" alt="Gallery image 2" caption="Second image" >}}
{{< gallery-image src="/images/gallery/img3.jpg" alt="Gallery image 3" caption="Third image" >}}
{{< /gallery >}}

Gallery Features:

  • Responsive grid layout
  • Click to enlarge (lightbox)
  • Smooth hover effects
  • Automatic thumbnail generation

Generate galleries automatically from a directory:

{{< gallery dir="/images/gallery/" >}}

This will automatically include all images from the specified directory.

Advanced Usage

Custom Sizing

{{< image src="/images/diagram.png" alt="Process diagram" width="600" >}}

Custom CSS Classes

{{< image src="/images/profile.jpg" alt="Profile" class="rounded-full mx-auto" >}}

Eager Loading for Above-the-Fold Images

{{< image src="/images/hero.jpg" alt="Hero" loading="eager" >}}

Performance Benefits

The image handling system provides:

  1. Automatic Optimization: WebP conversion and multiple sizes
  2. Lazy Loading: Images load only when needed
  3. Proper Caching: Long-term caching with appropriate headers
  4. Responsive Delivery: Right size for each device
  5. Accessibility: Proper alt text and semantic HTML

Best Practices

Image Organization

  • Store images in static/images/ directory
  • Use descriptive filenames
  • Organize by category or date
  • Keep source images high quality

Alt Text

Always provide meaningful alt text:

{{< image src="/images/chart.jpg" alt="Sales increased 25% from Q1 to Q2" >}}

File Formats

  • JPEG: For photographs and complex images
  • PNG: For graphics, logos, and images with transparency
  • WebP: Automatically generated for optimization

Technical Implementation

The image shortcodes use Hugo’s built-in image processing to:

  • Generate multiple sizes (400px, 800px, 1200px, 1600px)
  • Convert to WebP format
  • Create responsive <picture> elements
  • Add proper caching headers

Browser Support

  • Modern browsers: Get optimized WebP images
  • Older browsers: Receive JPEG/PNG fallbacks
  • All browsers: Benefit from responsive sizing

This comprehensive image handling system ensures optimal performance, accessibility, and user experience across all devices and browsers.