5 ms·

I can't really take a blog post seriously that claims to introduce responsive design, yet still uses pixel defined sizes like it's 2005. 1200px is nothing on a

I can't really take a blog post seriously that claims to introduce responsive design, yet still uses pixel defined sizes like it's 2005. 1200px is nothing on a 4k monitor. In my opinion your best bet is to forget about all this px-fuckery and drop the `<img>` all together. Use a `<div>` with a `background-image`, and use media queries to control how the `background-image` is cropped, zoomed, or whatevered. In general, `<img>` is a huge pain in the ass. It seems to defy all known layout rules and models, and I pretty much never want it to take up the x*y pixels that the image source is. I want it to take 100% of the width, or contain and crop it in 100% of the height, but all of this is notoriously annoying with an `<img>` tag. Seriously, use a `div` with a `background-image`. The semantics of having an image in an `<img>` tag don't matter, no one cares about it and your users won't notice it.

Santosh83 5y ago
Googlebot will care about it, especially for a site that is primarily images (as opposed to images being merely decorative)?
rhdunn 5y ago
If you are using CSS, you will still have CSS media queries to say "load an image of this size when on a device with this maximum/minimum size" so you can send smaller sized images to devices with smaller screens. Using the HTML markup allows the browser to load the images sooner instead of having to wait for the CSS to be downloaded, parsed, and evaluated. And there is nothing preventing you from selecting a larger image on a 2K/4K display if you have it, or using CSS to provide additional cropping, zooming, etc.
have_faith 5y ago
CSS object-fit and object-position do the same thing for img tags.
- bruce343434 5y ago
  I've tried those but I just can't get it to work the way I want for some reason, while never having an issue with background-image.
innocenat 5y ago
Doesn't CSS pixel scale based on your monitor scale setting? 1200px on a 4k monitor with 2x scaling ought to be roughly the same size as 1200px on FHD monitor with 1x scaling. Unless you are talking about source image, then it's intrinsics size. And as other have said, use object-fit.
- foxpurple 5y ago
  That’s exactly what it does.
- bruce343434 5y ago
  I don't buy it. Old websites that have handcrafted tables, px-perfect to fit fullscreen on a vga monitor look really, really narrow and small on my screen.
  - innocenat 5y ago
    Of course? If it's for 768px and your post-scaled resolution is 1920px then of course it's narrow and small. The point is it should be the same on 2K monitor with 1x scaling AND 4k monitor with 2x scaling.
chrisan 5y ago
General curiosity of mine for 4K users. Do you actually want all of the web delivered to you in 4K? I get movies/games, but day to day browsing seems like just extra slowness?
chiefalchemist 5y ago
Actually afaik, there are accessibility issues with that solution. Instead, stick with img and use object-fit instead. https://css-tricks.com/almanac/properties/o/object-fit/ https://css-tricks.com/almanac/properties/o/object-fit/ I'd also suggest reading this. Having to write ultra-complicated media queries (width + resolution, etc.) feels friction-y. Instead, use sizes and scrset and the browser will take care of the rest. https://ericportis.com/posts/2014/srcset-sizes/ https://ericportis.com/posts/2014/srcset-sizes/
- bruce343434 5y ago
  What accessibility issues? that a _blind_ person might not _see_ that it's an image? Who really cares? And don't just go "oh bruce you're a bad guy you don't care about aria for blind people" but actually think about it. Images on the web are of 0 value to blind people. If it's really important to your article, add a subscript to the image. (which a screenreader will gladly read)
leephillips 5y ago
Pixel in CSS is a CSS pixel, which your browser will translate to about 1/96 inches. So 1200px is the same physical length on an old 72dpi screen, a 4k monitor, or the quark-scale resolution displays of the future.
- bruce343434 5y ago
  I don't buy it. Old websites that have handcrafted tables, px-perfect to fit fullscreen on a vga monitor look really, really narrow and small on my screen.
  - leephillips 5y ago
    Someone in this thread quoted the CSS spec. You don’t have to “buy it”. A CSS pixel is a unit of length, like cm. It’s not a pixel. Of course that’s confusing. It’s supposed to be. It’s CSS.
    - bruce343434 5y ago
      I get that but then perhaps my browser doesn't implement the spec correctly. Because I know what I see. Tiny pages with tiny text that would have looked fine on my 4:3 crt emac years ago.
      - leephillips 5y ago
        There are more things that come in to play, such as the resolution that X11 thinks your display has. Just zoom the page in. What’s important is the relative sizes of things on the page, not how big the page looks.
