• Posts
  • RSS
  • ◂◂RSS
  • Contact

  • High DPI images with srcset

    June 9th, 2014
    tech  [html]
    Chrome now supports srcset, which lets you write things like:
      <img src="image-1x.jpg"
              srcset="image-1x.jpg 1x,
                      image-2x.jpg 2x">
    
    That is, you can now send high PI ("retina") images only to browsers that support them. Previously there weren't really good options for this, and you needed to do something dynamic based on the user-agent string, send the high PI image to all devices, do something in javascript, or worse. Now the browser can figure this out.

    I've tweaked my blog software to put in a srcset when it sees an image with src foo.jpg and foo-2x.jpg is present on disk. [1] If your browser supports srcset and you have a screen with extra dots per inch, you should see "2x" overlaid on the image below and it should look extra sharp. Otherwise you should see "1x".

    Really this is something PageSpeed should be able to do automatically...


    [1] Actually, it's a little more complicated, because I've used a few conventions over the years for naming files. It actually looks for foo-2x.EXT if it sees any of foo.EXT, foo-sm.EXT, foo-small.EXT, or foo-tn.EXT. This is a case where a little more consistency would have helped, though it could have been worse.

    Comment via: google plus, facebook

    Recent posts on blogs I like:

    Austerity is Inefficient

    Working on an emergency timetable for regional rail has made it clear how an environment of austerity requires tradeoffs that reduce efficiency. I already talked about how the Swiss electronics before concrete slogan is not about not spending money but ab…

    via Pedestrian Observations February 27, 2021

    Fireside Friday, February 26, 2021

    Fireside this week, but next week we are diving into our long awaited series on pre-modern textile production, though we will be particularly focused on the most important clothing fibers in the Mediterranean world, wool and linen (rather than, say, silk …

    via A Collection of Unmitigated Pedantry February 26, 2021

    The Troubling Ethics of Writing (A Speech from Ancient Sumer)

    (Translated from a transcript of an ancient Sumerian speech by Uruk's most well-respected Scriptological Ethicist) Writing is a profoundly dangerous technology: Access to writing was initially, and still remains, uneven. What's worse, the rich are m…

    via BLOG - Cullen O'Keefe February 15, 2021

    more     (via openring)


  • Posts
  • RSS
  • ◂◂RSS
  • Contact