Tagged with: responsive

Preloading responsive images

tl;dr use an empty href attribute in responsive image preloads for the best results across all browsers, like so: <link rel="preload" href="" imagesrcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" imagesizes="100vw">.

I'll be giving a talk on responsive images

On Thursday 9th October at 6.30pm I’ll be giving a talk on the new responsive images standards. It’s a free talk and will take place at Rumble Labs in Belfast, just round the corner from St. Anne’s Cathedral.

Responsive images

The <img> tag all started with this message and has been with us since HTML 2.0. In that time it hasn’t changed much at all, just put a path to an image in the src attribute and you have an image on the screen.

Using AJAX with WordPress for conditional loading

AJAX has become a big part of responsive design for me. I use it to load secondary content into larger viewports to make it easier to find/view than if it is behind a small link in the footer or somewhere like that.