ghusbands 5y ago
CSS px are not screen pixels. From the spec: "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch)." [1] [1] https://www.w3.org/TR/css-values-3/#absolute-lengths https://www.w3.org/TR/css-values-3/#absolute-lengths
- bruce343434 5y ago
  I don't buy it. Old websites that have handcrafted tables, px-perfect to fit fullscreen on a vga monitor look really, really narrow and small on my screen. I'll just use cm, thanks

Santosh83 5y ago

Googlebot will care about it, especially for a site that is primarily images (as opposed to images being merely decorative)?

rhdunn 5y ago

If you are using CSS, you will still have CSS media queries to say "load an image of this size when on a device with this maximum/minimum size" so you can send smaller sized images to devices with smaller screens. Using the HTML markup allows the browser to load the images sooner instead of having to wait for the CSS to be downloaded, parsed, and evaluated. And there is nothing preventing you from selecting a larger image on a 2K/4K display if you have it, or using CSS to provide additional cropping, zooming, etc.

have_faith 5y ago

CSS object-fit and object-position do the same thing for img tags.

bruce343434 5y ago
I've tried those but I just can't get it to work the way I want for some reason, while never having an issue with background-image.

innocenat 5y ago

Doesn't CSS pixel scale based on your monitor scale setting? 1200px on a 4k monitor with 2x scaling ought to be roughly the same size as 1200px on FHD monitor with 1x scaling. Unless you are talking about source image, then it's intrinsics size. And as other have said, use object-fit.

foxpurple 5y ago
That’s exactly what it does.
bruce343434 5y ago
I don't buy it. Old websites that have handcrafted tables, px-perfect to fit fullscreen on a vga monitor look really, really narrow and small on my screen.
- innocenat 5y ago
  Of course? If it's for 768px and your post-scaled resolution is 1920px then of course it's narrow and small. The point is it should be the same on 2K monitor with 1x scaling AND 4k monitor with 2x scaling.

chrisan 5y ago

General curiosity of mine for 4K users. Do you actually want all of the web delivered to you in 4K? I get movies/games, but day to day browsing seems like just extra slowness?

chiefalchemist 5y ago

Actually afaik, there are accessibility issues with that solution. Instead, stick with img and use object-fit instead. https://css-tricks.com/almanac/properties/o/object-fit/ https://css-tricks.com/almanac/properties/o/object-fit/ I'd also suggest reading this. Having to write ultra-complicated media queries (width + resolution, etc.) feels friction-y. Instead, use sizes and scrset and the browser will take care of the rest. https://ericportis.com/posts/2014/srcset-sizes/ https://ericportis.com/posts/2014/srcset-sizes/

bruce343434 5y ago
What accessibility issues? that a _blind_ person might not _see_ that it's an image? Who really cares? And don't just go "oh bruce you're a bad guy you don't care about aria for blind people" but actually think about it. Images on the web are of 0 value to blind people. If it's really important to your article, add a subscript to the image. (which a screenreader will gladly read)

leephillips 5y ago

Pixel in CSS is a CSS pixel, which your browser will translate to about 1/96 inches. So 1200px is the same physical length on an old 72dpi screen, a 4k monitor, or the quark-scale resolution displays of the future.

bruce343434 5y ago
I don't buy it. Old websites that have handcrafted tables, px-perfect to fit fullscreen on a vga monitor look really, really narrow and small on my screen.
- leephillips 5y ago
  Someone in this thread quoted the CSS spec. You don’t have to “buy it”. A CSS pixel is a unit of length, like cm. It’s not a pixel. Of course that’s confusing. It’s supposed to be. It’s CSS.
  - bruce343434 5y ago
    I get that but then perhaps my browser doesn't implement the spec correctly. Because I know what I see. Tiny pages with tiny text that would have looked fine on my 4:3 crt emac years ago.
    - leephillips 5y ago
      There are more things that come in to play, such as the resolution that X11 thinks your display has. Just zoom the page in. What’s important is the relative sizes of things on the page, not how big the page looks.

ghusbands 5y ago

CSS px are not screen pixels. From the spec: "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch)." [1] [1] https://www.w3.org/TR/css-values-3/#absolute-lengths https://www.w3.org/TR/css-values-3/#absolute-lengths

bruce343434 5y ago
I don't buy it. Old websites that have handcrafted tables, px-perfect to fit fullscreen on a vga monitor look really, really narrow and small on my screen. I'll just use cm, thanks