Implementing a dynamic header image that adjusts its resolution based on the device and pixel density for

After finishing a design in Sketch, I have 3 unique layouts with header images displayed below:

https://i.sstatic.net/fG5T3.png

To ensure the height is consistent and to crop the image appropriately on different devices, I export the following images from Sketch:

dog-header-mobile-1x.png
dog-header-mobile-2x.png
dog-header-mobile-3x.png
dog-header-mobile-4x.png

dog-header-tablet-1x.png
dog-header-tablet-2x.png
dog-header-tablet-3x.png
dog-header-tablet-4x.png

dog-header-desktop-1x.png
dog-header-desktop-2x.png
dog-header-desktop-3x.png
dog-header-desktop-4x.png

I aim to use the appropriate 1x, 2x, 3x, and 4x images for each device. However, with 3 different images for the 3 devices, I'm unsure if I should utilize srcset AND sizes. It feels like a complex way of handling this task and I suspect there might be a simpler method that I am overlooking.

csssketch-3

Answer №1

You have the option to utilize the <picture> tag.

<picture>
    <source
        media="(max-width: 640px)"
        srcset="
            cat-header-mobile-1x.png,
            cat-header-mobile-2x.png 2x,
            cat-header-mobile-3x.png 3x,
            cat-header-mobile-4x.png 4x">
    <source
        media="(max-width: 1280px)"
        srcset="
            cat-header-tablet-1x.png,
            cat-header-tablet-2x.png 2x,
            cat-header-tablet-3x.png 3x,
            cat-header-tablet-4x.png 4x">
    <source
        srcset="
            cat-header-desktop-1x.png,
            cat-header-desktop-2x.png 2x,
            cat-header-desktop-3x.png 3x,
            cat-header-desktop-4x.png 4x">

    <img src="cat-header-desktop-1x.png" alt="Cat">
</picture>

Internet Explorer does not provide support for this, but will revert to using the default img element as a fallback.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Progress bar arrows undergoing transformation in shape

I am currently developing an angular application where I have implemented a progress bar. The CSS code I have used is: CSS: .progressbar { height: 56px; background: lightgray; box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5); anim ...

htmlcssbootstrap-5

Transforming the font landscape with Twitter Bootstrap 3's Glyphicons

I have an unordered list with icons styled using Twitter Bootstrap 3. The Carme font from Google Fonts is used for normal text, and works well in that context. However, when I add icons to the unordered list using BS3, the font-family of that particular ...

htmlcsstwitter-bootstrap

Having trouble with the display of styles on Material UI Cards?

I am currently attempting to customize the default Material UI classes by using useStyles and applying a classname of titleSection. My goal is to make the titleSection bold and in Roboto font, but unfortunately, those styles are not being applied. Below i ...

cssreactjsmaterial-uistyling

What is the best way to eliminate an unassigned margin from my layout?

The content of my css file is as follows: .menu { background-color: black; color: white; height: 100px; opacity: 0.5; } html { background-image: url('image.jpg'); background-size:cover; } Despite the lack of text ...

cssmargins

Bootstrap's (g-) gap feature seems to be malfunctioning, unfortunately

Even though I followed the grid structure from Bootstrap reference, my code doesn't seem to have horizontal gaps, only vertical ones. I know it's not about the version because when I copy and paste the sample code into my HTML file, that code sti ...

htmlcsstwitter-bootstrapfrontend

The CSS border-image feature seems to be malfunctioning on Opera browser

I've been trying to implement border images in my application using CSS, but unfortunately, it doesn't seem to be working in Opera. Does anyone know how I can get Opera to support this feature? ...

csscross-browseropera

Managing broken images within an internet browser

Is there a way to hide the broken image icon, similar to what's shown at '', when no image is displayed? I've set up a comment section using PHP and CSS that allows users to leave comments and upload photos. However, if a user decides t ...

phpcssbroken-image

Styled-components is not recognizing the prop `isActive` on a DOM element in React

In my code, I have an svg component that accepts props like so: import React from 'react'; export default (props) => ( <svg {...props}> <path d="M11.5 16.45l6.364-6.364" fillRule="evenodd" /> </svg> ) ...

javascriptcssreactjsecmascript-6styled-components

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

The secrets of z-index: Ensuring nested elements stay behind their parent element

Check out this demo to see the problem: http://jsfiddle.net/5sqxQ/2/ I am trying to make the sub menu appear below the main menu. I also want to use JavaScript to slide the menu from underneath when hovering over the parent li element. I don't real ...

cssnestedz-index

Each container has its own div counter

Help needed to complete this code. The task is to count the number of .resp-containers in each container separately. Then, based on that count, assign a corresponding class to each element within the containers. Check out the code here $(document).ready(f ...

javascriptjqueryhtmlcss

What is the best way to extract a single image from JSON data using AngularJS?

Using ng-repeat in HTML, how can I display only a single image instead of all images? <img class="size" ng-src="{{image.image}}" /> In CSS, I aim to define the size of the image. .size { margin-left:0.3em; width:11em; height:11em; border:0.4em sol ...

htmlcssjsonangularjs

Creating a subtle vanishing popup dialog using only CSS (no reliance on jQuery)

Is there a way to add a fade effect to my simple pop-up image using CSS? I've tried various transition properties, but nothing seems to work. Any suggestions would be appreciated. Thanks! ...

htmlcsspopupfadetransition

CSS: The grid-column and grid-row properties are malfunctioning

I'd like to create a grid with one column containing multiple rows of text, and the second column having an equal number of input rows. My initial plan was to create a grid where the number of rows equals the number of lines of text, and then define t ...

htmlcsscss-grid

The specified font is not loading despite being correctly defined

I have a font stored locally in resources/fonts/ and I'm correctly linking to it, but for some reason, it's not loading. Here is the <style> section in my html: <style> @font-face{ font-family:"franklin_gothic_condensed"; ...

htmlcssfonts

Combining element.scrollIntoView and scroll listener for smooth scrolling by using JavaScript

Can element.scrollIntoView and a "scroll" event listener be used simultaneously? I'm trying to create code that checks if the user has scrolled past a certain element, and if so, automatically scrolls smoothly to the next section. I attempted to achi ...

javascripthtmlcss

What is the best way to create rounded edges for a spinning spinner using CSS?

Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect? .loader { position: relative; border: ...

jqueryhtmlcsscss-transitionsloader

Issue with jQuery's addClass() function not functioning properly on Internet Explorer versions 8, 9, and possibly others as well

Here is some basic HTML code: <div class="stuff-choice"> <div class="item a"> <label class="signup-checkbox"> <input type="checkbox" value="a" name="stuff[a][]" id="stuff_choice_" class="things"> <strong>A&l ...

jquerycssinternet-explorer

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

I am currently working on an Angular 5 project with an assets folder where I store my common CSS file and reference it in index.html. I now plan to create a new folder called "sasstyles" and place some .scss files there. When I compile or run the project ...

cssangularjsangularsass

What is the best way to apply styling to a kendo-grid-column?

Utilizing the kendo-grid in my project serves multiple purposes. Within one of the cells, I aim to incorporate an input TextBox like so: <kendo-grid-column field="value" title="{{l('Value')}}" width="200"></kendo-grid-column> It is ...

cssangularkendo-grid