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.

On small screens, code snippets aren't shown. Please consult this page on desktop to view and copy code snippets.

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)

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

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> <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> <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.

Notes

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 file.

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

Pending

Css statement to define height of a area reserved for the image while loading the file.