--- title: "How best to serve images to high-density screens" publication: "Frontend Focus" issue: 495 published_at: "2021-06-16" canonical_url: "https://frontendfoc.us/issues/495" --- Plus Berners-Lee joins in with the NFT fun. | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​495 — June 16, 2021 | [Read on the web](https://frontendfoc.us/issues/495) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1623850825/resl4t1qrjm7ngtyfxks.png)](https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/) [When CSS Isn’t Enough: JavaScript Requirements For Accessible Components](https://www.smashingmagazine.com/2021/06/css-javascript-requirements-accessible-components/) — Stephanie Eckles looks at how components such as tooltips, modals, tabs, carousels, and dropdown menus often require more than just CSS (even when 'pure CSS' solutions are technically possible), especially to ensure accessibility. Smashing Magazine [Serving Sharp Images to High Density Screens](https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/) — A majority of displays now have device to pixel ratios (DPR) higher than 1 (e.g. 'Retina' screens) — so what’s the best way to handle images in such high-density situations? Here’s a solid look at how to do just that (covering compression, delivery, etc.) Jake Archibald [![\](https://copm.s3.amazonaws.com/5527b4f2.jpg)](https://frontendmasters.com/courses/complete-react-v6/?utm_source=frontendfocus&utm_medium=email&utm_campaign=reactv6) [New & Updated Course: Complete Intro to React v6 with Brian Holt](https://frontendmasters.com/courses/complete-react-v6/?utm_source=frontendfocus&utm_medium=email&utm_campaign=reactv6) — Learn to build real-world applications using modern React. Much more than an intro, you’ll start from the ground up, getting to using the latest features in React, including hooks, effects, context, and portals, plus piecing together tools from the entire React ecosystem. Frontend Masters sponsor ▶[Design for Safari 15](https://developer.apple.com/videos/play/wwdc2021/10029/) — Apple has shared a half hour video, along with related resources, where Jen Simmons and Myles Maxfield covered all the upcoming Safari changes we saw in last week's WWDC keynote in more detail. Worth a watch. Apple [Introducing Aurora: A Collaboration Between Chrome and Open-Source Web Frameworks & Tools](https://web.dev/introducing-aurora/) — A new initiative that aims to “deliver the best user experience possible for production apps regardless of the browser you’re rendering in”. Early days, but this post outlines the overall goals. Panicker, Osmani, Djirdeh (Google) **⚡️ Quick bits:** - What if you could set whether you're ok with cookies or not at a browser level? [This draft spec is proposing just that](https://www.dataprotectioncontrol.org/spec/) — could this make cookie banners obsolete? - Hmmm, the creator of the world wide web, Sir Tim Berners-Lee, is [selling off the original code used to create the modern internet as an NFT](https://www.bbc.co.uk/news/technology-57474504). The [auction](https://www.sothebys.com/en/digital-catalogues/this-changed-everything?locale=en) takes place later this month. - Got Edge on your Mac? Well, [you won't have to use Microsoft AutoUpdate to get new versions any more](https://techcommunity.microsoft.com/t5/articles/new-update-experience-for-mac-available-in-edge-dev/m-p/2200983). Edge will update itself going forward. - Amazon is [the latest to block Google's FLoC](https://digiday.com/media/amazon-is-blocking-googles-floc-and-that-could-seriously-weaken-the-fledgling-tracking-system/). - Here's a look at [how the BBC approach development to ensure accessibility](https://bbc.github.io/accessibility-news-and-you/guides/development-approach-for-accessible-front-end-code.html) (and meet the corporation's a11y guidelines). - The performance.now() event is returning later this year for an actual in-person conference in Amsterdam. [Details here](https://perfnow.nl). - WebExpo is also [returning for an IRL event](https://www.webexpo.net/prague2021), this September in Prague. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1623844009/uglhzcmtstpqnoyaktnv.png)](https://www.smashingmagazine.com/2021/06/web-design-done-well-audio/) [Web Design Done Well: Making Use Of Audio](https://www.smashingmagazine.com/2021/06/web-design-done-well-audio/) — Audio on the web can often be a tricky thing to get right. Here’s a showcase of sites that get it right, nailing the user experience. Frederick O'Brien [Google Chrome Ends Its War On Address Bar URLs—for Now, At Least](https://arstechnica.com/gadgets/2021/06/google-chrome-ends-its-war-on-address-bar-urls-for-now-at-least/) — Yep, it appears as though Google is [abandoning plans](https://bugs.chromium.org/p/chromium/issues/detail?id=1090393#c75) to display a ‘simplified’ domain in the Omnibox. Ron Amadeo [CSS System Colors](https://blog.jim-nielsen.com/2021/css-system-colors/) — It’s not got universal support, but did you know you can use [a range of keywords](https://drafts.csswg.org/css-color/#css-system-colors) in CSS to set color values that are dependent on your system preferences. Jim digs in. Jim Nielsen [An Angular Data Grid That Makes Life Easy Does Exist! Give It a Try](https://www.telerik.com/campaigns/kendo-ui/free-trial-angular-data-grid-1?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-angular-ui-easy-grid&utm_content=sponsored-link) — Get the performance, features, and UI users demand in a super customizable grid component -- and enjoy the experience. Progress Kendo UI for Angular sponsor [Three Frontend Auditing Tools I Discovered Recently](https://www.smashingmagazine.com/2021/06/three-frontend-auditing-tools/) — Some lesser-known tools to help you achieve a faster website. Stefan Judis [Thumbnail Hover Effect with SVG Filters](https://tympanus.net/codrops/2021/06/09/thumbnail-hover-effect-with-svg-filters/) — A simple thumbnail hover effect with a caption slide out animation and an SVG filter distortion on the image. Mary Lou [Improving Contrast in Microsoft Edge DevTools: A Bugfix Case Study](https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/) Microsoft Edge Team [Making Tables With Sticky Header and Footers Got a Bit Easier](https://css-tricks.com/making-tables-with-sticky-header-and-footers-got-a-bit-easier/) Chris Coyier Jobs [Frontend Developer at MIT (Remote, Contract to Full-Time)](https://www.linkedin.com/jobs/view/2572498097) — Are you a frontend developer with React and UX skills? Join our team at MIT building a new platform for the energy industry. MIT Energy Initiative [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team 🧑‍💻 Got a job listing to share? _[Here's how](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [HTTP/3 Check: See If A Server Supports HTTP/3](https://http3check.net/) — Online tool to check if a server supports HTTP/3, based on the QUIC protocol, which you can [read about here](https://quicwg.org/). LiteSpeed [![\](https://res.cloudinary.com/cpress/image/upload/v1623843671/auptdypmgejvxnzisy2y.png)](https://vivirenremoto.github.io/doomcaptcha/) [DOOM Captcha: Captchas Don't Have to Be Boring](https://vivirenremoto.github.io/doomcaptcha/) — Just a bit of fun - _even John Carmack himself liked it_. Take out a few classic DOOM enemies to complete the Captcha. Miquel Camps Orteza [Uniform CSS](https://uniformcss.com/) — A fully customizable utility-first CSS framework built in Sass. Jin Su Park [Market: A Collection of Nearly 400 'CC0' 3D Assets](https://market.pmnd.rs/) — …for React Three Fiber or Three.js. Poimandres [Easy, Fast and Seamless UAT and User Feedback with Bugherd](https://srv.buysellads.com/ads/long/x/THTBXEITTTTTTT6CKZ4CTTTTTTT6E3NHKTTTTTTTAT2K6YTTTTTTTY7WFHSCO7ZPVJ7H62Q7QTBDPAL6KMMHERP453UT) BugHerd sponsor [Loopple: A Drag-and-Drop Tool to Create Bootstrap-Based Dashboards](https://www.loopple.com/) Loopple [Tailwindo: Convert Your Bootstrap CSS to Tailwind CSS](https://awssat.com/opensource/tailwindo/1_introduction.html) Awssat [Directionally Aware CSS Buttons with React](https://codepen.io/jh3y/pen/XWMobqx) Jhey Tompkins codepen 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)