SEO Optimized Image Loading (Next Image Component)

This feature optimizes SEO by implementing lazy loading for images, similar to the Image Component in Next.js. Initially, a lower-resolution version of the image is displayed. Once the page has loaded, the original resolution image is fetched, giving the user the impression that the page loaded faster. The image will appear blurred at first, then transition smoothly to full resolution.

To use this feature, you will need two versions of your image: one with a lower resolution and another at the original resolution. Let's make it with the optimize-images Gothic Framework command. Place your image in the optimize folder and run

OBS: Supported image formats include: JPG, JPEG, PNG and WEBP

make optimize-images

This command creates a folder in the public directory containing both the blurred and original versions of your images. By default, the blurred image is generated at 20% of the original resolution. You can adjust this setting by modifying the LowResolutionRate field in the gothic.config.go file.

package main

import gothic "github.com/gothicframework/core/config"

var Config = gothic.Config{
	ProjectName: "gothic-example",
	OptimizeImages: gothic.OptimizeImagesConfig{
		LowResolutionRate: 20,
	},
}

Now that we have our optimized images on the public folder, we just need to add the component to a page for the lazy loading effect similar to Next.js Image component.

Simply add the component to the page. Make sure to always set a fixed height and width for the component or the div wrapping it:

<div class="sm:w-[300px] sm:h-[300px] w-[200px] h-[200px]">
	@gothicComponents.OptimizedImage(gothicComponents.OptimizedImageProps{IsFirstLoad: true, ImgName: "Mascot", ImgExtension: "jpeg", Alt: "image example alt text"})
</div>

That's it! In v3, the optimized-image route is registered automatically by the Gothic runtime middleware — there is no manual route registration to add to your main.go anymore.

Did you like this Next.js-like feature? Learn how Gothic Framework uses file-based routing to automatically create your routes!