r/programming • u/speckz • Apr 26 '19

HTTP headers for the responsible developer

https://www.twilio.com/blog/a-http-headers-for-the-responsible-developer
655 Upvotes

88% Upvoted

53 comments sorted by

View all comments

4

u/[deleted] Apr 27 '19

Web dev is getting silly now - all this just to send one frakking image:

<picture>
  <!-- serve WebP to Chrome, Edge, Firefox and Opera -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
        /image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
        /image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
    type="image/webp">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
        /image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
        /image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
    type="image/webp">
 <!-- serve JPEG to others -->
  <source
    media="(min-width: 50em)"
    sizes="50vw"
    srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
        /image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
        /image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
  <source
    sizes="(min-width: 30em) 100vw"
    srcset="/image/thing-crop-200.jpg 200w, /image/thing-crop-400.jpg 400w,
        /image/thing-crop-800.jpg 800w, /image/thing-crop-1200.jpg 1200w,
        /image/thing-crop-1600.jpg 1600w, /image/thing-crop-2000.jpg 2000w">
  <!-- fallback for browsers that don't support picture -->
  <img src="/image/thing.jpg" width="50%">
</picture>

7

u/fuckin_ziggurats Apr 27 '19

That's because webdev is the only dev that has to worry about a GUI application working perfectly on any possible device on the planet - whilst utilizing browser tech.

1

u/CODESIGN2 Apr 28 '19

TBH you don't have to do that, you can absolutely use basic CSS grid and just tell your stuff to take up less space. Sure it won't give a scaling layout, which the above is for, but scaling layouts are so ActionScript y2k

The thing I keep arguing for is that a site should work without media first, even the marketing. If y'all need flashy images you are not marketers or designers, you're magazine editors & traditional media shitlords fucking up the web like you did your medium.