Tech is political: The people under attack in Palestine 🇵🇸, Iran 🇮🇷, and Lebanon 🇱🇧 are people like us. They’re our brothers and sisters, too. Read up on their history, scrutinize what you’re told, and demand that they be respected. Hide

Frontend Dogma

“images” News Archive

Definition, related topics, and tag feed

Definition · Supertopics: multimedia, design · Subtopics: alt-text, avif, dithering, favicons, gif, icons, image-maps, image-replacement, jpeg, jpeg-xl, logos, photoshop, pjpeg, png, screenshots, sprites, svg, webp (non-exhaustive) · “images” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
CSS Linked Parameters Module Level 1 (tab+/w3c)699
css, svg
I Thought AVIF Would Make Every Image Smaller—It Didn’t (mal)698
avif, compression, webp
Accessibility Is Resistance (tin)697
accessibility, ai
Which Copyleft Licence Is Suitable for an SVG? (ede)696
svg, licensing
I Stored a Website in a Favicon695
html, favicons, experiments
Build SVG Charts for Web Applications With Code Examples694
svg, visualization, examples
Image Optimization for Core Web Vitals in 2026: What Actually Moves the Needle693
optimization, performance, web-vitals, avif, webp, jpeg-xl, png
Ending Responsive Images (gri/clo)692
responsive-design, lazy-loading, hints
4 Tiny Mistakes That Secretly Destroy App Performance691
performance, web-apps, mistakes, cors, code-splitting, dependencies, backgrounds
Zoomable Image—Creating a Zoom Effect (bar)690
zooming, effects, hugo, javascript, css
How Alt Text Accessibility Supports Low-Vision Users689
accessibility, alt-text, wcag
What’s !important #10: HTML-in-Canvas, Hex Maps, E-Ink Optimization, and More (dxn/css)688
css, html, retrospectives, canvas, apis, web-platform
Do Graphs and Charts Need to Be Accessible? (tem)687
accessibility, png, svg, aria, information-design
The End of Responsive Images (wil/pic)686
html, responsive-design
Logo Design Trends for 2026: What I’m Actually Seeing (and What Most Designers Are Missing) (web)685
design, logos, typography, trends
SVG Filters Guide: Getting Started With the Basics (ana/fro)684
guides, fundamentals, svg, filters
Why Some Images Look Brighter Than Your Screen683
colors
Making Emojis and Icons Screen Reader Accessible (pop)682
emoji, icons, accessibility, screen-readers, html
Your Options for Preloading Images With JavaScript (mac)681
preloading, javascript, techniques
More Easy Light-Dark Mode Switching: “light-dark()” Is About to Support Images (bra)680
css, functions, dark-mode
SVG Favicons That Respect Theme Preference (paw)679
svg, favicons, dark-mode
Cascade Icons678
css, icons
JPEG Compression (sop)677
jpeg, compression
Folded Corner With CSS (kit)676
css, clipping
Figcaptions Versus Alt Text (tem)675
html, alt-text, accessibility, comparisons
Put “aria-hidden=true” on Decorative SVGs (mat)674
svg, aria, accessibility, attributes
SVGs on the Web: Performance Comparison Based on How You Load Them (nuc)673
svg, performance, comparisons
Sprites on the Web (jos)672
css, sprites, techniques
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design (hol/css)671
svg, progress-indicators, performance
How to Write Alt Text for News (sta/the)670
how-tos, alt-text, accessibility
Measuring SVG Rendering Time (sto)669
svg, png, rendering, performance, web-vitals, metrics
What Is JPEG XL: Do We Really Need Another Image Format? (aar/deb)668
jpeg-xl, quality, performance, metrics
How to Design Great Alt Text: An Introduction (deq)667
how-tos, introductions, alt-text, accessibility
How to Favicon in 2026: Three Files That Fit Most Needs (sit/evi)666
how-tos, favicons
Accessibility (bog+/htt)665
web-almanac, studies, research, metrics, accessibility, colors, contrast, zooming, scaling, internationalization, keyboard-navigation, skip-links, forms, labels, placeholders, multimedia, aria, overlays, ai
3 Color Contrast Mistakes Designers Still Make664
contrast, colors, wcag, accessibility, mistakes
Non-Blocking Cross-Browser Image Rendering on the Canvas (mys/per)663
canvas, javascript, performance
Non-Square Image Blur Extensions (ana/fro)662
css, effects
The Idiot Sandwich—on Embedding Alt Text (ede)661
alt-text, accessibility
How to Create an Adaptive SVG Favicon Using the “prefers-color-scheme” Media Query (zor/css)660
videos, how-tos, favicons, svg, css
How to Create 3D Images in CSS With the Layered Pattern (sun/fro)659
how-tos, css, transforms
100, 150, or 200? Debunking the Alt Text Character Limit658
alt-text, accessibility, link-lists
“pathLength” Makes Makes SVG Path Animations Easier to Manage (ste)657
svg, animations
AI and Alt Text (ted+/web)656
videos, ai, alt-text, accessibility
Alt Text or Image Description?655
accessibility, alt-text, comparisons, terminology
Why Do We Need Dithering?654
dithering
The Present and Potential Future of Progressive Image Rendering (jaf)653
jpeg, png, webp, avif, jpeg-xl, pjpeg, comparisons, outlooks
Inset Shadows Directly on “img” Elements (ana/fro)652
svg, css, shadows
Accessibility Minute—September 2025 (col)651
accessibility, alt-text, captions, comparisons
Replace Your Animated GIFs With SVGs (fro)650
gif, svg, animations, css
Your Images Are (Probably) Oversized649
html, pixel-density
Liquid Glass in the Browser: Refraction With CSS and SVG648
effects, liquid-glass, css, svg
Anatomy of Good Icons (nng)647
videos, icons, design
Added Support for WebP Images646
webp, github
Testing Methods: Images of Text (dec)645
accessibility, testing, wcag
Icon Interpretation vs. Recognizability644
videos, icons, usability
How to Build a Cohesive Icon Library for Your Design System643
how-tos, design-systems, icons
Implementing Accessible SVG Elements (a11)642
accessibility, svg, fundamentals
A Friendly Introduction to SVG (jos)641
introductions, svg
A Simple Website640
websites, history, layout, animations, tables, javascript, ajax, flash, deploying, simplicity
Accessible Social Media: Alt Text639
accessibility, social-media, alt-text
How Long Can Alt-Text Be? (jup)638
accessibility, alt-text
Stop Using Hero Images! They’re Killing Your UX (web)637
design, user-experience
Implement WCAG Rules in Your Infographics (a11)636
accessibility, wcag, visualization, design, alt-text, contrast, colors
SVG Optimization and Accessibility Basics (dbu)635
fundamentals, svg, optimization, accessibility
Writing Alt Text With AI (jar)634
ai, prompting, alt-text, accessibility
PNG Is Back (pro)633
png
Portable Network Graphics (PNG) Specification (Third Edition) (pro+/w3c)632
standards, png
Why JPEGs Still Rule the Web (ern/iee)631
jpeg, history
Having “figure” Match Width of Contained Image (jef)630
html, css
Social Media and Ad Specs Cheat Sheet (ron)629
websites, cheat-sheets, social-media, monetization
You Can Style Alt Text Like Any Other Text (geo/css)628
alt-text, accessibility, css, javascript
Finding the Joy in Alt Text (bry)627
alt-text, accessibility
How I Built Dynamic Social Media Images in Eleventy Using Cloudinary (chi)626
eleventy, social-media, tooling, cloudinary
Revisiting Image Maps (mal/css)625
image-maps, html, techniques
The Problem(s) With Image Accessibility624
accessibility, alt-text, html
Image Alt Text Guide: How to Write and Add Image Alt Text Reference623
guides, accessibility, user-experience, seo, alt-text, shopify
A11y 101: 1.4.5 Images of Text (nat)622
introductions, accessibility, wcag, alt-text
Background Image Opacity in CSS (jim)621
css, backgrounds, transparency+opacity
The Importance of Alt Text for Images620
alt-text, accessibility, dei, compliance, legal, seo, user-experience
A Guide to Alt Text Across Popular Tools (pop)619
guides, alt-text, accessibility, tooling
How Does Chrome Prioritize Image Requests? (deb)618
chrome, google, browsers, performance
Minimal CSS-Only Blurry Image Placeholders (kal)617
placeholders, backgrounds, css, techniques
Create an HTML Dialog When You Click an Image (cas)616
html, modals
Revisiting CSS “border-image” (mal/css)615
css, borders, data-urls
Quick Accessibility Wins That Are Easy to Implement (kev)614
videos, accessibility, html, semantics, alt-text, contrast, colors, keyboard-navigation, focus, skip-links
Generate Growing Images Using Gemini API613
ai, gemini, apis
Maintaining Screenshot Quality and Color Profile in Figma (max)612
figma, screenshots, quality, colors
Super Crispy SVG Icons (ale)611
svg, icons, optimization
Image Comparison Slider in 6 Lines of JavaScript610
sliders, javascript
@11ty/image-color (zac)609
packages, npm, colors
Trusting AI With My Images Wasn’t Easy (dri)608
ai, alt-text, accessibility, automation, tooling
In Defense of Text Labels (chr)607
labels, icons, usability, design
Common Accessibility Challenges When Navigating Tables606
accessibility, tables, keyboard-navigation
How to Improve Webpage Speed: Tips and Best Practices605
how-tos, performance, optimization, tips-and-tricks, best-practices, redirecting, fonts, testing, tooling, webpagetest
Optimizing Images for Web Performance (tod/fro)604
performance, optimization, jpeg, png, webp, avif, html, caching
GitHub Copilot Brings Mockups to Life by Generating Code From Images (web)603
github-copilot, ai, design
How to Favicon in 2025: Three Files That Fit Most Needs (sit/evi)602
how-tos, favicons
Alt Text Accessibility: Balancing AI and Human Oversight (tec+/equ)601
podcasts, accessibility, multimedia, alt-text, ai, quality
How to Gif (2025 Edition) (oll)600
how-tos, multimedia, gif, png, webp, avif, jpeg-xl
10 Digital Accessibility Mistakes to Avoid599
accessibility, mistakes, alt-text, contrast, colors, keyboard-navigation, aria, semantics, headings, labels, forms, pop-ups, testing
Generating Image Descriptions and Alt-Text With AI (dri)598
alt-text, accessibility, ai, quality
Page Bloat Update: How Does Ever-Increasing Page Size Affect Your Business and Your Users? (tam/spe)597
performance, trends, metrics, javascript, desktop, mobile
Using SVGs on Canvas With Compose Multiplatform (eev)596
canvas, svg, javascript
How to Fix Washed Out Colors in Google Chrome Screenshots for Clear and Accurate Images595
how-tos, screenshots, colors, chrome, google, browsers
Remove the “direction” Property on Your Arrow Icons (ali)594
icons, microcontent
Quick Note: Limit Use of “Logo” in Alt Text (nat)593
accessibility, logos, alt-text, microcontent
Media (ste+/htt)592
web-almanac, studies, research, metrics, multimedia, html
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers (ale/mat)591
html, buttons, icons, accessibility, screen-readers
Designer Problems: “Make the Logo Bigger!” (web)590
design, logos
Solved by Modern CSS: Feature Image (sha)589
css
Mastering SVG Arcs (sma)588
svg
How to Fix Storybook Screenshot Testing (not)587
how-tos, testing, screenshots, storybook, vitest
A Link on a Logo in the Header, What Should the Alt-Text Be? (ria/mat)586
accessibility, branding, links, logos, alt-text
Preloading Responsive Images (tre)585
html, hints, performance, preloading
Avoid Hotlinking Images With “Cross-Origin-Resource-Policy”584
security
Old Alt Text Advice (ste)583
accessibility, alt-text, html, microcontent, best-practices
Alt Text: Not Always Needed (nng)582
accessibility, alt-text, writing
Don’t Forget to Localize Your Icons (eri)581
localization, icons, culture
How to Identify Decorative Images and Boost Accessibility (a11)580
how-tos, decoration, accessibility, html, aria
Advanced Image Formats and When to Use Them: WebP, AVIF, HEIC, and JPEG XL579
webp, avif, jpeg-xl, comparisons
The Image Compression Challenge (Donating Money for Excess-Free Projects) (j9t)578
compression, performance, tooling
Dynamic Social Share Images Using Cloudinary (sia)577
social-media, tooling, cloudinary
10 Simple Ways to Make Your Social Media Posts Accessible576
accessibility, social-media, content, alt-text, captions, contrast
You Can Use “text-wrap: balance;” on Icons (ede)575
css, icons
How to Build an Image Search Application With OpenAI CLIP and PostgreSQL in JavaScript574
how-tos, search, ai, openai, postgresql, databases, javascript, functionality
AVIF vs. HEIC: Which Format Is Better?573
avif, comparisons
Icon Usability: When and How to Evaluate Digital Icons (nng)572
how-tos, usability, icons
How to Use CSS and SVG Clipping and Masking Techniques (wpe)571
how-tos, css, svg, clipping, masking
“img sizes=auto” for Native Lazy Loading (ste)570
code-pens, html, lazy-loading, performance
Building the Perfect Logo Strip (nil/9el)569
css, logos, techniques
Keeping Pixely Images Pixely (and Performant!) (chr/fro)568
css, effects
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)567
svg, examples
Supporting AVIF in Google Search (joh)566
google, search, avif, support
Harnessing Copilot and Other Gen-AI Tools to Increase Digital Accessibility Efficiency565
videos, ai, microsoft, tooling, accessibility, alt-text
Is Using “aria-label” to Add Alternative Text but No “alt” Attribute Still a WCAG Fail?564
discussions, accessibility, html, attributes, forms, labels, aria, alt-text
Mastering Typography in Logo Design (sma)563
typography, design, logos
Accessibility Specialists Warn Against Using AI for Alt Text562
accessibility, alt-text, ai
Writing Alt Text for a Scientific Figure561
accessibility, alt-text, writing, information-design
Good Intentions, Poor Context (tpg)560
accessibility, microcontent, buttons, links
Have It All: External, Styleable, and Scalable SVG (sco)559
svg, css
Designing Design Systems: Constructing an Icon System (ado)558
design, design-systems, icons, case-studies
“Practical SVG” Is Now Free to Read Online (chr)557
books, svg
Can AI Be Used to Write Good Descriptive Alt Text for Images in 2024? (the)556
accessibility, alt-text, ai
Alternative Text in Action555
accessibility, alt-text, writing, examples
Do Grayscale Images Take Less Space?554
colors, performance
The Little Things: Confusing Error Messages (brw)553
errors, developer-experience
Seamless Screenshot Testing for Compose With Screenshotbot552
screenshots, regressions, testing, tooling
How Top HR Agencies Build Trust Through Logo Designs551
design, logos, branding
Minimal SVG Favicon (sto)550
svg, favicons, minimalism
Ditch the Pixels: The Small and Vectorized Web (yor)549
html, svg
My Approach to Alt Text (aar)548
accessibility, processes, alt-text, link-lists
Alt Left (ste)547
accessibility, html, alt-text, anti-patterns
The Picture-Superiority Effect: Harness the Power of Visuals (nng)546
design, information-design
Images as the First Thing in a Button or Link (tem)545
accessibility, html, buttons, links
Taking Regular Screenshots of My Website544
screenshots, automation, playwright, github-actions
Write Alt Text Like You’re Talking to a Friend (spa/clo)543
accessibility, alt-text
Long Alt (aar)542
accessibility, alt-text, support, browsers, screen-readers
Why We Are Still Using 88×31 Buttons541
history, design
Sliding 3D Image Frames in CSS (css/sma)540
css, techniques
Faster Websites With the “picture” Element (fra)539
html, performance
How to Think About HTML Responsive Images (db)538
how-tos, html, responsive-design
“aspect-ratio” Gotcha (css)537
css, aspect-ratio
Introducing Jpegli: A New JPEG Coding Library536
introductions, jpeg, libraries, compression
How to Design Icons in Figma535
how-tos, icons, figma, design
Thoughts on Embedding Alternative Text Metadata Into Images (eri)534
accessibility, metadata
How to Invert the Colors Using CSS (ron)533
css, colors, filters
AVIF Is the Future of Web Images532
avif, performance, outlooks
The 88×31 Archive531
web, history
How to Make a Cursor Image Hover Effect With CSS and JS530
how-tos, css, javascript, cursors, hover
Everything You Need to Know About Image Formats in 2024 (web)529
jpeg, png, gif, webp, avif, pdf, svg
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro)528
svg, css, masking, performance
Dynamically Adding Text Alternatives to Images With AI (kar)527
automation, ai, accessibility, alt-text
How to Favicon in 2024: Six Files That Fit Most Needs (sit/evi)526
how-tos, favicons
Progressive JPEGs (PJPEG): The Key to Loading Images Faster on Your Website525
pjpeg, jpeg, performance, comparisons
The World’s Smallest PNG (eva)524
png, minimalism
AI Art Is the New Stock Image (ia)523
design, ai
Everything You Need to Know About Responsive Logo Design (web)522
design, branding, logos, responsive-design
Responsive SVGs (nil/5t3)521
svg, responsive-design
Border Images in CSS: A Key Focus Area for Interop 2023 (dip/mdn)520
borders, css, browsers, web-platform, interoperability
Practical “img” Element Defaults (zor/css)519
videos, css
AI for Web Devs: AI Image Generation (aus)518
ai, tooling, automation
“sizes=auto” Pretty Much Requires “width” and “height” Attributes (eee)517
html, attributes, maintainability
Create Dynamic Web Experiences With Interactive SVG Animations516
svg, animations, tooling
Text With Media Background: Practical Solutions515
microcontent, readability, accessibility
Stop Using AI-Generated Images (mic)514
ai
AVIF: Meet the Next Level Image File Format513
avif
Cloudinary: The “Dramatic” Story of JPEG XL Support So Far (jon/com)512
jpeg-xl, support, browsers
How to Write Good Alt Text for Screen Readers (cra)511
how-tos, accessibility, writing, alt-text, screen-readers
An Introduction to Working With SVGs in React510
introductions, svg, react
Some Sensible Defaults for Your “img” Elements (css)509
css
Images on the Web508
concepts, compression, jpeg, png, webp, avif, nextjs
Which Is the Best Image Format for Your Website?507
comparisons, jpeg, png, gif, webp, avif
The Ultimate Low-Quality Image Placeholder Technique (css)506
performance, web-vitals
How Mastodon Handles Images and Web Previews (rba)505
social-media, mastodon, open-graph, metadata, html
Stop Lazy Loading Product and Hero Images (gri/clo)504
performance, lazy-loading
How to Make Charts and Graphs More Accessible (pop)503
how-tos, information-design, accessibility
Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo)502
buttons, html, css, svg
How I Write Alt Text for Code Snippets on Social Media (ben)501
accessibility, alt-text, writing, social-media
What Is Alt Text and How to Write It (tpg)500
accessibility, alt-text, writing
Please Size Your Inline SVGs (aar)499
svg
An “alt” Decision Tree Using Only “:has()” (aar)498
accessibility, css, alt-text
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources II (sma)497
accessibility, content, best-practices, techniques
Alt Text Hall of Fame (ste/alt)496
websites, accessibility, writing, alt-text
Responsive Images: DIY Implementation in 6 Steps495
html, responsive-design
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources (sma)494
accessibility, content, best-practices, techniques
SVG Gradients: Solving Curved Challenges493
svg, gradients
Using Imagery in Visual Design (nng)492
design, content
How to Use CSS “object-fit” and “object-position” (ral)491
how-tos, css
JPEG XL: How It Started, How It’s Going490
compression, jpeg-xl
Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images (css/sma)489
css, effects
Displaying Your Full-Sized YouTube Thumbnail or a Custom OG Image in a Twitter Card (phi)488
youtube, twitter+x, open-graph, social-media, metadata
Creating SVG Animations Using Tailwind CSS487
svg, animations, tailwind
Understanding SVG Paths486
svg
What Does the Image “decoding” Attribute Actually Do? (tun)485
html, attributes, performance
How to Add a CSS Reveal Animation to Your Images (css)484
how-tos, css, animations
Is There a Viable Animated GIF Alternative Yet or What? (tyl/clo)483
gif
Deploying AVIF for More Responsive Websites482
avif, performance
Dithering (chr)481
dithering
The Image Sorting Experiment480
information-design, sorting, experiments
A Designers Guide to the Principles of Web Design479
guides, design, principles, consistency, legibility, navigation, hierarchy, whitespace, usability
The Death of JPEG-XL478
jpeg-xl
The Alt Text War—SEO vs. Accessibility477
accessibility, seo, writing, alt-text, comparisons
What Makes a Good Screenshot? (llo/tpg)476
accessibility
Convert PNG to JPG Using FFmpeg (ama)475
png, jpeg, conversion, tooling
The Ultimate Guide to Image Optimisation (fox/cal)474
guides, performance, compression, optimization
Change Favicon on Switching Browser Tabs in JavaScript (ami)473
favicons, javascript
Are You Making These Five Mistakes When Writing Alt Text?472
accessibility, writing, alt-text, mistakes
Unlocking SVG’s Superpowers (btc)471
videos, svg
On Container Queries, Responsive Images, and JPEG-XL (gri/clo)470
css, container-queries, responsive-design, jpeg-xl
Dithering Images With React/JavaScript469
dithering, react, javascript
How to Style Your Alt Text (ede)468
how-tos, css, accessibility, alt-text
Using Focal Points, Aspect Ratio, and Object-Fit to Crop Images Correctly (hen)467
css, aspect-ratio
Building an Animated SVG Logo With animejs466
svg, logos, animations, vuejs
You Kinda Want an Orange Favicon (chr)465
favicons, browsers, theming
How to Favicon in 2023: Six Files That Fit Most Needs (sit/evi)464
how-tos, favicons
Learn Images (wil)463
courses, svg, gif, png, jpeg, webp, avif
Easy SVG Customization and Animation: A Practical Guide (cod/sma)462
guides, svg, animations
Optimal Images in HTML (ste/bui)461
html, backgrounds, performance, optimization
The Modern Way of Serving Images (kur)460
html, performance
Creating a Custom Cursor Using CSS (css)459
cursors, css, svg
Easy Dynamic Social Sharing Image With Eleventy458
eleventy, social-media, tooling
6 Common SVG Fails (and How to Fix Them) (css)457
svg
Optimizing the Image Element LCP (sma)456
performance, web-vitals
Advanced Usage Patterns for Taking Page Element Screenshots With Playwright455
screenshots, playwright, javascript
Interactive SVG Reference454
svg
Stock Photos of People With Disabilities (den)453
accessibility, content
Compress an Image Before Upload With JavaScript (rik)452
javascript, file-handling, compression
Website Accessibility (15 Best Practices) (bru)451
accessibility, best-practices, content, readability, captcha, alt-text, forms, focus, html, tooling
Mini-Guide to Add an Image (its/mat)450
html
CSS Infinite Slider Flipping Through Polaroid Images (css/css)449
sliders, css, effects
Enough With the Pointless Images (boa)448
design, decoration
Take Full-Size Screenshots of Websites Without Any Tools in Chrome (ami)447
browsers, google, chrome, screenshots
Reduce Image Sizes by Removing Metadata (per)446
metadata, performance, optimization
CSS Infinite and Circular Rotating Image Slider (css/css)445
sliders, css, animations
Handling Images With Inconsistent Height in CSS (ami)444
css
What Image Format Should You Use in Your Next Project? (alv)443
A Guide to Image Optimization on Jamstack Sites (daw/sma)442
guides, compression, optimization, performance, tech-stacks, jamstack
6 Steps to Improve HTML Images for Users and Developers (aus)441
html, performance, responsive-design
The Case for JPEG XL (jon)440
jpeg-xl, compression
Screenshotting VoiceOver on macOS (kil)439
tooling, screenshots, apple, unix-like, voiceover
Twitter Reminds Us About Alt Text, but How Good Are We at It?438
accessibility, writing, alt-text, twitter+x
Google on Alt Text SEO and Accessibility (joh+/sea)437
google, seo, accessibility, writing, alt-text
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project436
accessibility, svg, lessons
How to Write Good Alt Text (cfe)435
how-tos, accessibility, writing, alt-text
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep)434
svg, sprites, performance
How to Scale SVG (ame/css)433
how-tos, scaling, svg
GIFs Without the .gif: The Most Performant Image and Video Options Right Now (oll/css)432
performance, multimedia, gif, html
Media (htt)431
web-almanac, studies, research, metrics, multimedia
Justin Yarbrough Talks About Alt Text430
podcasts, accessibility, writing, alt-text
Converting PNG Images to WebP Using PHP (ami)429
conversion, png, webp, php
How Your Favourite UI Libraries Manage Their Icons (and)428
libraries, icons, maintenance
8 Tricks for SVG Optimization427
svg, tips-and-tricks, optimization
Screenshots Are Not Documentation426
documentation, screenshots
AI-Generated Images From AI-Generated Alt Text (aar)425
accessibility, writing, alt-text, ai
What Are Best Practices for Creating Alt Text?424
accessibility, writing, alt-text, best-practices
Upload An Image With Node.js (rik)423
nodejs, file-handling
Research Insight: Accessibility of Images (ihe/tet)422
accessibility, usability, research
Vector Animations With Figma and SVG Animate421
animations, figma, svg
Powerful Image Optimization Tools (lou/sma)420
link-lists, compression, performance, tooling
Can SVG Symbols Affect Web Performance?419
svg, performance
Best Practices for Images418
html, best-practices
How to Serve WebP Images on nginx417
how-tos, webp, nginx, servers
Image Guard (j9t)416
packages, npm, compression, performance, jpeg, png, gif, webp, avif
Icon-Only Links Fail WCAG (tem)415
accessibility, links, wcag, icons, conformance
Writing Useful Alt Text (mic)414
accessibility, writing, alt-text
Just How Long Should Alt Text Be? (geo/css)413
accessibility, writing, alt-text
Magical SVG Techniques (sma)412
svg, techniques
How to Upload an Image With PHP (rik)411
how-tos, php, file-handling
Image Borders in CSS (ami)410
css, borders
How to Turn HTML Webpage Into an Image?409
how-tos, html, conversion
Alternative Text (Alt Text) (pop)408
accessibility, html, writing, alt-text
Picture Perfect Images With the Modern “<img>” Element (add)407
html, performance, web-vitals
Optimizing SVG Patterns to Their Smallest Size (css)406
svg, performance
15 Useful Placeholder Tools for Designers and Developers405
tooling, content, placeholders, testing, link-lists
Favi-Gone: 6 Reasons Why Your Favicon Disappeared From the Google Search Results404
favicons, google, seo
There Is No Character Limit for “Alt Text” (yat)403
accessibility, html, alt-text
Never, Ever, Ever Use Pixelation for Redacting Text402
content, obfuscation, security
Building an Adaptive Favicon (arg)401
favicons
How to Favicon in 2022: Six Files That Fit Most Needs (sit/evi)400
how-tos, favicons
Optimize Your PNGs With Oxipng and pre-commit (ada)399
png, performance, compression, tooling
Big Images, Blazingly Fast398
performance, quality
Create an Open Graph Image Generator With Node.js (log)397
nodejs, open-graph
Social Media Image Sizes 2022: Cheat Sheet for Every Network396
cheat-sheets, social-media
Alt Tag Emptiness (ste)395
accessibility, html, alt-text, aria
Responsive Image Gallery With Animated Captions (5t3)394
css, animations, responsive-design, examples
Image Magnifier Using Only One Line of CSS (ami)393
css
The Many Methods for Using SVG Icons (hui)392
css, svg, icons
Image Display Elements (5t3)391
html, responsive-design
Why Your Website Should Not Use Dithered Images390
dithering, compression, performance
We Analyzed 425,909 Favicons389
favicons
Beginner’s Guide to Responsive Images: How to Get Them Right (lou)388
guides, responsive-design, html
Using Modern Image Formats: AVIF and WebP (add/sma)387
avif, webp, jpeg, png, comparisons, performance, compression
Optimizing Images on the Web386
performance, cloudflare
Blowing Up HTML Size With Responsive Images (deb)385
html, performance, responsive-design
Fractional SVG Stars With CSS384
css, svg
5 Steps for Writing Alt Text for Accessibility383
accessibility, writing, alt-text
One Favicon to Rule Them All (j9t)382
html, favicons
Decoding AVIF: Deep Dive With Cats and imgproxy (evi)381
avif, deep-dives
Exploring the CSS Paint API: Image Fragmentation Effect (css/css)380
css, apis, effects
Pixelart and the “image-rendering” Paradox379
css, art
Writing Great Alt Text: Emotion Matters (jaf)378
accessibility, writing, alt-text, user-experience
What to Know About AVIF on Cloudinary (sia)377
avif, cloudinary
Image Descriptions: A Human Technique That Robots Can’t Grasp376
accessibility, alt-text
The Anatomy of a Web Page: 14 Basic Elements375
design-patterns, navigation, buttons, forms, multimedia, favicons, link-lists
Beyond Basic Alt Text—Charts, Maps, and Diagrams374
accessibility, alt-text, information-design
A Framework for Building Open Graph Images373
open-graph
OMG, SVG Favicons FTW!372
html, favicons, svg
Your Image Is Probably Not Decorative (eri/sma)371
decoration, accessibility, alt-text
Adding Shadows to SVG Icons With CSS and SVG Filters (css)370
css, svg, icons, shadows, filters, effects
Half the Size of Images by Optimising for High Density Displays (jaf)369
html, performance
Serving Sharp Images to High Density Screens (jaf)368
performance
Using AVIF to Compress Images on Your Site367
performance, avif, compression
How to Build an Image Comparison Slider366
how-tos, sliders, react
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma)365
accessibility, svg, screen-readers
JPEG XL364
websites, jpeg-xl
Content-Aware Image Resizing in JavaScript363
javascript, resizing
Web Developer’s Guide to AVIF Images362
guides, avif
How to Use SVG Image Sprites (cra)361
how-tos, svg, sprites
Create Responsive Image Effects With CSS Gradients and “aspect-ratio” (5t3/sma)360
responsive-design, css, gradients, aspect-ratio, effects
Seven Myths About Alt Text359
accessibility, alt-text, myths
Front-End Performance 2021: Assets Optimizations (vit/sma)358
performance, checklists, link-lists, compression
Optimizing Image Depth (mey/css)357
quality, performance, optimization
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format356
webp, google
GIFs and “prefers-reduced-motion” (chr/css)355
gif, reduced-motion, html
How to Design a Set of Icons354
design, icons
Creating a Custom Cursor Using CSS?353
css, svg, cursors
AVIF Has Landed (jaf)352
avif, performance, quality, jpeg, webp, svg, png, comparisons
Optimize Images With a GitHub Action (chr/css)351
compression, github-actions
Pausing a GIF With “details”/“summary” (chr/css)350
html, disclosure-widgets, gif, animations
Writing Alt Text for Data Visualization349
accessibility, alt-text, writing, information-design, visualization
Lazy Loading Images in Svelte (css)348
lazy-loading, svelte, performance
Webwaste (ger/ali)347
web, sustainability
How to Design a Brand Logo (With Ease) (sma)346
how-tos, design, branding, logos
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css)345
favicons, svg, dark-mode
How to Use an Emoji as a Favicon Easily (chr/css)344
how-tos, favicons, emoji, data-urls
Different Favicon for Development (chr/css)343
favicons, environments
Tools for Optimizing SVG (chr/css)342
tooling, svg, optimization, link-lists
Accessible SVGs: Inclusiveness Beyond Patterns (car/sma)341
svg, accessibility, tooling
Setting Height and Width on Images Is Important Again (tun/sma)340
html, performance, web-vitals
Optimize CSS Background Images With Media Queries339
css, backgrounds, media-queries, optimization
Do This to Improve Image Loading on Your Website (fon/css)338
performance, html
AVIF for Next-Generation Image Coding337
avif, compression
Progressive JPEGs: An Introduction336
introductions, jpeg, pjpeg, compression
Dark Mode Favicons (chr/css)335
favicons, dark-mode
Speed Up Your Website With WebP (sma)334
performance, optimization, webp
A Guide to Optimizing Images for Mobile (sma)333
guides, performance, optimization, mobile
Workflow Considerations for Using an Image Management Service (chr/css)332
performance, tooling, content-delivery
How to Change Your Favicon in Wordpress: A Step-by-Step Guide (yoa)331
guides, favicons, wordpress
Faster Image Loading With Embedded Image Previews (sma)330
performance, lazy-loading, techniques, javascript
The Making of an Animated Favicon (pre/css)329
favicons, animations, canvas
When to Use “img,” “img@srcset,” and “picture” and “source” (j9t)328
html
Image Optimization in WordPress (sma)327
wordpress, performance, optimization
Understanding Image Compression: Tooling and Context (j9t)326
performance, compression, tooling
A Crime Called Favicon (j9t)325
favicons, maintainability
A Practical Guide to SVG and Design Tools (sma)324
guides, svg, sketch, figma, adobe, tooling, design
SVG Circle Decomposition to Paths (sma)323
svg, animations
Stacked “Borders” (mey/css)322
css, borders, shadows, backgrounds, gradients
Did You Know That CSS Custom Properties Can Handle Images Too? (fon/css)321
css, custom-properties
Using Artificial Intelligence to Generate Alt Text on Images (css)320
ai, alt-text, accessibility
Improve Animated GIF Performance With HTML5 Video (sma)319
gif, multimedia, performance
Apply a Filter to a Background Image (chr/css)318
backgrounds, filters, css
Responsive Images (wil/ali)317
html, css, responsive-design
Icon Fonts vs. SVGs—Which One Should You Use in 2018?316
fonts, icon-fonts, svg
Converting Images to WebP (mal/sma)315
conversion, webp, sketch, photoshop, adobe, cloudinary
Image Alt Text vs. Title Text vs. File Names: What’s the Difference? (bri/sea)314
seo, alt-text, accessibility, naming, microcontent, comparisons
Improving Performance Perception: On-Demand Image Resizing (swa)313
performance, optimization, resizing, html
What Is SVG Good For? (chr/css)312
svg, examples
The Four Big Ways Jetpack Helps With Image Performance (css)311
wordpress, plugins, performance
Designing for Accessibility and Inclusion (sma)310
design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability
Some Things About “alt” Text (chr/css)309
accessibility, alt-text, html
Bad Icons: How to Identify and Improve Them (nng)308
how-tos, icons, design, usability
The Front-End Checklist (the)307
websites, checklists, html, css, javascript, accessibility, performance, seo
Tips for Icon Usability306
videos, icons, usability, tips-and-tricks
A Pretty Good SVG Icon System (chr/css)305
svg, icons
When Large Isn’t Large Enough: Designing With Hero Images (sma)304
design
Masking vs. Clipping: When to Use Each (sar/css)303
masking, clipping, svg, comparisons
GIF, PNG, JPG, or SVG: Which One to Use?302
jpeg, png, gif, svg, webp, comparisons
Let the Content Delivery Network Optimize Your Images (jon/sma)301
content-delivery, optimization, performance
What Is the Right Image Format for Your Website?300
compression, jpeg, gif, png, svg, webp
Guetzli, Google’s New JPEG Encoder (tel)299
performance, jpeg, compression, tooling
Measuring Image Widths in JavaScript (Carefully) (chr/css)298
javascript
Align SVG Icons to Text and Say Goodbye to Font Icons (pro)297
svg, icons, icon-fonts, fonts, css, design, alignment
A Compendium of SVG Information (chr/css)296
overviews, svg, link-lists
Develop Locally, Use Images From Production (chr/css)295
environments, processes, apache, servers
The Joy of Optimizing (una/btc)294
videos, performance, optimization
Create Thumbnails With PHP (rik)293
php
Responsive Images in CSS (chr/css)292
responsive-design, css, html
SVG Filter Primitives—Input and Output291
svg, filters
SVG and Media Queries (jaf)290
svg, css, media-queries, canvas, support, browsers
The SVG “path” Syntax: An Illustrated Guide (chr/css)289
guides, svg
WordPress SVG Support: How to Enable SVGs in WordPress288
how-tos, wordpress, svg
An Introduction to SVG Filters287
introductions, svg, filters
Accessible SVGs in High Contrast Mode (eri/css)286
accessibility, svg, contrast, colors
Are Icons Content? (chr/css)285
icons, html, content
Accessible SVGs (css)284
svg, accessibility, examples
Using WebP Images (mal/css)283
webp, conversion
Get the Original Image From a Data URL (chr/css)282
data-urls
Practical SVG (chr/ali)281
svg
High Performance SVGs (sar/css)280
svg, performance, tooling, optimization
Working With Images in Stylesheets With PostCSS (css)279
css, backgrounds, postcss, examples
RespImageLint—Linter for Responsive Images278
bookmarklets, html, responsive-design, linting
How PNG Works277
png, compression
The Hamburger Icon Debate276
mobile, icons, design-patterns
Why npm Scripts? (css)275
npm, nodejs, conversion, linting, minification, compression, sprites, examples
Usability Testing of Icons (nng)274
icons, testing, usability
Lazy-Loading Images: How Not to Really Annoy Your Users273
lazy-loading, performance, jquery
Blending Modes Demystified (ali)272
design, colors, effects, css
A Guide for SVG Support in Email (geo/css)271
guides, svg, support, email
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css)270
guides, smil, svg, animations
Decorating the Web With CSS Border Images269
decoration, css, borders
Creating Alpha Channel JPEGs Using SVG (zol)268
jpeg, svg, transparency+opacity
The Image Replacement Museum (mar/css)267
image-replacement, techniques, html, css, overviews, link-lists
Background Image Shapes (css)266
backgrounds, shapes, css, transforms, clipping, svg
Ensure High Contrast for Text Over Images (nng)265
contrast, colors, accessibility, usability
How to Make Charts With SVG (fon/css)264
how-tos, visualization, svg, html, javascript
Factors Affecting Website Performance263
performance, network, browsers, memory, servers, multimedia
Creating Cel Animations With SVG (hey/sma)262
animations, svg, css, sass
Preloading Images in Parallel With Promises (kit)261
javascript, promises, preloading, performance
The Anatomy of Responsive Images (jaf)260
html, responsive-design, support, browsers
SVG Is for Everybody (chr/btc)259
videos, svg
SVG Lessons I Learned the Hard Way (sar/btc)258
videos, svg, lessons
Mastering Image Optimization in WordPress257
wordpress, optimization, performance
Performance Tools (fon/css)256
performance, tooling, content-delivery, testing, dev-tools, css, javascript, optimization, link-lists
The Art of SVG Filters and Why It Is Awesome (sma)255
svg, filters, css
SVG Fallbacks Guide (ame/css)254
guides, svg, graceful-degradation
image-dimensions (sin)253
packages, npm
HTML5 Image Description Extension (“longdesc”) (cpt/w3c)252
html, standards
Responsive Hero Images (gri/clo)251
responsive-design
Using WebP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr (zol)250
webp, jpeg, png, polyfills, modernizr
CSS Sprites With Sass and Compass249
css, sprites, sass, compass
Why Responsive Images Matter (wil/ali)248
responsive-design
Responsive Images in Practice (ali)247
responsive-design, html, css
How SVG Fragment Identifiers Work (chr/css)246
svg, css
Styling and Animating SVGs With CSS (sar/sma)245
svg, css, animations
Probably Don’t Base64 SVG (chr/css)244
svg, data-urls, base64
A Guide to SVG Animations (SMIL) (sar/css)243
guides, svg, animations, smil
Image Optimization Services (gri/clo)242
performance, optimization, link-lists
Don’t Use “<picture>” (Most of the Time) (gri/clo)241
html, responsive-design
How a New HTML Element Will Make the Web Faster (ars)240
html, performance, responsive-design
Making SVGs Responsive With CSS (sar/cod)239
svg, responsive-design, css
Favicons, Touch Icons, Tile Icons, Etc.—Which Do You Need? (css)238
icons, favicons
Swapping Out SVG Icons (chr/css)237
svg, icons, css, jquery, techniques
How to “Resize” Images With CSS236
css, media-queries, resizing
Testing Responsive Images (wil/ali)235
html, responsive-design
Picturefill 2.0: Responsive Images and the Perfect Polyfill (sma)234
html, responsive-design, polyfills
Tips for Creating Accessible SVG (tin)233
accessibility, svg, tips-and-tricks
Dealing With Content Images in Email (chr/css)232
email, html, wordpress, responsive-design
“srcset” and “sizes” (eee)231
html, responsive-design
A Q&A on the Picture Element (wil+/ali)230
interviews, html, semantics, responsive-design
Shadow DOM229
shadow-dom, dom, svg, angularjs, css, mathml
Rethinking Responsive SVG (sma)228
responsive-design, svg, css
One Solution to Responsive Images (sma)227
responsive-design, html, php
Animating Vectors With SVG (bri/24w)226
svg, animations, javascript
Why Responsive Images Is So Hard (chr/css)225
responsive-design, css, html, art-direction
Webpage Performance (geo)224
performance, compression, minification, caching, content-delivery
Image Compression for Web Developers223
compression, performance, link-lists
Using Remote Image Files When You Develop Locally (lul)222
processes, drupal, apache, servers
WebKit Has Implemented “srcset”, and It’s a Good Thing (wil/sma)221
webkit, html, responsive-design
SVG Fallbacks (chr/css)220
svg, support, browsers, png
SVG Filters on Text (css)219
svg, filters, effects
Images Slowing Down Your Site? Try This One Weird Trick! (aer)218
performance, javascript
The Web Designer’s Guide to Image Copyrights217
guides, design, licensing
Simple Responsive Images With CSS Background Images (sma)216
responsive-design, backgrounds, css, html
Why We Need Responsive Images (tka)215
responsive-design, performance, metrics
Replace the Image in an “<img>” With CSS (css)214
css, image-replacement, techniques
How to Create SVG Paths Easily Using the GIMP (zol)213
how-tos, svg
Media Queries Within SVG (tka)212
svg, css, media-queries, support, browsers
Media Queries in SVG Images (gri/clo)211
svg, css, media-queries
Using SVG (chr/css)210
svg, css, support, browsers, examples, data-urls, tooling, link-lists
Favicon: A Changing Role209
html, favicons
Web Technology: 5 Things to Watch in 2013 (sts/cne)208
browsers, standards, performance
CSS Masks—How to Use Masking in CSS Now (sch)207
how-tos, css, masking, svg
Perfecting Your Website’s Favicon206
favicons, optimization
Compressive Images (sco)205
compression, jpeg
Better SVG Sprites With Fragment Identifiers (sto)204
svg, sprites
Responsive Image Format203
responsive-design, jpeg, pjpeg
CSS Sprites Revisited (sma)202
css, sprites, techniques
On Responsive Images (chr/css)201
html, responsive-design
The Need for a Responsive Web Image Format (tel)200
responsive-design, mobile, webp