Responsive Image Dispute and Tourists – Analogy

Jason explains the root of the problem and why no one has been able to devise a solution that makes everyone happy yet. The browsers (in their awesome drive to make browsing faster) are prefetching images and developers want to only use one image based on criteria the browser doesn't know until the layout is calculated.

Echoing some other thoughts and comments I’ve read, but writing it out so I can grasp the details.

What about the updated image format that by default only loads the smallest embedded size. Then once the browser finishes layout and knows what size the image is rendered at (and also resolution) it can update the request for an image that’s embedded in the file that best fits or matches the requirements. This by default would load the smaller part of the file and display something for the prefetching browsers and “enhance” the image as it can. I can see photo editing software like photoshop (if that’s your poison of choice) to have extra settings for creating this new image type – resolutions to include, breakpoints to be set, etc. The we aren’t managing multiple images – it’d be one file that included all the desired sizes. Very much like progressive images and old gifs. Mobile browsers and old fallback browsers would display the smallest (or first) specified img (although this could also be determined in the meta data of the file – which subimg would be the default). This may end up in users with high BW/large screens to download two subimages rather than only the high res image, but remember that the first one would be much smaller in size and if they can handle it the big one the big and smallest together shouldn’t be too heavy. The page would also load very fast as the first image to load would be much faster than loading the large image initially whatever the bandwidth. Then browsers and image compression engineers can get together and figure out a communication method between the browsers and images via metadata and requests while developers/designers can just choose the proper settings as they save the files (or software can have standard-best-practice defaults) and focus on creating websites rather than having to understand how all browsers and devices will load and present content.

Also – Amen to @Brian Gallagher: “Who are we to make the distinction between what the users NEEDS to see, and what the user WANTS to see?”

Embedded Link

» The real conflict behind and @srcset Cloud Four Blog
Some people do a lot of research before they travel. They read guidebooks. They like to know what they are going to do before they get there. Others want to experience the new place and let the serend…

This entry was posted in blog and tagged , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.
  • Recent Posts

    Adactio: Journal—Instantiation

    There needs to be a cultural change in how we approach building for the web. Yes, some of the tools we choose are part of the problem, but the bigger problem is that performance still isn’t being recognised as the most important factor in how people feel about websites (and by extension, the web). This […]

    human_time_diff « WordPress Codex

    Determines the difference between two timestamps.The difference is returned in a human readable format such as “1 hour”, “5 mins”, “2 days”. Source: Function Reference/human time diff « WordPress Codex Used this little known, but nice gem today. It’s a core WordPress function that gives human relative time from any other datetime in “U” format. […]

    logo

    Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

    I recently hit upon a way of thinking that made me realise that CSS does include logic, and the fact that it’s rarely viewed as such is probably also why we end up with such poor CSS at all.I found myself explaining compound selectors to a client as being made up of the subject—the thing […]

    Screenshot-2013-11-27-14.20.16

    Add Links to Twitter Mentions, Hashtags, and URLs with PHP

    This gem helped me out today as I was working with the Twitter API to create a custom WordPress widget. I was about to do exactly this and was not looking forward to it, luckily I did a quick search and found this webtips post. Thanks! If you’re using the Twitter v1.1 API to fetch […]

    regex101.com

    Online regex tester and debugger: JavaScript, Python, PHP, and PCRE

    Stumbled on a great regex tool today. An explanation of your regex will be automatically generated as you type. Detailed match information will be displayed here automatically. via Online regex tester and debugger: JavaScript, Python, PHP, and PCRE. Tweet

    CSS Dig

    A chrome extension for analyzing your CSS. Check your properties (and reuse – are they following DRY principles?) and your CSS selectors (and their specificity). Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with. Take a look at all your CSS […]

css.php