SIMAEC.NET WEB PUBLISHING

Publishing Images

Websites with a focus on publishing photos have to pay special attention in how to prepare and store media files and how to build the html/css for a fast loading, responsive web page.

IMG Tag

The simple way to include images in a web page; allows responsiveness but limited device optimization. (Compare image quality of this photo with the one below)

<p class="image-box"></p>
    <img src="image-file-url" alt="image title" />
</p>

American Bullfrog

Picture Tag

The picture tag allows media queries to select different files for different screen sizes. The breakpoints in the media queries can be adjusted to the needs of a particular page layout.

<picture class="image-box">
    <source 
        srcset="image-file-url-large-screen 1x,
                image-file-url-large-screen-2x 2x,
                image-file-url-large-screen-3x 3x" 
        media="(min-width: 992px)" />
    <source 
        srcset="image-file-url-medium-screen 1x,
                image-file-url-medium-screen-2x 2x,
                image-file-url-medium-screen-3x 3x" 
        media="(min-width: 768px)" />
    <img src="image-file-url-small-screen 1x" 
        alt="image title" />
</picture>  
American Bullfrog

Figure Tag

Embedding the picture tag with a figure tag is my preferred setup because it allows linking semantically additional information to the photo with the figcaption tag.

<figure>
    <picture class="image-box">
        <source 
            srcset="image-file-url-large-screen 1x,
                    image-file-url-large-screen-2x 2x,
                    image-file-url-large-screen-3x 3x" 
            media="(min-width: 992px)" />
        <source 
            srcset="image-file-url-medium-screen 1x,
                    image-file-url-medium-screen-2x 2x,
                    image-file-url-medium-screen-3x 3x" 
            media="(min-width: 768px)" />
        <img src="image-file-url-small-screen 1x" 
            alt="image title" />
    </picture>
    <figcaption>
        image description
    </figcaption>
</figure>
American Bullfrog
American Bullfrog (Rana Catesbeiana): Photo taken on June 26th, 2019, in Park Bernard-Landry, Laval, QC.

Aspect Ratio / CSS

Speed up client side rendering by reserving the vertical space for the image using css.

To achieve this, add a class to the tag surrounding the img tag. "image-box" in this example. The images on this page have the ratio 2:3. Using the pseudo class ::after, we apply a hight to the box of 66.67%: 100% * 2 / 3.

.image-box {position: relative;}
.image-box::after {
    display: block;
    content: "";
    padding-bottom: 66.67%;
}
.image-box img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

CDN

This demonstration of the different tags uses one high resolution file stored in a CDN and pulls the different file sizes with different image URL API requests of the same high resolution raw file.

To determine the different file sizes necessary to publish the image opmtimized for different devices, I use Firefox inspector.

On this page, IMGIX is used as CDN. It is a reasonably priced image rendering service. The high resolution files are hosted in Google Drive. Alternatively, Cloudinary may be used which hosts the files and provides image rendering service.