Implementing full-width responsive background images with srcset and lazy loading for optimal performance

Question

Implementing full-width responsive background images with srcset and lazy loading for optimal performance

I'm currently developing a website with a striking layout featuring 'hero' panels that cascade down the home page, showcasing text overlaid on captivating background images.

My goal is to utilize inline images with srcset and sizes attributes in order for the browser to select the most suitable image based on screen size rather than simply inserting the largest image possible as a background-image and scaling it down for smaller screens.

At this point, here's what my code looks like:

<img 
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
  srcset="/img/trekking_320.jpg 320w,
          /img/trekking_480.jpg 480w,
          /img/trekking_600.jpg 600w,
          /img/trekking_768.jpg 768w,
          /img/trekking_960.jpg 960w" 
  data-sizes="100vw"
  class="lazyload"
>

along with CSS:

img {
  position: absolute;
  height: 100%; width: auto;
}

with overflow:hidden set on the container element.

The image heights range from 320px to 768px, then 480px up to 960px, followed by a max-height of 600px beyond that.

I've prepared a Codepen demonstration to showcase the issue. While everything functions smoothly on high-resolution screens across various devices (mobile, tablet, laptop) and even on standard dpi displays up to 768px wide, there seems to be an issue with the images not filling the screen past that point.

Given the circumstances, I'm left pondering if it's feasible to achieve all the mentioned requirements outlined in the title. Am I heading in the right direction, or should I explore an entirely different approach?

html css responsive-design image-size srcset

Answer 1

Answer №1

Avoid misusing <img /> tags for background images and instead utilize CSS background-image (along with background-size: cover or fill for a responsive appearance). Employ the image-set function to define various images for different device screen resolutions:

As of August 2021, note that image-set is unsupported by Firefox/Gecko, Internet Explorer, and Edge - exclusively compatible with WebKit-based browsers like Chrome, Safari, and Opera. More details can be found at:

body {
    background-image: -webkit-image-set(
        url('path/to/image') 1x,
        url('path/to/high-res-image') 2x,
        etc...
    );
    background-size: cover;
}

Answer 2

Avoid misusing <img /> tags for background images and instead utilize CSS background-image (along with background-size: cover or fill for a responsive appearance). Employ the image-set function to define various images for different device screen resolutions:

As of August 2021, note that image-set is unsupported by Firefox/Gecko, Internet Explorer, and Edge - exclusively compatible with WebKit-based browsers like Chrome, Safari, and Opera. More details can be found at:

body {
    background-image: -webkit-image-set(
        url('path/to/image') 1x,
        url('path/to/high-res-image') 2x,
        etc...
    );
    background-size: cover;
}

Answer 3

Answer №2

After struggling with this issue myself, I was surprised to discover that even in the year 2024, there is still no straightforward solution for serving smaller background images on smaller screens. While the image-set property is a step in the right direction, it falls short due to its limitation to the pixel density descriptor (x) and lack of awareness of the screen's width (unlike the <img> srcset w descriptor). Inline media queries in an element's style attribute are not possible either. Resorting to an absolutely positioned <img> or <picture> for a background image can be cumbersome and make it challenging to cover a resizable box effectively. The workaround I've devised involves generating a separate <style> block for the desired <header>:

def banner_background(page, widths=[1200,800], switch=900, ratio=2.33)
    banner = page.images.banner.first
    style = ""
    if banner.present?
        style += "article > header {"
        style += "background-image: url(\"#{url_for(banner.image_file.variant(resize_to_fill: [widths[0], widths[0]/ratio]))}\");"
        style += "} @media (max-width: #{switch}px) { article > header {"
        style += "background-image: url(\"#{url_for(banner.image_file.variant(resize_to_fill: [widths[1], widths[1]/ratio]))}\");"
        style += "}}"
    end
    style.html_safe
end

<style><%= banner_background(page) %></style>
<header>
...

While this approach may seem awkward, it does offer a significant advantage over other methods - it works efficiently and reduces the download size for my header backgrounds by half, saving about 60 kB per image. Although plans for w and h support in image-set are in place, until widespread adoption, we're left grappling with workarounds like this one. If anyone has a better suggestion, I'm all ears!

Answer 4

After struggling with this issue myself, I was surprised to discover that even in the year 2024, there is still no straightforward solution for serving smaller background images on smaller screens. While the image-set property is a step in the right direction, it falls short due to its limitation to the pixel density descriptor (x) and lack of awareness of the screen's width (unlike the <img> srcset w descriptor). Inline media queries in an element's style attribute are not possible either. Resorting to an absolutely positioned <img> or <picture> for a background image can be cumbersome and make it challenging to cover a resizable box effectively. The workaround I've devised involves generating a separate <style> block for the desired <header>:

def banner_background(page, widths=[1200,800], switch=900, ratio=2.33)
    banner = page.images.banner.first
    style = ""
    if banner.present?
        style += "article > header {"
        style += "background-image: url(\"#{url_for(banner.image_file.variant(resize_to_fill: [widths[0], widths[0]/ratio]))}\");"
        style += "} @media (max-width: #{switch}px) { article > header {"
        style += "background-image: url(\"#{url_for(banner.image_file.variant(resize_to_fill: [widths[1], widths[1]/ratio]))}\");"
        style += "}}"
    end
    style.html_safe
end

<style><%= banner_background(page) %></style>
<header>
...

While this approach may seem awkward, it does offer a significant advantage over other methods - it works efficiently and reduces the download size for my header backgrounds by half, saving about 60 kB per image. Although plans for w and h support in image-set are in place, until widespread adoption, we're left grappling with workarounds like this one. If anyone has a better suggestion, I'm all ears!

Implementing full-width responsive background images with srcset and lazy loading for optimal performance

Answer №1

Answer №2

Similar questions

What is the best way to eliminate the default background color applied to the body automatically?

Ways to slightly boost the default font-size values when using wicked-pdf

Tab button that can be easily printed

Ways to make JavaScript cycle through a set of images

Maintain the structure of the slick slider during transitions

Previewing Jquery script with live interactive effect using Javascript

I am struggling to retrieve information from HTML elements using the GET method in Node.js and MongoDB

Can a class be passed to the binding attribute in Angular framework?

Tips for concealing a parent element while inside a span with jquery

Is there a different method to position an element in the center of the webpage?

Ways to incorporate bold, unbold, and italic styles into a single heading text within the same line using Bootstrap 4

Text To Appear Gradually When Button Is Clicked

Modifying webpage code

Unable to move up and down in my iframe

How can I exclude specific lines from an XML file using filters?

Scroll sideways with AJAX content replacement

Guide: Previewing uploaded images with HTML and jQuery, including file names

Issues with properly triggering re-clicking events in AngularJS when using Bootstrap modal

Is there a way to prevent my cell from resizing during the initiation of a jQuery animate effect?

Tips on preventing the constant shifting of my webpage div elements when resizing the browser