Tags: images
165
Sunday, July 1st, 2018
Sunday, June 17th, 2018
Detecting image requests in service workers
In Going Offline, I dive into the many different ways you can use a service worker to handle requests. You can filter by the URL, for example; treating requests for pages under /blog or /articles differently from other requests. Or you can filter by file type. That way, you can treat requests for, say, images very differently to requests for HTML pages.
One of the ways to check what kind of request you’re dealing with is to see what’s in the accept header. Here’s how I show the test for HTML pages:
if (request.headers.get('Accept').includes('text/html')) {
// Handle your page requests here.
}
So, logically enough, I show the same technique for detecting image requests:
if (request.headers.get('Accept').includes('image')) {
// Handle your image requests here.
}
That should catch any files that have image in the request’s accept header, like image/png or image/jpeg or image/svg+xml and so on.
But there’s a problem. Both Safari and Firefox now use a much broader accept header: */*
My if statement evaluates to false in those browsers. Sebastian Eberlein wrote about his workaround for this issue, which involves looking at file extensions instead:
if (request.url.match(/\.(jpe?g|png|gif|svg)$/)) {
// Handle your image requests here.
}
So consider this post a patch for chapter five of Going Offline (page 68 specifically). Wherever you see:
if (request.headers.get('Accept').includes('image'))
Swap it out for:
if (request.url.match(/\.(jpe?g|png|gif|svg)$/))
And feel to add any other image file extensions (like webp) in there too.
Wednesday, May 23rd, 2018
The Tarot Cards Of Tech
A useful set of questions to ask on any project, shuffled and dealt to you.
They’ll not only help you foresee unintended consequences—they can also reveal opportunities for positive change.
All of the content in images. Not a single image has alternative text. If only they had asked themselves:
When you picture your user base, who is excluded? If they used your product, what would their experience be like?
Sunday, April 15th, 2018
Keep Pixelated Images Pixelated as They Scale | CSS-Tricks
This is a potentially useful bit of CSS that I had no idea existed.
Friday, April 6th, 2018
Lazy Loading Images and Video | Web Fundamentals | Google Developers
Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.
Wednesday, April 4th, 2018
Carbon
This service could be quite handy if you’re making a presentation that involves showing code—it generates syntax-highlighted images of code.
Tuesday, March 27th, 2018
Compressive Images Revisited - TimKadlec.com
Tim explains why that neat trick of making a really big JPEG with quality set to 0% is no longer necessary, and how the savings you make in bandwidth with that technique are nullified by the expense of the memory footprint needed.
Monday, March 12th, 2018
Swapping Images with the Sizes Attribute | Filament Group, Inc., Boston, MA
The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the sizes attribute of the img element.
Wednesday, March 7th, 2018
Boxy SVG
This is impressive—a fully featured graphics app for creating SVGS right in your browser.
Metaballs
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.
Here’s the maths behind the metaballs (implemented in SVG).
Friday, February 9th, 2018
Href Tools - Free online web tools
Handy web-based tools—compress HTML, CSS, and JavaScript, and convert files from one format to another.
Wednesday, November 29th, 2017
edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
These are lovely little SVGs of website logos that are yours for the taking. And if you want to contribute an icon to the collection, go for it …as long as it’s less than 1024 bytes (most of these are waaay less).
Monday, November 27th, 2017
Network based image loading using the Network Information API in Service Worker | justmarkup
This is clever—you can use the navigator.connection API from a service worker (because it’s asynchronous) which means you can have a service worker script that serves differently sized images based on bandwidth.
Saturday, November 18th, 2017
Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog
Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.
Thursday, November 9th, 2017
The Contrast Swap Technique: Improved Image Performance with CSS Filters | CSS-Tricks
A clever performance trick for images:
- Reduce image contrast using a linear transform function (Photoshop can do this)
- Apply a contrast filter in CSS to the image to make up for the contrast removal
Wednesday, November 8th, 2017
Wednesday, November 1st, 2017
Rebuilding slack.com – Several People Are Coding
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
Sunday, October 29th, 2017
Seeing Earth from Outer Space
A lovely interactive photo essay charting the results of what happens when evolution produces a life form that allows a planet to take selfies.
Thursday, October 19th, 2017
Building a CSS-only image gallery (with fallbacks)
A great step-by-step walkthrough of building a really nice image gallery without any JavaScript.
The end result is really impressive but there’s still the drawback that the browser history will be updated every time you click on an image thumbnail (because the functionality relies on ID attributes referenced via :target). Depending on your use-case, that may or may not be desirable.
Monday, October 9th, 2017
“async” attribute on img, and corresponding “ready” event · Issue #1920 · whatwg/html
It looks like the async attribute is going to ship in Chrome for img elements:
This attribute would have two states:
- “on”: This indicates that the developer prefers responsiveness and performance over atomic presentation of content.
- “off”: This indicates that the developer prefers atomic presentation of content over responsiveness.