Why Your Website Should Not Use Dithered Images | | 354 |
dithering, compression, performance |
We Analyzed 425,909 Favicons | | 353 |
favicons |
Beginner’s Guide to Responsive Images: How to Get Them Right (lou) | | 352 |
guides, responsive-design, html |
Using Modern Image Formats: AVIF and WebP (add/sma) | | 351 |
avif, webp, jpeg, png, comparisons, performance, compression |
Optimizing Images on the Web (clo) | | 350 |
performance, cloudflare |
Blowing Up HTML Size With Responsive Images (deb) | | 349 |
html, performance, responsive-design |
Fractional SVG Stars With CSS | | 348 |
css, svg |
5 Steps for Writing Alt Text for Accessibility | | 347 |
accessibility, writing, alt-text |
One Favicon to Rule Them All (j9t) | | 346 |
html, favicons |
Decoding AVIF: Deep Dive With Cats and imgproxy (evi) | | 345 |
avif, deep-dives |
Exploring the CSS Paint API: Image Fragmentation Effect (css/css) | | 344 |
css, apis, effects |
Pixelart and the “image-rendering” Paradox | | 343 |
css, art |
Writing Great Alt Text: Emotion Matters (jaf) | | 342 |
accessibility, writing, alt-text, user-experience |
What to Know About AVIF on Cloudinary (sia) | | 341 |
avif, cloudinary |
Image Descriptions: A Human Technique That Robots Can’t Grasp (uxd) | | 340 |
accessibility, alt-text |
The Anatomy of a Web Page: 14 Basic Elements | | 339 |
design-patterns, navigation, buttons, forms, multimedia, favicons, link-lists |
Beyond Basic Alt Text—Charts, Maps, and Diagrams | | 338 |
accessibility, alt-text, information-design |
A Framework for Building Open Graph Images (git) | | 337 |
open-graph |
Your Image Is Probably Not Decorative (eri/sma) | | 336 |
decoration, accessibility, alt-text |
OMG, SVG Favicons FTW! | | 335 |
html, favicons, svg |
Serving Sharp Images to High Density Screens (jaf) | | 334 |
performance |
Half the Size of Images by Optimising for High Density Displays (jaf) | | 333 |
html, performance |
Adding Shadows to SVG Icons With CSS and SVG Filters (css) | | 332 |
css, svg, icons, shadows, filters, effects |
Using AVIF to Compress Images on Your Site (dev) | | 331 |
performance, avif, compression |
How to Build an Image Comparison Slider | | 330 |
how-tos, sliders, react |
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma) | | 329 |
accessibility, svg, screen-readers |
JPEG XL | | 328 |
websites, jpeg-xl |
Content-Aware Image Resizing in JavaScript | | 327 |
javascript, resizing |
Web Developer’s Guide to AVIF Images | | 326 |
guides, avif |
How to Use SVG Image Sprites (cra) | | 325 |
how-tos, svg, sprites |
Create Responsive Image Effects With CSS Gradients and “aspect-ratio” (5t3/sma) | | 324 |
responsive-design, css, gradients, aspect-ratio, effects |
Seven Myths About Alt Text | | 323 |
accessibility, alt-text, myths |
Front-End Performance 2021: Assets Optimizations (vit/sma) | | 322 |
performance, checklists, link-lists, compression |
Optimizing Image Depth (mey/css) | | 321 |
quality, performance, optimization |
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format | | 320 |
webp, google |
GIFs and “prefers-reduced-motion” (chr/css) | | 319 |
gif, reduced-motion, html |
How to Design a Set of Icons | | 318 |
design, icons |
Creating a Custom Cursor Using CSS? | | 317 |
css, svg, cursors |
AVIF Has Landed (jaf) | | 316 |
avif, performance, quality, jpeg, webp, svg, png, comparisons |
Optimize Images With a GitHub Action (chr/css) | | 315 |
compression, github-actions |
Pausing a GIF With “details”/“summary” (chr/css) | | 314 |
html, disclosure-widgets, gif, animations |
Writing Alt Text for Data Visualization | | 313 |
accessibility, alt-text, writing, information-design, visualization |
Lazy Loading Images in Svelte (css) | | 312 |
lazy-loading, svelte, performance |
Webwaste (ger/ali) | | 311 |
web, sustainability |
How to Design a Brand Logo (With Ease) (sma) | | 310 |
how-tos, design, branding, logos |
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css) | | 309 |
favicons, svg, dark-mode |
How to Use an Emoji as a Favicon Easily (chr/css) | | 308 |
how-tos, favicons, emoji, data-urls |
Different Favicon for Development (chr/css) | | 307 |
favicons, environments |
Tools for Optimizing SVG (chr/css) | | 306 |
tooling, svg, optimization, link-lists |
Accessible SVGs: Inclusiveness Beyond Patterns (car/sma) | | 305 |
svg, accessibility, tooling |
Setting Height and Width on Images Is Important Again (tun/sma) | | 304 |
html, performance, web-vitals |
Optimize CSS Background Images With Media Queries (dev) | | 303 |
css, backgrounds, media-queries, optimization |
Do This to Improve Image Loading on Your Website (fon/css) | | 302 |
performance, html |
AVIF for Next-Generation Image Coding | | 301 |
avif, compression |
Progressive JPEGs: An Introduction | | 300 |
introductions, jpeg, pjpeg, compression |
Dark Mode Favicons (chr/css) | | 299 |
favicons, dark-mode |
Speed Up Your Website With WebP (sma) | | 298 |
performance, optimization, webp |
A Guide to Optimizing Images for Mobile (sma) | | 297 |
guides, performance, optimization, mobile |
Workflow Considerations for Using an Image Management Service (chr/css) | | 296 |
performance, tooling, content-delivery |
How to Change Your Favicon in Wordpress: A Step-by-Step Guide (yoa) | | 295 |
guides, favicons, wordpress |
Faster Image Loading With Embedded Image Previews (sma) | | 294 |
performance, lazy-loading, techniques, javascript |
The Making of an Animated Favicon (pre/css) | | 293 |
favicons, animations, canvas |
When to Use “img,” “img@ srcset,” and “picture” and “source” (j9t) | | 292 |
html |
Image Optimization in WordPress (sma) | | 291 |
wordpress, performance, optimization |
Understanding Image Compression: Tooling and Context (j9t) | | 290 |
performance, compression, tooling |
A Crime Called Favicon (j9t) | | 289 |
favicons, maintainability |
A Practical Guide to SVG and Design Tools (sma) | | 288 |
guides, svg, sketch, figma, adobe, tooling, design |
SVG Circle Decomposition to Paths (sma) | | 287 |
svg, animations |
Stacked “Borders” (mey/css) | | 286 |
css, borders, shadows, backgrounds, gradients |
Did You Know That CSS Custom Properties Can Handle Images Too? (fon/css) | | 285 |
css, custom-properties |
Using Artificial Intelligence to Generate Alt Text on Images (css) | | 284 |
ai, alt-text, accessibility |
Improve Animated GIF Performance With HTML5 Video (sma) | | 283 |
gif, multimedia, performance |
Apply a Filter to a Background Image (chr/css) | | 282 |
backgrounds, filters, css |
Responsive Images (wil/ali) | | 281 |
html, css, responsive-design |
Icon Fonts vs. SVGs—Which One Should You Use in 2018? | | 280 |
fonts, icon-fonts, svg |
Converting Images to WebP (mal/sma) | | 279 |
conversion, webp, sketch, photoshop, adobe, cloudinary |
Image Alt Text vs. Title Text vs. File Names: What’s the Difference? (bri/sea) | | 278 |
seo, alt-text, accessibility, naming, microcontent, comparisons |
Improving Performance Perception: On-Demand Image Resizing | | 277 |
performance, optimization, resizing, html |
What Is SVG Good For? (chr/css) | | 276 |
svg, examples |
The Four Big Ways Jetpack Helps With Image Performance (css) | | 275 |
wordpress, plugins, performance |
Designing for Accessibility and Inclusion (sma) | | 274 |
design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability |
Some Things About “alt” Text (chr/css) | | 273 |
accessibility, alt-text, html |
Bad Icons: How to Identify and Improve Them (nng) | | 272 |
how-tos, icons, design, usability |
The Front-End Checklist (the) | | 271 |
websites, checklists, html, css, javascript, accessibility, performance, seo |
Tips for Icon Usability | | 270 |
videos, icons, usability, tips-and-tricks |
A Pretty Good SVG Icon System (chr/css) | | 269 |
svg, icons |
When Large Isn’t Large Enough: Designing With Hero Images (sma) | | 268 |
design |
Masking vs. Clipping: When to Use Each (sar/css) | | 267 |
masking, clipping, svg, comparisons |
GIF, PNG, JPG, or SVG: Which One to Use? | | 266 |
jpeg, png, gif, svg, webp, comparisons |
Let the Content Delivery Network Optimize Your Images (jon/sma) | | 265 |
content-delivery, optimization, performance |
What Is the Right Image Format for Your Website? | | 264 |
compression, jpeg, gif, png, svg, webp |
Guetzli, Google’s New JPEG Encoder (tel) | | 263 |
performance, jpeg, compression, tooling |
Measuring Image Widths in JavaScript (Carefully) (chr/css) | | 262 |
javascript |
Align SVG Icons to Text and Say Goodbye to Font Icons | | 261 |
svg, icons, icon-fonts, fonts, css, design, alignment |
A Compendium of SVG Information (chr/css) | | 260 |
overviews, svg, link-lists |
Develop Locally, Use Images From Production (chr/css) | | 259 |
environments, processes, apache, servers |
The Joy of Optimizing (una/btc) | | 258 |
videos, performance, optimization |
Responsive Images in CSS (chr/css) | | 257 |
responsive-design, css, html |
SVG and Media Queries (jaf) | | 256 |
svg, css, media-queries, canvas, support, browsers |
The SVG “path” Syntax: An Illustrated Guide (chr/css) | | 255 |
guides, svg |
WordPress SVG Support: How to Enable SVGs in WordPress | | 254 |
how-tos, wordpress, svg |
Accessible SVGs in High Contrast Mode (eri/css) | | 253 |
accessibility, svg, contrast, colors |
Are Icons Content? (chr/css) | | 252 |
icons, html, content |
Accessible SVGs (css) | | 251 |
svg, accessibility, examples |
Using WebP Images (mal/css) | | 250 |
webp, conversion |
Get the Original Image From a Data URL (chr/css) | | 249 |
data-urls |
Practical SVG (chr/ali) | | 248 |
svg |
High Performance SVGs (sar/css) | | 247 |
svg, performance, tooling, optimization |
Working With Images in Stylesheets With PostCSS (css) | | 246 |
css, backgrounds, postcss, examples |
RespImageLint—Linter for Responsive Images | | 245 |
bookmarklets, html, responsive-design, linting |
How PNG Works | | 244 |
png, compression |
Why npm Scripts? (css) | | 243 |
npm, nodejs, conversion, linting, minification, compression, sprites, examples |
Usability Testing of Icons (nng) | | 242 |
icons, testing, usability |
Lazy-Loading Images: How Not to Really Annoy Your Users | | 241 |
lazy-loading, performance, jquery |
Blending Modes Demystified (ali) | | 240 |
design, colors, effects, css |
A Guide for SVG Support in Email (geo/css) | | 239 |
guides, svg, support, email |
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css) | | 238 |
guides, smil, svg, animations |
Decorating the Web With CSS Border Images | | 237 |
decoration, css, borders |
The Image Replacement Museum (mar/css) | | 236 |
image-replacement, techniques, html, css, overviews, link-lists |
Background Image Shapes (css) | | 235 |
backgrounds, shapes, css, transforms, clipping, svg |
Ensure High Contrast for Text Over Images (nng) | | 234 |
contrast, colors, accessibility, usability |
How to Make Charts With SVG (fon/css) | | 233 |
how-tos, visualization, svg, html, javascript |
Factors Affecting Website Performance | | 232 |
performance, network, browsers, memory, servers, multimedia |
Creating Cel Animations With SVG (hey/sma) | | 231 |
animations, svg, css, sass |
Preloading Images in Parallel With Promises (kit) | | 230 |
javascript, promises, preloading, performance |
The Anatomy of Responsive Images (jaf) | | 229 |
html, responsive-design, support, browsers |
SVG Lessons I Learned the Hard Way (sar/btc) | | 228 |
videos, svg, lessons |
SVG Is for Everybody (chr/btc) | | 227 |
videos, svg |
Mastering Image Optimization in WordPress | | 226 |
wordpress, optimization, performance |
Performance Tools (fon/css) | | 225 |
performance, tooling, content-delivery, testing, dev-tools, css, javascript, optimization, link-lists |
The Art of SVG Filters and Why It Is Awesome (sma) | | 224 |
svg, filters, css |
SVG Fallbacks Guide (ame/css) | | 223 |
guides, svg, graceful-degradation |
image-dimensions (sin) | | 222 |
packages, npm |
HTML5 Image Description Extension (“longdesc”) (cpt/w3c) | | 221 |
html, standards |
Responsive Hero Images (gri/clo) | | 220 |
responsive-design |
CSS Sprites With Sass and Compass | | 219 |
css, sprites, sass, compass |
Why Responsive Images Matter (wil/ali) | | 218 |
responsive-design |
Responsive Images in Practice (ali) | | 217 |
responsive-design, html, css |
Styling and Animating SVGs With CSS (sar/sma) | | 216 |
svg, css, animations |
How SVG Fragment Identifiers Work (chr/css) | | 215 |
svg, css |
Probably Don’t Base64 SVG (chr/css) | | 214 |
svg, data-urls |
A Guide to SVG Animations (SMIL) (sar/css) | | 213 |
guides, svg, animations, smil |
Image Optimization Services (gri/clo) | | 212 |
performance, optimization, link-lists |
Don’t Use “<picture>” (Most of the Time) (gri/clo) | | 211 |
html, responsive-design |
How a New HTML Element Will Make the Web Faster (ars) | | 210 |
html, performance, responsive-design |
Making SVGs Responsive With CSS (sar/cod) | | 209 |
svg, responsive-design, css |
Favicons, Touch Icons, Tile Icons, Etc.—Which Do You Need? (css) | | 208 |
icons, favicons |
Swapping Out SVG Icons (chr/css) | | 207 |
svg, icons, css, jquery, techniques |
How to “Resize” Images With CSS | | 206 |
css, media-queries, resizing |
Testing Responsive Images (wil/ali) | | 205 |
html, responsive-design |
Picturefill 2.0: Responsive Images and the Perfect Polyfill (sma) | | 204 |
html, responsive-design, polyfills |
Tips for Creating Accessible SVG (tin) | | 203 |
accessibility, svg, tips-and-tricks |
Dealing With Content Images in Email (chr/css) | | 202 |
email, html, wordpress, responsive-design |
“srcset” and “sizes” (eee) | | 201 |
html, responsive-design |
A Q&A on the Picture Element (yoa+/ali) | | 200 |
interviews, html, semantics, responsive-design |
Shadow DOM | | 199 |
shadow-dom, dom, svg, angularjs, css, mathml |
Rethinking Responsive SVG (sma) | | 198 |
responsive-design, svg, css |
One Solution to Responsive Images (sma) | | 197 |
responsive-design, html, php |
Animating Vectors With SVG (bri/24w) | | 196 |
svg, animations, javascript |
Why Responsive Images Is So Hard (chr/css) | | 195 |
responsive-design, css, html |
Webpage Performance (geo) | | 194 |
performance, compression, minification, caching, content-delivery |
Image Compression for Web Developers (dev) | | 193 |
compression, performance, link-lists |
WebKit Has Implemented “srcset”, and It’s a Good Thing (wil/sma) | | 192 |
webkit, html, responsive-design |
Using Remote Image Files When You Develop Locally (lul) | | 191 |
processes, drupal, apache, servers |
SVG Fallbacks (chr/css) | | 190 |
svg, support, browsers, png |
SVG Filters on Text (css) | | 189 |
svg, filters, effects |
Images Slowing Down Your Site? Try This One Weird Trick! (aer) | | 188 |
performance, javascript |
The Web Designer’s Guide to Image Copyrights | | 187 |
guides, design, licensing |
Simple Responsive Images With CSS Background Images (sma) | | 186 |
responsive-design, backgrounds, css, html |
Why We Need Responsive Images (tka) | | 185 |
responsive-design, performance, metrics |
Replace the Image in an “<img>” With CSS (css) | | 184 |
css, image-replacement, techniques |
Media Queries Within SVG (tka) | | 183 |
svg, css, media-queries, support, browsers |
Media Queries in SVG Images (gri/clo) | | 182 |
svg, css, media-queries |
Using SVG (chr/css) | | 181 |
svg, css, support, browsers, examples, data-urls, tooling, link-lists |
Favicon: A Changing Role | | 180 |
html, favicons |
Web Technology: 5 Things to Watch in 2013 (sts/cne) | | 179 |
browsers, standards, performance |
CSS Masks—How to Use Masking in CSS Now (sch) | | 178 |
how-tos, css, masking, svg |
Perfecting Your Website’s Favicon | | 177 |
favicons, optimization |
Compressive Images (sco) | | 176 |
compression, jpeg |
Better SVG Sprites With Fragment Identifiers (sto) | | 175 |
svg, sprites |
Responsive Image Format (yoa) | | 174 |
responsive-design, jpeg, pjpeg |
CSS Sprites Revisited (sma) | | 173 |
css, sprites, techniques |
On Responsive Images (chr/css) | | 172 |
html, responsive-design |
The Need for a Responsive Web Image Format (tel) | | 171 |
responsive-design, mobile, webp |
Resolution Independence With SVG (dbu/sma) | | 170 |
svg, css, responsive-design |
pngquant (kor) | | 169 |
websites, tooling, libraries, png, compression |
Responsive Images and Transparent Content Negotiation in HTTP (kar) | | 168 |
html, responsive-design, content-negotiation |
Lightbox2 | | 167 |
libraries, javascript, effects, lightbox |
Responsive [Images] (gri/clo) | | 166 |
responsive-design |
A Farewell to CSS3 Gradients (mis) | | 165 |
css, gradients, vendor-extensions, svg |
How to Optimize Images With HTML5 Canvas (sma) | | 164 |
how-tos, optimization, canvas, html |
Infinite All-CSS Scrolling Slideshow (chr/css) | | 163 |
scrolling, css, effects |
More Logo Markup Tips (css) | | 162 |
branding, logos, html, tips-and-tricks |
Fluid Images (bee/ali) | | 161 |
layout, css, responsive-design |
Better Image Management With WordPress (sma) | | 160 |
wordpress, maintenance, php |
HTML, “@ width,” and “@ height” (j9t) | | 159 |
html, multimedia, maintainability |
Using the CSS “border-image” Property (tab) | | 158 |
css, borders |
Understanding “border-image” (css) | | 157 |
css, borders |
The Death of the Pixel as We Know It—the New DPI Web (dal/aja) | | 156 |
pixel-density |
Transparency in Web Design (chr/css) | | 155 |
design, transparency, css, png |
SVG Wow | | 154 |
websites, svg, examples |
Fast by Default and Web Performances (aja) | | 153 |
performance, sprites, javascript, css |
“toDataURL,” Canvas, and SVG (bra/aja) | | 152 |
javascript, apis, canvas, svg |
Vital Tips for Effective Logo Design (sma) | | 151 |
design, logos, tips-and-tricks |
Perfect Full Page Background Image (chr/css) | | 150 |
backgrounds, css, filters, jquery, techniques |
Lightbox 2: Simple JavaScript Image Gallery | | 149 |
videos, javascript, lightbox |
Why IE9 Will Support SVG (fyr) | | 148 |
internet-explorer, microsoft, browsers, svg, support |
How to Optimize PNG (sma) | | 147 |
how-tos, png, optimization |
Clever JPG Optimization Techniques (sma) | | 146 |
jpeg, optimization, techniques |
IE Fix: Bicubic Scaling for Images (chr/css) | | 145 |
internet-explorer, microsoft, browsers, scaling, css |
WebFormElements.com (tel) | | 144 |
forms, browsers, screenshots |
The Tiniest GIF Ever | | 143 |
gif, php |
APNG Class: Get APNG Going on All Browsers (dal/aja) | | 142 |
javascript, libraries, png |
88 Outstanding Favicons and 6 Resources to Help You Create Your Own | | 141 |
favicons, examples, link-lists |
SVG Is the Future of Application Development | | 140 |
svg, web-apps, outlooks |
SVG Test Page (fyr) | | 139 |
svg, testing |
“border-image”: No More Cutting Up Hell (dal/aja) | | 138 |
css, borders, webkit, firefox, mozilla, browsers, support |
SVG Filter Performance Improvements in Gecko 1.9.1 | | 137 |
gecko, browser-engines, browsers, svg, filters |
SVG Paint Servers for HTML | | 136 |
html, svg, css, backgrounds |
Evil GIFs: Hiding Java in Your Image (dal/aja) | | 135 |
gif, java, security |
Infinite Web 2.0 Image With GWT (dal/aja) | | 134 |
canvas, gwt, web-2.0 |
Rendering Performance in Canvas Compared to SVG and VML (dal/aja) | | 133 |
performance, rendering, canvas, svg, comparisons |
Preloading Images With jQuery (oct/aja) | | 132 |
performance, preloading, jquery |
Google Changes Favicon, Challenges You to Do Better | | 131 |
google, favicons |
A Validator Is Not an Accessibility Evaluation Tool? (w3c) | | 130 |
discussions, html, conformance, accessibility, alt-text, tooling |
Using CSS for Image Borders (css) | | 129 |
css, borders |
Making “IE6-Friendly” PNG8 Images (mis) | | 128 |
browsers, microsoft, internet-explorer, png |
APNG—the Animated PNG | | 127 |
websites, png |
RDFa and HTML Imagemap (kar/w3c) | | 126 |
rdf, html, image-maps |
Misconceptions About PNG (chr/css) | | 125 |
png |
CSS Sprites: What They Are, Why They’re Cool, and How to Use Them (chr/css) | | 124 |
how-tos, css, sprites |
PNG Transparency for Internet Explorer (IE6 and Beyond) (tel) | | 123 |
png, transparency, browsers, microsoft, internet-explorer, css, hacks |
Color Sampling and SVG Gradients (bur) | | 122 |
colors, svg, gradients |
Getting Started With Photoshop: Saving for the Web | | 121 |
introductions, adobe, photoshop, gif, jpeg, png |
The “longdesc” Lottery (div) | | 120 |
html, attributes, accessibility |
Reviving Anorexic Web Writing (ali) | | 119 |
writing, alt-text, accessibility |
Icon Design: Sizing (dav) | | 118 |
icons, design |
Animated GIF Not Animating? (pau) | | 117 |
gif, javascript, html |
W3C Sets Standard for Technical Illustrations on the Web | | 116 |
w3c, standards |
Which Image Format Is Best (jus) | | 115 |
gif, jpeg, png |
My PNG Image Replacement Method (tel) | | 114 |
image-replacement, techniques, png |
Semantic Image Use (jch) | | 113 |
html, alt-text, accessibility, semantics |
Accessible Alternate Content (lac) | | 112 |
accessibility, content |
Lightbox JS | | 111 |
libraries, javascript, effects, lightbox |
Ten Steps to a More User Friendly Website | | 110 |
flash, performance, compression, link-rot, html, conformance, browsers, support, navigation, readability, quality |
JPG Quality (dav) | | 109 |
jpeg, quality, compression |
Alt Attribute (Alt Tag, Alt Tooltip) (ann) | | 108 |
html, attributes, alt-text, accessibility |
From an Alt Point of View (the) | | 107 |
accessibility, usability, legal, alt-text |
New Site Technology for Visually Impaired Surfers (zdn) | | 106 |
css, accessibility, alt-text |
GIF Hacking (dav) | | 105 |
gif, png, dithering, compression |