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 corresponding variable in the gothic-config.json file.

{
 	"projectName" : "gothic-example" ,
 	"goModuleName" : "github.com/felipegenef/gothicframework/v2" ,
 	"optimizeImages" : {
 		"lowResolutionRate" :  20 ,
 	 }

 } 

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

First, let's add the component to the page. Make sure to always set a fixed height and width for the component or the div wrapping it:

import "github.com/felipegenef/gothicframework/v2/components"

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

For last, add the Route to lazy load the original image on main.go

import "github.com/felipegenef/gothicframework/v2/components"

 gothicComponents.OptimizedImageConfig .RegisterRoute ( router, "/optimizedImage/{name}/{extension}" , gothicComponents.OptimizedImage ) 

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