With Responsive Design, Proper Image Handling is Much More Complicated than it Used to Be. GenHelm Streamlines this Process For You.

Search engines, such as Google, use a website's responsiveness as a ranking factor. Images have long been the number one reason for which sites suffer from performance penalties. HTML 5 offered a solution by adding srcset to the img tag but using this option is complicated. GenHelm's image model makes it easy to generate up to seven physical images for each img tag so that browser's never need to load images larger than they can display.

Image Model Example

The foundation of GenHelm's image handling capabilities come from the image model itself. Here we show a sample image model definition.

Sample image definition

In this example we have defined three physical images to support image rendering for an image named fitted-tarp-with-flap. This set of images will be used to build the img tag wherever we insert the dollar function $image(fitted-tarp-with-flap). Here is an example of the generated tag.

<img src="https://www.heavydutytarps.ca/images/fitted-tarp-with-flap-sm.jpg" 
	srcset="https://www.heavydutytarps.ca/images/fitted-tarp-with-flap-tiny.jpg 320w,
		https://www.heavydutytarps.ca/images/fitted-tarp-with-flap-xs.jpg 432w,
		https://www.heavydutytarps.ca/images/fitted-tarp-with-flap-sm.jpg 523w" 
	sizes="(min-width: 600px) and (max-width: 800px) 70vw,
		(min-width: 801px) 60vw,
		(min-width: 1000px) 600px,
	width="523" style="max-width:523px;"  
	alt="Utility trailer tarp, fitted on front with a flap on the back"
	title="Fitted on front, flap on the back" class="img-float-left"

Image Generation

Images can be sourced in one of three ways:

  1. By uploading saved images of the desired sizes.
  2. By uploading an original image to be used to generate the resized images.
  3. By pasting an image from the clipboard and using this to save an original image as well as the desired resized images.

Below we show the options that can be set when generating images from an original image. Generation features include cropping and rotating. Images can be generated directly by GenHelm or you can leverage the tinypng.com API to achieve optimal lossless compression.

Image generation options

image_sizes Model

Notice that the image model definition can refer to a separate Image Sizes definition. This is yet another component that is generated by a GenHelm model. Here we show the definition for the referenced img-float-left image_sizes model definition.

Image sizes definition

Defining Groups of Images

Several models are used to render groups of images to form image galleries. Any number of images can be grouped using the imagelist model as shown below.

Images defined using the imagelist model

Creating Image Galleries

The imagegrid model is used to render responsive image grids like the one shown below.

Image grid generated using the imagegrid model

The swiper model is used to define responsive image sliders that can automatically slide using a wide variety of transition effects. Here is a simple slider that scrolls toward the right.

Image gallery generated using the swiper model

The bootcar model can be used to create image carousels based on the Bootstrap framework.