Questions tagged [responsive-images]

Responsive-images is the part of Responsive Web Design (RWD) dealing specifically with images on the web to provide optimal experiences across a wide range of devices based on screen size, platform, and orientation.

518 questions
5
votes
3 answers

How to make an image auto resize to fit browser window with relation to height

I am trying to make an image fit the browser window in relation to its height and respond dynamically to window size. I need the image aspect ratio to stay the same but the image can be ,larger than its originally resolution if viewed on large…
Breageside
  • 133
  • 1
  • 2
  • 8
5
votes
1 answer

HTML srcset - when to use the x descriptor?

I'm reading up on responsive images in HTML5 and have a question. When would you use the x-descriptor? If for example you have different resolution versions of the same image why would you ever not use the w-descriptor? As I understand it if you…
5
votes
2 answers

Background Cover not working on Mobile Devices

I'm trying to create a website that has fullpage background images. I have gotten it work on desktop versions but when I push it to github and view it on my phone the background image is just a long image at the top. I'm using the background-size:…
4
votes
0 answers

What if I preload a lazily loaded image?

I have a mobile-only image. The problem is that with the default loading strategy (eager) the image is getting loaded even on desktops or larger screens. But the image is important for mobile devices only, and at the same time, it should be…
4
votes
2 answers

responsive images with srcset, sizes, media-queries - Prevent loading huge images for higher pixel density

I used picture element for responsive images in different sizes per viewport a long time. it worked fine, but now I am forced to switch over to responsive with srcset and sizes and I try to rewrite my picture element to the IMG-style. After…
Radon8472
  • 4,285
  • 1
  • 33
  • 41
4
votes
4 answers

How to specify the width and height of an image while keeping it responsive at the same time?

While using srcset for responsive images, the code looks something like this: a dog So, now when I am running lighthouse for that page, then it is saying…
jitesh
  • 53
  • 5
4
votes
1 answer

In Chrome the currentSrc of an img element is sometimes empty. How can I prevent this?

UPDATE: I just found some more info. It seems that in Chrome, the currentSrc of the image will often be empty, whereas in Firefox, the URL is always correct. Is the JS trying to access currentSrc before it's available? Is there a way to prevent…
4
votes
1 answer

WebP fallback images not loading

I'm using a tag to set a responsive image with WebP support. I'm pulling a desktop image and mobile image URLs that have both .web and .jpg files. for each media, I'm giving the .webp version and the .jpg version. What I expect is that if…
AssafA
  • 41
  • 4
4
votes
1 answer

Chrome dont recognize webp source in picture tag

I'm generating picture html tag with set of variants of image but when I opening it in chrome, browser still getting default png image I tried different sets of srcset and sizes but no luck
Oleg Shakhov
  • 426
  • 6
  • 27
4
votes
5 answers

Understanding srcset and sizes in combination with HiDPI monitors

I have been into CSS for quite a while now, but srcset and sizes for the image element confuse me. Here is an example that I thought would work. Background image flowers
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
4
votes
1 answer
4
votes
2 answers

Responsive images using srcset/sizes isn't respected by Safari iOS

I have the following which works fine on normal and hiDPI…
George Katsanos
  • 13,524
  • 16
  • 62
  • 98
4
votes
1 answer

Perfect Image Container: Centered, Aspect Ratio, Shunk and Grown to Fit

From other questions here on SO, I've come to the point where I can maintain the aspect ratio an image, center it in a container both horizontally and vertically, and make it shrink to fit the container. Almost there!!! What's wrong? I'd like to…
Assimilater
  • 944
  • 14
  • 33
4
votes
2 answers

Responsive fake/placeholder image

Is it possible to fake a empty image in html that behaves like a real one but doesn't exist? For example i have a responsive column in which should be a 200x150px image (which gets styled: width: 100%; height: auto; because its responsive) ... But…
GDY
  • 2,872
  • 1
  • 24
  • 44
4
votes
1 answer

Why is srcset causing images to download multiple times?

I have the following image tag using the srcset and sizes attributes to insert a responsive image:
sea_monster
  • 659
  • 3
  • 8
  • 18
1 2
3
34 35