Media (by+/via) | | 388 |
web-almanac, studies, research, metrics, multimedia, html |
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers (by/via) | | 387 |
html, buttons, icons, accessibility, screen-readers, assistive-tech |
Designer Problems: “Make the Logo Bigger!” (via) | | 386 |
design, logos |
Solved by Modern CSS: Feature Image (by) | | 385 |
css |
Mastering SVG Arcs (via) | | 384 |
svg |
A Link on a Logo in the Header, What Should the Alt-Text Be? (by/via) | | 383 |
accessibility, branding, links, logos, alt-text |
Preloading Responsive Images (by) | | 382 |
html, hints, performance |
Avoid Hotlinking Images With “Cross-Origin-Resource-Policy” | | 381 |
security |
Old Alt Text Advice (by) | | 380 |
accessibility, alt-text, html, microcontent, best-practices |
Don’t Forget to Localize Your Icons (by) | | 379 |
localization, icons, culture |
How to Identify Decorative Images and Boost Accessibility (via) | | 378 |
how-tos, decoration, accessibility, html, aria |
The Image Compression Challenge (Donating Money for Excess-Free Projects) (by) | | 377 |
compression, performance, tooling |
Dynamic Social Share Images Using Cloudinary (by) | | 376 |
social-media, tooling |
You Can Use “text-wrap: balance;” on Icons (by) | | 375 |
css, icons |
How to Build an Image Search Application With OpenAI CLIP and PostgreSQL in JavaScript (by/via) | | 374 |
how-tos, search, ai, postgresql, databases, javascript, functionality |
Icon Usability: When and How to Evaluate Digital Icons (by/via) | | 373 |
how-tos, usability, icons |
How to Use CSS and SVG Clipping and Masking Techniques (via) | | 372 |
how-tos, css, svg, masking |
“img sizes=auto” for Native Lazy Loading (by) | | 371 |
code-pens, html, lazy-loading, performance |
Keeping Pixely Images Pixely (and Performant!) (by/via) | | 370 |
css, effects |
Building the Perfect Logo Strip (by/via) | | 369 |
css, logos, techniques |
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (via) | | 368 |
svg, examples |
Supporting AVIF in Google Search (by/via) | | 367 |
google, search, avif, support |
Is Using “aria-label” to Add Alternative Text But No “alt” Attribute Still a WCAG Fail? | | 366 |
discussions, accessibility, html, attributes, forms, labels, aria, alt-text |
Mastering Typography in Logo Design (by/via) | | 365 |
typography, design, logos |
Accessibility Specialists Warn Against Using AI for Alt Text (by/via) | | 364 |
accessibility, alt-text, ai |
Good Intentions, Poor Context (via) | | 363 |
accessibility, microcontent, buttons, links |
Have It All: External, Styleable, and Scalable SVG (by) | | 362 |
svg, css |
Designing Design Systems: Constructing an Icon System (via) | | 361 |
design, design-systems, icons, case-studies |
“Practical SVG” Is Now Free to Read Online (by) | | 360 |
books, svg |
Alternative Text in Action (via) | | 359 |
accessibility, alt-text, writing, examples |
Do Grayscale Images Take Less Space? | | 358 |
colors, performance |
The Little Things: Confusing Error Messages (by) | | 357 |
errors, developer-experience |
How Top HR Agencies Build Trust Through Logo Designs (by/via) | | 356 |
design, logos, branding |
Minimal SVG Favicon (by) | | 355 |
svg, favicons, minimalism |
Ditch the Pixels: The Small and Vectorized Web (by) | | 354 |
html, svg |
The Picture-Superiority Effect: Harness the Power of Visuals (via) | | 353 |
design, information-design |
Images as the First Thing in a Button or Link (by) | | 352 |
accessibility, html, buttons, links |
Sliding 3D Image Frames in CSS (by/via) | | 351 |
css, techniques |
Faster Websites With the “picture” Element (by) | | 350 |
html, performance |
How to Think About HTML Responsive Images (by) | | 349 |
how-tos, html, responsive-design |
Introducing Jpegli: A New JPEG Coding Library (by+/via) | | 348 |
introductions, jpeg, libraries, compression |
“aspect-ratio” Gotcha (by) | | 347 |
css |
How to Design Icons in Figma (via) | | 346 |
how-tos, icons, figma, design |
Thoughts on Embedding Alternative Text Metadata Into Images (by) | | 345 |
accessibility, metadata |
How to Invert the Colors Using CSS (by) | | 344 |
css, colors, filters |
AVIF Is the Future of Web Images | | 343 |
avif, performance, visions |
The 88×31 Archive | | 342 |
web, history |
How to Make a Cursor Image Hover Effect With CSS and JS (by) | | 341 |
how-tos, css, javascript, cursors |
Everything You Need to Know About Image Formats in 2024 (via) | | 340 |
jpeg, png, gif, webp, avif, pdf, svg |
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (by/via) | | 339 |
svg, css, masking, performance |
How to Favicon in 2024: Six Files That Fit Most Needs (by/via) | | 338 |
how-tos, favicons |
The World’s Smallest PNG (by) | | 337 |
png, minimalism |
AI Art Is the New Stock Image (via) | | 336 |
design, ai |
Everything You Need to Know About Responsive Logo Design (via) | | 335 |
design, branding, logos, responsive-design |
Responsive SVGs (by/via) | | 334 |
svg, responsive-design |
Border Images in CSS: A Key Focus Area for Interop 2023 (by/via) | | 333 |
borders, css, browsers, web-platform, interoperability |
Practical “img” Element Defaults (by/via) | | 332 |
videos, css |
AI for Web Devs: AI Image Generation (by) | | 331 |
ai, tooling, automation |
“sizes=auto” Pretty Much Requires “width” and “height” Attributes (by) | | 330 |
html, attributes, maintainability |
Create Dynamic Web Experiences With Interactive SVG Animations (via) | | 329 |
svg, animations, tooling |
Text With Media Background: Practical Solutions (by/via) | | 328 |
microcontent, readability, accessibility |
Stop Using AI-Generated Images (by/via) | | 327 |
ai |
AVIF: Meet the Next Level Image File Format (via) | | 326 |
avif |
Cloudinary: The “Dramatic” Story of JPEG XL Support So Far (by/via) | | 325 |
jpeg-xl, support, browsers |
An Introduction to Working With SVGs in React (via) | | 324 |
introductions, svg, react |
Some Sensible Defaults for Your “img” Elements (by) | | 323 |
css |
Images on the Web (by/via) | | 322 |
concepts, compression, jpeg, png, webp, avif, nextjs |
Which Is the Best Image Format for Your Website? (via) | | 321 |
comparisons, jpeg, png, gif, webp, avif |
The Ultimate Low-Quality Image Placeholder Technique (by) | | 320 |
performance, web-vitals |
How Mastodon Handles Images and Web Previews (by) | | 319 |
social-media, mastodon, open-graph, metadata, html |
Stop Lazy Loading Product and Hero Images (by/via) | | 318 |
performance, lazy-loading |
How to Make Charts and Graphs More Accessible (via) | | 317 |
how-tos, information-design, accessibility |
Let’s Make a Rubber Button With HTML, CSS and SVG (by/via) | | 316 |
buttons, html, css, svg |
Please Size Your Inline SVGs (by) | | 315 |
svg |
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources II (by/via) | | 314 |
accessibility, content, best-practices, techniques |
Responsive Images: DIY Implementation in 6 Steps (by) | | 313 |
html, responsive-design |
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources (by/via) | | 312 |
accessibility, content, best-practices, techniques |
SVG Gradients: Solving Curved Challenges (via) | | 311 |
svg, gradients |
Using Imagery in Visual Design (by/via) | | 310 |
design, content |
How to Use CSS “object-fit” and “object-position” (by/via) | | 309 |
how-tos, css |
JPEG XL: How It Started, How It’s Going (by/via) | | 308 |
compression, jpeg-xl |
Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images (by/via) | | 307 |
css, effects |
Displaying Your Full-Sized YouTube Thumbnail or a Custom OG Image in a Twitter Card (by) | | 306 |
youtube, twitter+x, open-graph, social-media, metadata |
Creating SVG Animations Using Tailwind CSS (by+/via) | | 305 |
svg, animations, tailwind |
Understanding SVG Paths (by) | | 304 |
svg |
What Does the Image “decoding” Attribute Actually Do? (by) | | 303 |
html, attributes, performance |
How to Add a CSS Reveal Animation to Your Images (by/via) | | 302 |
how-tos, css, animations |
Is There a Viable Animated GIF Alternative Yet or What? (by/via) | | 301 |
gif |
Deploying AVIF for More Responsive Websites (by/via) | | 300 |
avif, performance |
Dithering (by) | | 299 |
dithering |
The Image Sorting Experiment (by/via) | | 298 |
information-design, sorting, experiments |
A Designers Guide to the Principles of Web Design (via) | | 297 |
guides, design, principles, consistency, legibility, navigation, hierarchy, whitespace, usability |
The Death of JPEG-XL (via) | | 296 |
jpeg-xl |
What Makes a Good Screenshot? (by/via) | | 295 |
accessibility |
The Ultimate Guide to Image Optimisation (by/via) | | 294 |
guides, performance, compression, optimization |
Change Favicon on Switching Browser Tabs in JavaScript (by) | | 293 |
favicons, javascript |
Unlocking SVG’s Superpowers (by/via) | | 292 |
videos, svg |
On Container Queries, Responsive Images, and JPEG-XL (by/via) | | 291 |
css, container-queries, responsive-design, jpeg-xl |
Dithering Images With React/JavaScript (by) | | 290 |
dithering, react, javascript |
Using Focal Points, Aspect Ratio, and Object-Fit to Crop Images Correctly (by) | | 289 |
css |
Building an Animated SVG Logo With animejs (by/via) | | 288 |
svg, logos, animations, vuejs |
You Kinda Want an Orange Favicon (by) | | 287 |
favicons, browsers, theming |
How to Favicon in 2023: Six Files That Fit Most Needs (by/via) | | 286 |
how-tos, favicons |
Learn Images (by/via) | | 285 |
courses, svg, gif, png, jpeg, webp, avif |
Easy SVG Customization and Animation: A Practical Guide (by/via) | | 284 |
guides, svg, animations |
Optimal Images in HTML (by/via) | | 283 |
html, backgrounds, performance, optimization |
The Modern Way of Serving Images (by) | | 282 |
html, performance |
Creating a Custom Cursor Using CSS (by/via) | | 281 |
cursors, css, svg |
6 Common SVG Fails (and How to Fix Them) (by/via) | | 280 |
svg |
Optimizing the Image Element LCP (via) | | 279 |
performance, web-vitals |
Interactive SVG Reference (by) | | 278 |
svg |
Stock Photos of People With Disabilities (by/via) | | 277 |
accessibility, content |
Website Accessibility (15 Best Practices) (by) | | 276 |
accessibility, best-practices, content, readability, captcha, alt-text, forms, focus, html, tooling |
Mini-Guide to Add an Image (by/via) | | 275 |
html |
CSS Infinite Slider Flipping Through Polaroid Images (by/via) | | 274 |
css, effects |
Enough With the Pointless Images (by) | | 273 |
design, decoration |
Reduce Image Sizes by Removing Metadata (by/via) | | 272 |
metadata, performance, optimization |
CSS Infinite and Circular Rotating Image Slider (by/via) | | 271 |
css, animations |
Handling Images With Inconsistent Height in CSS (by) | | 270 |
css |
What Image Format Should You Use in Your Next Project? (by) | | 269 |
|
A Guide to Image Optimization on Jamstack Sites (by/via) | | 268 |
guides, compression, optimization, performance, tech-stacks, jamstack |
6 Steps to Improve HTML Images for Users and Developers (by) | | 267 |
html, performance, responsive-design |
The Case for JPEG XL (by/via) | | 266 |
jpeg-xl, compression |
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project (by) | | 265 |
accessibility, svg, lessons |
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (by) | | 264 |
svg, sprites, performance |
How to Scale SVG (by/via) | | 263 |
how-tos, svg |
GIFs Without the .gif: The Most Performant Image and Video Options Right Now (by/via) | | 262 |
performance, multimedia, gif, html |
Media (by/via) | | 261 |
web-almanac, studies, research, metrics, multimedia |
Converting PNG Images to WebP Using PHP (by) | | 260 |
conversion, png, webp, php |
How Your Favourite UI Libraries Manage Their Icons (by/via) | | 259 |
libraries, icons, maintenance |
8 Tricks for SVG Optimization (by/via) | | 258 |
svg, tips-and-tricks, optimization |
AI-Generated Images From AI-Generated Alt Text (by) | | 257 |
accessibility, writing, alt-text, ai |
Vector Animations With Figma and SVG Animate (by/via) | | 256 |
animations, figma, svg |
Research Insight: Accessibility of Images (by/via) | | 255 |
accessibility, usability, research |
Powerful Image Optimization Tools (by/via) | | 254 |
link-lists, compression, performance, tooling |
Can SVG Symbols Affect Web Performance? (by) | | 253 |
svg, performance |
Best Practices for Images (by) | | 252 |
html, best-practices |
Imagemin Guard (by) | | 251 |
packages, npm, compression, performance, jpeg, png, gif, webp, avif |
Icon-Only Links Fail WCAG (by) | | 250 |
accessibility, links, wcag, icons, conformance |
Magical SVG Techniques (via) | | 249 |
svg, techniques |
Image Borders in CSS (by) | | 248 |
css, borders |
How to Turn HTML Webpage Into an Image? (by) | | 247 |
how-tos, html, conversion |
Picture Perfect Images With the Modern “<img>” Element (by/via) | | 246 |
html, performance, web-vitals |
Optimizing SVG Patterns to Their Smallest Size (by/via) | | 245 |
svg, performance |
Favi-Gone: 6 Reasons Why Your Favicon Disappeared From the Google Search Results (by) | | 244 |
favicons, google, seo |
15 Useful Placeholder Tools for Designers and Developers (by) | | 243 |
tooling, content, placeholders, testing, link-lists |
Never, Ever, Ever Use Pixelation for Redacting Text (by/via) | | 242 |
content, obfuscation, security |
Building an Adaptive Favicon (by/via) | | 241 |
favicons |
How to Favicon in 2022: Six Files That Fit Most Needs (by/via) | | 240 |
how-tos, favicons |
Optimize Your PNGs With Oxipng and pre-commit (by) | | 239 |
png, performance, compression, tooling |
Big Images, Blazingly Fast (by/via) | | 238 |
performance, quality |
Create an Open Graph Image Generator With Node.js (by/via) | | 237 |
nodejs, open-graph |
Social Media Image Sizes 2022: Cheat Sheet for Every Network (by+/via) | | 236 |
cheat-sheets, social-media |
Alt Tag Emptiness (by) | | 235 |
accessibility, html, alt-text, aria |
Responsive Image Gallery With Animated Captions (by) | | 234 |
css, animations, responsive-design, examples |
Image Magnifier Using Only One Line of CSS (by) | | 233 |
css |
The Many Methods for Using SVG Icons (by) | | 232 |
css, svg, icons |
Image Display Elements (by) | | 231 |
html, responsive-design |
Why Your Website Should Not Use Dithered Images (via) | | 230 |
dithering, compression, performance |
We Analyzed 425,909 Favicons | | 229 |
favicons |
Beginner’s Guide to Responsive Images: How to Get Them Right (by/via) | | 228 |
guides, responsive-design, html |
Using Modern Image Formats: AVIF and WebP (by/via) | | 227 |
avif, webp, jpeg, png, comparisons, performance, compression |
Optimizing Images on the Web (by/via) | | 226 |
performance, cloudflare |
Blowing Up HTML Size With Responsive Images (via) | | 225 |
html, performance, responsive-design |
Fractional SVG Stars With CSS (by) | | 224 |
css, svg |
One Favicon to Rule Them All (by) | | 223 |
html, favicons |
Decoding AVIF: Deep Dive With Cats and imgproxy (by+/via) | | 222 |
avif, deep-dives |
Exploring the CSS Paint API: Image Fragmentation Effect (by/via) | | 221 |
css, apis, effects |
Pixelart and the “image-rendering” Paradox (by) | | 220 |
css, art |
What to Know About AVIF on Cloudinary (by) | | 219 |
avif |
Image Descriptions: A Human Technique That Robots Can’t Grasp (by/via) | | 218 |
accessibility, alt-text |
The Anatomy of a Web Page: 14 Basic Elements (by/via) | | 217 |
design-patterns, navigation, buttons, forms, multimedia, favicons, link-lists |
Beyond Basic Alt Text—Charts, Maps, and Diagrams (by/via) | | 216 |
accessibility, alt-text, information-design |
A Framework for Building Open Graph Images (by/via) | | 215 |
open-graph |
Your Image Is Probably Not Decorative (by/via) | | 214 |
decoration, accessibility, alt-text |
OMG, SVG Favicons FTW! (by) | | 213 |
html, favicons, svg |
Serving Sharp Images to High Density Screens (by) | | 212 |
performance |
Half the Size of Images by Optimising for High Density Displays (by) | | 211 |
html, performance |
Adding Shadows to SVG Icons With CSS and SVG Filters (by/via) | | 210 |
css, svg, icons, shadows, filters, effects |
Using AVIF to Compress Images on Your Site (by/via) | | 209 |
performance, avif, compression |
How to Build an Image Comparison Slider (by) | | 208 |
how-tos, react |
JPEG XL | | 207 |
websites, jpeg-xl |
Content-Aware Image Resizing in JavaScript (by) | | 206 |
javascript, resizing |
Web Developer’s Guide to AVIF Images (by) | | 205 |
guides, avif |
How to Use SVG Image Sprites (by/via) | | 204 |
how-tos, svg, sprites |
Create Responsive Image Effects With CSS Gradients and “aspect-ratio” (by/via) | | 203 |
responsive-design, css, gradients, effects |
Front-End Performance 2021: Assets Optimizations (by/via) | | 202 |
performance, checklists, link-lists, compression |
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format (by/via) | | 201 |
webp, google |
How to Design a Set of Icons (via) | | 200 |
design, icons |
Creating a Custom Cursor Using CSS? (by) | | 199 |
css, svg, cursors |
Webwaste (by/via) | | 198 |
web, sustainability |
How to Design a Brand Logo (With Ease) (via) | | 197 |
how-tos, design, branding, logos |
Accessible SVGs: Inclusiveness Beyond Patterns (by/via) | | 196 |
svg, accessibility, tooling |
Setting Height and Width on Images Is Important Again (by/via) | | 195 |
html, performance, web-vitals |
Optimize CSS Background Images With Media Queries (by/via) | | 194 |
css, backgrounds, media-queries, optimization |
AVIF for Next-Generation Image Coding (by+/via) | | 193 |
avif, compression |
Progressive JPEGs: An Introduction (via) | | 192 |
introductions, jpeg, compression |
Speed Up Your Website With WebP (via) | | 191 |
performance, optimization, webp |
A Guide to Optimizing Images for Mobile (via) | | 190 |
guides, performance, optimization, mobile |
Faster Image Loading With Embedded Image Previews (via) | | 189 |
performance, lazy-loading, techniques, javascript |
When to Use “img,” “img@ srcset,” and “picture” and “source” (by) | | 188 |
html |
Image Optimization in WordPress (by/via) | | 187 |
wordpress, performance, optimization |
Understanding Image Compression: Tooling and Context (by) | | 186 |
performance, compression, tooling |
A Crime Called Favicon (by) | | 185 |
favicons, maintainability |
A Practical Guide to SVG and Design Tools (by/via) | | 184 |
guides, svg, sketch, figma, adobe, tooling, design |
SVG Circle Decomposition to Paths (via) | | 183 |
svg, animations |
Improve Animated GIF Performance With HTML5 Video (by/via) | | 182 |
gif, multimedia, performance |
Responsive Images (by/via) | | 181 |
html, css, responsive-design |
Icon Fonts vs. SVGs—Which One Should You Use in 2018? (via) | | 180 |
fonts, icon-fonts, svg |
Converting Images to WebP (by/via) | | 179 |
conversion, webp, sketch, photoshop, adobe |
Improving Performance Perception: On-Demand Image Resizing (by/via) | | 178 |
performance, optimization, resizing, html |
Designing for Accessibility and Inclusion (via) | | 177 |
design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability |
The Front-End Checklist (by) | | 176 |
websites, checklists, html, css, javascript, accessibility, performance, seo |
When Large Isn’t Large Enough: Designing With Hero Images (by/via) | | 175 |
design |
GIF, PNG, JPG, or SVG: Which One to Use? (via) | | 174 |
jpeg, png, gif, svg, webp, comparisons |
Let the Content Delivery Network Optimize Your Images (by/via) | | 173 |
content-delivery, optimization, performance |
What Is the Right Image Format for Your Website? (by/via) | | 172 |
compression, jpeg, gif, png, svg, webp |
Guetzli, Google’s New JPEG Encoder (by) | | 171 |
performance, jpeg, compression, tooling |
Align SVG Icons to Text and Say Goodbye to Font Icons (by/via) | | 170 |
svg, icons, icon-fonts, fonts, css, design, alignment |
A Compendium of SVG Information (by/via) | | 169 |
overviews, svg, link-lists |
The Joy of Optimizing (by/via) | | 168 |
videos, performance, optimization |
WordPress SVG Support: How to Enable SVGs in WordPress (by/via) | | 167 |
how-tos, wordpress, svg |
Accessible SVGs (by/via) | | 166 |
svg, accessibility, examples |
Practical SVG (by/via) | | 165 |
svg |
RespImageLint—Linter for Responsive Images (by) | | 164 |
bookmarklets, html, responsive-design, linting |
How PNG Works (by) | | 163 |
png, compression |
Lazy-Loading Images: How Not to Really Annoy Your Users (via) | | 162 |
lazy-loading, performance, jquery |
Blending Modes Demystified (by/via) | | 161 |
design, colors, effects, css |
Decorating the Web With CSS Border Images (by/via) | | 160 |
decoration, css, borders |
Creating Cel Animations With SVG (by/via) | | 159 |
animations, svg, css, sass |
Preloading Images in Parallel With Promises (by/via) | | 158 |
javascript, promises |
SVG Lessons I Learned the Hard Way (by/via) | | 157 |
videos, svg, lessons |
SVG Is for Everybody (by/via) | | 156 |
videos, svg |
Mastering Image Optimization in WordPress (via) | | 155 |
wordpress, optimization, performance |
image-dimensions (by) | | 154 |
packages, npm |
Responsive Hero Images (by/via) | | 153 |
responsive-design |
CSS Sprites With Sass and Compass (via) | | 152 |
css, sprites, sass, compass |
Why Responsive Images Matter (by/via) | | 151 |
responsive-design |
Responsive Images in Practice (by/via) | | 150 |
responsive-design, html, css |
Styling and Animating SVGs With CSS (by/via) | | 149 |
svg, css, animations |
Image Optimization Services (by/via) | | 148 |
performance, optimization, link-lists |
Don’t Use “<picture>” (Most of the Time) (by/via) | | 147 |
html, responsive-design |
Making SVGs Responsive With CSS (by/via) | | 146 |
svg, responsive-design, css |
How to “Resize” Images With CSS (by/via) | | 145 |
css, media-queries, resizing |
Testing Responsive Images (by/via) | | 144 |
html, responsive-design |
Picturefill 2.0: Responsive Images and the Perfect Polyfill (via) | | 143 |
html, responsive-design, polyfills |
Tips for Creating Accessible SVG (by/via) | | 142 |
accessibility, svg, tips-and-tricks |
“srcset” and “sizes” (by) | | 141 |
html, responsive-design |
A Q&A on the Picture Element (by+/via) | | 140 |
interviews, html, semantics, responsive-design |
Rethinking Responsive SVG (by/via) | | 139 |
responsive-design, svg, css |