{% comment %} The image file is expected in the site.directory.large_images folder. Downscaled copies should be put in the subfolders "phone, "tablet" and "desktop" respectively. Parameters: file_name: The file name including extension. alt_text: An alternative text for the image. A NOTE ON PIXEL VALUES: While CSS is fixed to assuming 96dpi (especially in the context of media queries) for rendering measurements, the pixel values here correspond to actual physical pixels. As a consequence, phones or tablets may chose a much larger image file than it seems at first glance due to retina displays. {% endcomment %} {% assign bp_phone = 600 %} {% assign bp_tablet = 1200 %} {% assign bp_desktop = 1800 %} {% assign bp_disp_2k = 2400 %} {% assign phone_img_url = site.directory.large_images | append: "phone/" | append: include.file_name | strip | relative_url %} {% assign tablet_img_url = site.directory.large_images | append: "tablet/" | append: include.file_name | strip | relative_url %} {% assign desktop_img_url = site.directory.large_images | append: "desktop/" | append: include.file_name | strip | relative_url %} {% assign disp_2k_img_url = site.directory.large_images | append: "display_2k/" | append: include.file_name | strip | relative_url %} {% assign default_img_url = site.directory.large_images | append: include.file_name | strip | relative_url %} <img sizes=" (max-width: {{ bp_phone }}px ) {{ bp_phone }}px, (min-width: {{ bp_phone }}px) and (max-width: {{ bp_tablet }}px) {{ bp_tablet }}px, (min-width: {{ bp_tablet }}px) and (max-width: {{ bp_desktop }}px) {{ bp_desktop }}px, (min-width: {{ bp_desktop }}px) and (max-width: {{ bp_disp_2k }}px) {{ bp_disp_2k }}px, 100vw " srcset=" {{ phone_img_url }} {{ bp_phone }}w, {{ tablet_img_url }} {{ bp_tablet }}w, {{ desktop_img_url }} {{ bp_desktop }}w, {{ disp_2k_img_url }} {{ bp_disp_2k }}w, {{ default_img_url }}" src="{{ default_img_url }}" alt="{{ include.alt_text}}" class="bg-jumbotron" >