The <img> element has attributes that make a real difference in performance: loading, decoding, fetchpriority, srcset and sizes. A practical guide to using them well.
element() CSS function - CSS | MDN
The element() CSS function defines an <image> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.
Handsum: An LQIP Image File Format
Low Quality Image Placeholders (LQIPs) are very small (both in terms of file size and pixel dimensions) images that load very quickly, providing immediate visual feedback while full-resolution images load slowly in the background. They are small-in-file-size enough that it’s feasible to base64-encode and inline them into a web page, minimizing network round-trips and improving page load times.
My HTML boilerplate in 2026 - Manuel Matuzović
Every element I use for the basic structure of a HTML document, with explanations why.
My HTML boilerplate in 2026 - Manuel Matuzović
Every element I use for the basic structure of a HTML document, with explanations why.
Reading a Performance Profile: Field Guide
An interactive field guide to the Chrome DevTools Performance panel: waterfall, flame chart, LCP, CLS, INP, and the Insights panel.
The CSS Selection - 2026 Edition - Project Wallace
The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics.
Preserving the Pixel Art Look in Web Content
Learn essential CSS techniques, scaling strategies, and design principles that preserve the crisp, totally-cool aesthetic of pixel graphics across high-resolution displays and responsive web environments.
CSS Anchor Positioning Guide | CSS-Tricks
Learn about CSS Anchor Positioning, including its syntax, properties, how it is used to position one element next to another, and even how it's used to resize elements relative to other elements.
10M Free Icons & Stock Photos | SVG & PNG | Download Today
🎨 Discover 10M high-quality SVG & PNG icons & stock photos for your next project. 🔍 Find the perfect icon or photo in seconds!
una.im | Modern CSS theming with light-dark(), contrast-color(), and style queries
Combine three new CSS features to build fully adaptive themed components.
When and how to use the section element
So what on earth is a <section> element actually for? The answer isn’t as obvious as you might have hoped, but it’s definitely straightforward.
Download PNG & SVG Icons: Your Ultimate Icon Library
Explore our free icon library with unique PNG & SVG sets, crafted from scratch by 8 rebel designers. Download innovative and harmonious icons now.
Reasonable.html
Reasonable.html is a single HTML document that contains a reasonably complete set of example HTML elements.
HTML Standard
The src attribute gives the URL of a page that the element's content navigable is to contain. The attribute, if present, must be a valid non-empty URL potentially surrounded by spaces. If the itemprop attribute is specified on an iframe element, then the src attribute must also be specified.
Modern CSS snippets. Every old hack, replaced.
Side-by-side comparisons of outdated CSS techniques and their modern native replacements. Grid, custom properties, nesting, container queries, and more.
