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.
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)
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.
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.
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.
Css statement to define height of a area reserved for the image while loading the file.