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 respect and accountability. 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, png, screenshots, sprites, svg, webp (non-exhaustive) · “images” × ? · “images” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
I Was Tired of Building 474 Separate Pages for Open Graph Images (zac)716
open-graph, automation
How to Test Image Quality Across Responsive Breakpoints Before You Ship715
how-tos, testing, quality, responsive-design, performance
Background Image Refraction in CSS (pre/fro)714
css, backgrounds, effects
Intent to Ship: JPEG XL (jaf/moz)713
jpeg-xl, firefox, browsers
AI-Generated Images Can Perform as Well as Stock Photography (nng)712
ai, user-experience
Animating CSS “border-image” (pre/css)711
css, borders, animations
Something Nobody Told You About The Image Element (It Can Overflow) (css/fro)710
html, overflow, css
Why Tiny JPEGs Look Different in Chrome709
jpeg, chrome, browsers
The Accessibility Paradox708
design, alt-text, accessibility
Image to Text (ada)707
accessibility, ai, alt-text
CSS Linked Parameters Module Level 1 (tab+/w3c)706
css, svg
I Thought AVIF Would Make Every Image Smaller—It Didn’t (mal)705
avif, compression, webp
Accessibility Is Resistance (tin)704
accessibility, ai
Which Copyleft Licence Is Suitable for an SVG? (ede)703
svg, licensing
I Stored a Website in a Favicon702
html, favicons, experiments
Build SVG Charts for Web Applications With Code Examples701
svg, visualization, examples
Image Optimization for Core Web Vitals in 2026: What Actually Moves the Needle700
optimization, performance, web-vitals, avif, webp, jpeg-xl, png
Ending Responsive Images (gri/clo)699
responsive-design, lazy-loading, hints
4 Tiny Mistakes That Secretly Destroy App Performance698
performance, web-apps, mistakes, cors, code-splitting, dependencies, backgrounds
Zoomable Image—Creating a Zoom Effect (bar)697
zooming, effects, hugo, javascript, css
How Alt Text Accessibility Supports Low-Vision Users696
accessibility, alt-text, wcag
Do Graphs and Charts Need to Be Accessible? (tem)695
accessibility, png, svg, aria, information-design
The End of Responsive Images (wil/pic)694
html, responsive-design
Logo Design Trends for 2026: What I’m Actually Seeing (and What Most Designers Are Missing) (web)693
design, logos, typography, trends
SVG Filters Guide: Getting Started With the Basics (ana/fro)692
guides, fundamentals, svg, filters
Why Some Images Look Brighter Than Your Screen691
colors
Making Emojis and Icons Screen Reader Accessible (pop)690
emoji, icons, accessibility, screen-readers, html
Your Options for Preloading Images With JavaScript (mac)689
preloading, javascript, techniques
More Easy Light-Dark Mode Switching: “light-dark()” Is About to Support Images (bra)688
css, functions, dark-mode
SVG Favicons That Respect Theme Preference (paw)687
svg, favicons, dark-mode
Cascade Icons686
css, icons
JPEG Compression (sop)685
jpeg, compression
Folded Corner With CSS (kit)684
css, clipping
Figcaptions Versus Alt Text (tem)683
html, alt-text, accessibility, comparisons
Put “aria-hidden=true” on Decorative SVGs (mat)682
svg, aria, accessibility, attributes
SVGs on the Web: Performance Comparison Based on How You Load Them (nuc)681
svg, performance, comparisons
Sprites on the Web (jos)680
css, sprites, techniques
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design (hol/css)679
svg, progress-indicators, performance
How to Write Alt Text for News (sta/the)678
how-tos, alt-text, accessibility
Measuring SVG Rendering Time (sto)677
svg, png, rendering, performance, web-vitals, metrics
What Is JPEG XL: Do We Really Need Another Image Format? (aar/deb)676
jpeg-xl, quality, performance, metrics
How to Design Great Alt Text: An Introduction (deq)675
how-tos, introductions, alt-text, accessibility
How to Favicon in 2026: Three Files That Fit Most Needs (sit/evi)674
how-tos, favicons
Accessibility (bog+/htt)673
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 Make672
contrast, colors, wcag, accessibility, mistakes
Non-Blocking Cross-Browser Image Rendering on the Canvas (mys/per)671
canvas, javascript, performance
Non-Square Image Blur Extensions (ana/fro)670
css, effects
The Idiot Sandwich—on Embedding Alt Text (ede)669
alt-text, accessibility
How to Create an Adaptive SVG Favicon Using the “prefers-color-scheme” Media Query (zor/css)668
videos, how-tos, favicons, svg, css
How to Create 3D Images in CSS With the Layered Pattern (sun/fro)667
how-tos, 3d, css, transforms
100, 150, or 200? Debunking the Alt Text Character Limit666
alt-text, accessibility, link-lists
“pathLength” Makes Makes SVG Path Animations Easier to Manage (ste)665
svg, animations
AI and Alt Text (ted+/web)664
videos, ai, alt-text, accessibility
Alt Text or Image Description?663
accessibility, alt-text, comparisons, terminology
Why Do We Need Dithering?662
dithering
The Present and Potential Future of Progressive Image Rendering (jaf)661
jpeg, png, webp, avif, jpeg-xl, pjpeg, comparisons, outlooks
Inset Shadows Directly on “img” Elements (ana/fro)660
svg, css, shadows
Accessibility Minute—September 2025 (col)659
accessibility, alt-text, captions, comparisons
Replace Your Animated GIFs With SVGs (fro)658
gif, svg, animations, css
Your Images Are (Probably) Oversized657
html, pixel-density
Liquid Glass in the Browser: Refraction With CSS and SVG656
effects, liquid-glass, css, svg
Anatomy of Good Icons (nng)655
videos, icons, design
Added Support for WebP Images654
webp, github
Testing Methods: Images of Text (dec)653
accessibility, testing, wcag
Icon Interpretation vs. Recognizability652
videos, icons, usability
How to Build a Cohesive Icon Library for Your Design System651
how-tos, design-systems, icons
Implementing Accessible SVG Elements (a11)650
accessibility, svg, fundamentals
A Friendly Introduction to SVG (jos)649
introductions, svg
A Simple Website648
websites, history, layout, animations, tables, javascript, ajax, flash, deploying, simplicity
Accessible Social Media: Alt Text647
accessibility, social-media, alt-text
How Long Can Alt-Text Be? (jup)646
accessibility, alt-text
Stop Using Hero Images! They’re Killing Your UX (web)645
design, user-experience
Implement WCAG Rules in Your Infographics (a11)644
accessibility, wcag, visualization, design, alt-text, contrast, colors
SVG Optimization and Accessibility Basics (dbu)643
fundamentals, svg, optimization, accessibility
Writing Alt Text With AI (jar)642
ai, prompting, alt-text, accessibility
PNG Is Back (pro)641
png
Portable Network Graphics (PNG) Specification (Third Edition) (pro+/w3c)640
standards, png
Why JPEGs Still Rule the Web (ern/iee)639
jpeg, history
Having “figure” Match Width of Contained Image (jef)638
html, css
Social Media and Ad Specs Cheat Sheet (ron)637
websites, cheat-sheets, social-media, monetization
You Can Style Alt Text Like Any Other Text (geo/css)636
alt-text, accessibility, css, javascript
Finding the Joy in Alt Text (bry)635
alt-text, accessibility
How I Built Dynamic Social Media Images in Eleventy Using Cloudinary (chi)634
eleventy, social-media, tooling, cloudinary
Revisiting Image Maps (mal/css)633
image-maps, html, techniques
The Problem(s) With Image Accessibility632
accessibility, alt-text, html
Image Alt Text Guide: How to Write and Add Image Alt Text Reference631
guides, accessibility, user-experience, seo, alt-text, shopify
A11y 101: 1.4.5 Images of Text (nat)630
introductions, accessibility, wcag, alt-text
Background Image Opacity in CSS (jim)629
css, backgrounds, transparency+opacity
The Importance of Alt Text for Images628
alt-text, accessibility, dei, compliance, legal, seo, user-experience
A Guide to Alt Text Across Popular Tools (pop)627
guides, alt-text, accessibility, tooling
How Does Chrome Prioritize Image Requests? (deb)626
chrome, browsers, performance
Minimal CSS-Only Blurry Image Placeholders (kal)625
placeholders, backgrounds, css, techniques
Create an HTML Dialog When You Click an Image (cas)624
html, modals
Revisiting CSS “border-image” (mal/css)623
css, borders, data-urls
Quick Accessibility Wins That Are Easy to Implement (kev)622
videos, accessibility, html, semantics, alt-text, contrast, colors, keyboard-navigation, focus, skip-links
Generate Growing Images Using Gemini API621
ai, gemini, apis
Maintaining Screenshot Quality and Color Profile in Figma (max)620
figma, screenshots, quality, colors
Super Crispy SVG Icons (ale)619
svg, icons, optimization
Image Comparison Slider in 6 Lines of JavaScript618
sliders, javascript
@11ty/image-color (zac)617
packages, npm, colors
Trusting AI With My Images Wasn’t Easy (dri)616
ai, alt-text, accessibility, automation, tooling
In Defense of Text Labels (chr)615
labels, icons, usability, design
Common Accessibility Challenges When Navigating Tables614
accessibility, tables, keyboard-navigation
How to Improve Webpage Speed: Tips and Best Practices613
how-tos, performance, optimization, tips-and-tricks, best-practices, redirecting, fonts, testing, tooling, webpagetest
Optimizing Images for Web Performance (tod/fro)612
performance, optimization, jpeg, png, webp, avif, html, caching
GitHub Copilot Brings Mockups to Life by Generating Code From Images (web)611
github-copilot, ai, design
How to Favicon in 2025: Three Files That Fit Most Needs (sit/evi)610
how-tos, favicons
Alt Text Accessibility: Balancing AI and Human Oversight (tec+/equ)609
podcasts, accessibility, multimedia, alt-text, ai, quality
How to Gif (2025 Edition) (oll)608
how-tos, multimedia, gif, png, webp, avif, jpeg-xl
10 Digital Accessibility Mistakes to Avoid607
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)606
alt-text, accessibility, ai, quality
Page Bloat Update: How Does Ever-Increasing Page Size Affect Your Business and Your Users? (tam/spe)605
performance, trends, metrics, javascript, desktop, mobile
Using SVGs on Canvas With Compose Multiplatform (eev)604
canvas, svg, javascript
How to Fix Washed Out Colors in Google Chrome Screenshots for Clear and Accurate Images603
how-tos, screenshots, colors, chrome, google, browsers
Remove the “direction” Property on Your Arrow Icons (ali)602
icons, microcontent
Quick Note: Limit Use of “Logo” in Alt Text (nat)601
accessibility, logos, alt-text, microcontent
Media (ste+/htt)600
web-almanac, studies, research, metrics, multimedia, html
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers (ale/mat)599
html, buttons, icons, accessibility, screen-readers
Designer Problems: “Make the Logo Bigger!” (web)598
design, logos
Solved by Modern CSS: Feature Image (sha)597
css
Mastering SVG Arcs (sma)596
svg
How to Fix Storybook Screenshot Testing (not)595
how-tos, testing, screenshots, storybook, vitest
A Link on a Logo in the Header, What Should the Alt-Text Be? (ria/mat)594
accessibility, branding, links, logos, alt-text
Preloading Responsive Images (tre)593
html, hints, performance, preloading
Avoid Hotlinking Images With “Cross-Origin-Resource-Policy”592
security
Old Alt Text Advice (ste)591
accessibility, alt-text, html, microcontent, best-practices
Alt Text: Not Always Needed (nng)590
accessibility, alt-text, writing
Don’t Forget to Localize Your Icons (eri)589
localization, icons, culture
How to Identify Decorative Images and Boost Accessibility (a11)588
how-tos, decoration, accessibility, html, aria
Advanced Image Formats and When to Use Them: WebP, AVIF, HEIC, and JPEG XL587
webp, avif, jpeg-xl, comparisons
The Image Compression Challenge (Donating Money for Excess-Free Projects) (j9t)586
compression, performance, tooling
Dynamic Social Share Images Using Cloudinary (sia)585
social-media, tooling, cloudinary
10 Simple Ways to Make Your Social Media Posts Accessible584
accessibility, social-media, content, alt-text, captions, contrast
You Can Use “text-wrap: balance;” on Icons (ede)583
css, icons
How to Build an Image Search Application With OpenAI CLIP and PostgreSQL in JavaScript582
how-tos, search, ai, openai, postgresql, databases, javascript, functionality
AVIF vs. HEIC: Which Format Is Better?581
avif, comparisons
Icon Usability: When and How to Evaluate Digital Icons (nng)580
how-tos, usability, icons
How to Use CSS and SVG Clipping and Masking Techniques (wpe)579
how-tos, css, svg, clipping, masking
“img sizes=auto” for Native Lazy Loading (ste)578
code-pens, html, lazy-loading, performance
Building the Perfect Logo Strip (nil/9el)577
css, logos, techniques
Keeping Pixely Images Pixely (and Performant!) (chr/fro)576
css, effects
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)575
svg, examples
Supporting AVIF in Google Search (joh)574
google, search, avif, support
Harnessing Copilot and Other Gen-AI Tools to Increase Digital Accessibility Efficiency573
videos, ai, microsoft, tooling, accessibility, alt-text
Is Using “aria-label” to Add Alternative Text but No “alt” Attribute Still a WCAG Fail?572
discussions, accessibility, html, attributes, forms, labels, aria, alt-text
Mastering Typography in Logo Design (sma)571
typography, design, logos
Accessibility Specialists Warn Against Using AI for Alt Text570
accessibility, alt-text, ai
Writing Alt Text for a Scientific Figure569
accessibility, alt-text, writing, information-design
Good Intentions, Poor Context (tpg)568
accessibility, microcontent, buttons, links
Have It All: External, Styleable, and Scalable SVG (sco)567
svg, css
Designing Design Systems: Constructing an Icon System (ado)566
design, design-systems, icons, case-studies
“Practical SVG” Is Now Free to Read Online (chr)565
books, svg
Can AI Be Used to Write Good Descriptive Alt Text for Images in 2024? (the)564
accessibility, alt-text, ai
Alternative Text in Action563
accessibility, alt-text, writing, examples
Do Grayscale Images Take Less Space?562
colors, performance
The Little Things: Confusing Error Messages (brw)561
errors, developer-experience
Seamless Screenshot Testing for Compose With Screenshotbot560
screenshots, regressions, testing, tooling
How Top HR Agencies Build Trust Through Logo Designs559
design, logos, branding
Minimal SVG Favicon (sto)558
svg, favicons, minimalism
Ditch the Pixels: The Small and Vectorized Web (yor)557
html, svg
My Approach to Alt Text (aar)556
accessibility, processes, alt-text, link-lists
Alt Left (ste)555
accessibility, html, alt-text, anti-patterns
The Picture-Superiority Effect: Harness the Power of Visuals (nng)554
design, information-design
Images as the First Thing in a Button or Link (tem)553
accessibility, html, buttons, links
Taking Regular Screenshots of My Website552
screenshots, automation, playwright, github-actions
Write Alt Text Like You’re Talking to a Friend (spa/clo)551
accessibility, alt-text
Long Alt (aar)550
accessibility, alt-text, support, browsers, screen-readers
Why We Are Still Using 88×31 Buttons549
history, design
Sliding 3D Image Frames in CSS (css/sma)548
css, techniques, 3d
Faster Websites With the “picture” Element (fra)547
html, performance
How to Think About HTML Responsive Images (db)546
how-tos, html, responsive-design
“aspect-ratio” Gotcha (css)545
css, aspect-ratio
Introducing Jpegli: A New JPEG Coding Library544
introductions, jpeg, libraries, compression
How to Design Icons in Figma543
how-tos, icons, figma, design
Thoughts on Embedding Alternative Text Metadata Into Images (eri)542
accessibility, metadata
How to Invert the Colors Using CSS (ron)541
css, colors, filters
AVIF Is the Future of Web Images540
avif, performance, outlooks
The 88×31 Archive539
web, history
How to Make a Cursor Image Hover Effect With CSS and JS538
how-tos, css, javascript, cursors, hover
Everything You Need to Know About Image Formats in 2024 (web)537
jpeg, png, gif, webp, avif, pdf, svg
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro)536
svg, css, masking, performance
Dynamically Adding Text Alternatives to Images With AI (kar)535
automation, ai, accessibility, alt-text
How to Favicon in 2024: Six Files That Fit Most Needs (sit/evi)534
how-tos, favicons
Progressive JPEGs (PJPEG): The Key to Loading Images Faster on Your Website533
pjpeg, jpeg, performance, comparisons
The World’s Smallest PNG (eva)532
png, minimalism
AI Art Is the New Stock Image (ia)531
design, ai
Everything You Need to Know About Responsive Logo Design (web)530
design, branding, logos, responsive-design
Responsive SVGs (nil/5t3)529
svg, responsive-design
Border Images in CSS: A Key Focus Area for Interop 2023 (dip/mdn)528
borders, css, browsers, web-platform, interoperability
Practical “img” Element Defaults (zor/css)527
videos, css
AI for Web Devs: AI Image Generation (aus)526
ai, tooling, automation
“sizes=auto” Pretty Much Requires “width” and “height” Attributes (eee)525
html, attributes, maintainability
Create Dynamic Web Experiences With Interactive SVG Animations524
svg, animations, tooling
Text With Media Background: Practical Solutions523
microcontent, readability, accessibility
Stop Using AI-Generated Images (mic)522
ai
AVIF: Meet the Next Level Image File Format521
avif
Cloudinary: The “Dramatic” Story of JPEG XL Support So Far (jon/com)520
jpeg-xl, support, browsers
How to Write Good Alt Text for Screen Readers (cra)519
how-tos, accessibility, writing, alt-text, screen-readers
An Introduction to Working With SVGs in React518
introductions, svg, react
Some Sensible Defaults for Your “img” Elements (css)517
css
Images on the Web516
concepts, compression, jpeg, png, webp, avif, nextjs
Which Is the Best Image Format for Your Website?515
comparisons, jpeg, png, gif, webp, avif
The Ultimate Low-Quality Image Placeholder Technique (css)514
performance, web-vitals
How Mastodon Handles Images and Web Previews (rba)513
social-media, mastodon, open-graph, metadata, html
Stop Lazy Loading Product and Hero Images (gri/clo)512
performance, lazy-loading
How to Make Charts and Graphs More Accessible (pop)511
how-tos, information-design, accessibility
Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo)510
buttons, html, css, svg
How I Write Alt Text for Code Snippets on Social Media (ben)509
accessibility, alt-text, writing, social-media
What Is Alt Text and How to Write It (tpg)508
accessibility, alt-text, writing
Please Size Your Inline SVGs (aar)507
svg
An “alt” Decision Tree Using Only “:has()” (aar)506
accessibility, css, alt-text
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources II (sma)505
accessibility, content, best-practices, techniques
Alt Text Hall of Fame (ste/alt)504
websites, accessibility, writing, alt-text
Responsive Images: DIY Implementation in 6 Steps503
html, responsive-design
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources (sma)502
accessibility, content, best-practices, techniques
SVG Gradients: Solving Curved Challenges501
svg, gradients
Using Imagery in Visual Design (nng)500
design, content
How to Use CSS “object-fit” and “object-position” (ral)499
how-tos, css
JPEG XL: How It Started, How It’s Going498
compression, jpeg-xl
Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images (css/sma)497
css, effects
Displaying Your Full-Sized YouTube Thumbnail or a Custom OG Image in a Twitter Card (phi)496
youtube, twitter+x, open-graph, social-media, metadata
Creating SVG Animations Using Tailwind CSS495
svg, animations, tailwind
Understanding SVG Paths494
svg
What Does the Image “decoding” Attribute Actually Do? (tun)493
html, attributes, performance
How to Add a CSS Reveal Animation to Your Images (css)492
how-tos, css, animations
Is There a Viable Animated GIF Alternative Yet or What? (tyl/clo)491
gif
Deploying AVIF for More Responsive Websites490
avif, performance
Dithering (chr)489
dithering
The Image Sorting Experiment488
information-design, sorting, experiments
A Designers Guide to the Principles of Web Design487
guides, design, principles, consistency, legibility, navigation, hierarchy, whitespace, usability
The Alt Text War—SEO vs. Accessibility486
accessibility, seo, writing, alt-text, comparisons
The Death of JPEG-XL485
jpeg-xl
What Makes a Good Screenshot? (llo/tpg)484
accessibility
Convert PNG to JPG Using FFmpeg (ama)483
png, jpeg, conversion, tooling
The Ultimate Guide to Image Optimisation (fox/cal)482
guides, performance, compression, optimization
Change Favicon on Switching Browser Tabs in JavaScript (ami)481
favicons, javascript
Are You Making These Five Mistakes When Writing Alt Text?480
accessibility, writing, alt-text, mistakes
Unlocking SVG’s Superpowers (btc)479
videos, svg
On Container Queries, Responsive Images, and JPEG-XL (gri/clo)478
css, container-queries, responsive-design, jpeg-xl
Dithering Images With React/JavaScript477
dithering, react, javascript
How to Style Your Alt Text (ede)476
how-tos, css, accessibility, alt-text
Using Focal Points, Aspect Ratio, and Object-Fit to Crop Images Correctly (hen)475
css, aspect-ratio
Building an Animated SVG Logo With animejs474
svg, logos, animations, vuejs
You Kinda Want an Orange Favicon (chr)473
favicons, browsers, theming
How to Favicon in 2023: Six Files That Fit Most Needs (sit/evi)472
how-tos, favicons
Learn Images (wil)471
courses, svg, gif, png, jpeg, webp, avif
Easy SVG Customization and Animation: A Practical Guide (cod/sma)470
guides, svg, animations
Optimal Images in HTML (ste/bui)469
html, backgrounds, performance, optimization
The Modern Way of Serving Images (kur)468
html, performance
Creating a Custom Cursor Using CSS (css)467
cursors, css, svg
Easy Dynamic Social Sharing Image With Eleventy466
eleventy, social-media, tooling
6 Common SVG Fails (and How to Fix Them) (css)465
svg
Optimizing the Image Element LCP (sma)464
performance, web-vitals
Advanced Usage Patterns for Taking Page Element Screenshots With Playwright463
screenshots, playwright, javascript
Interactive SVG Reference462
svg
Stock Photos of People With Disabilities (den)461
accessibility, content
Compress an Image Before Upload With JavaScript (rik)460
javascript, file-handling, compression
Website Accessibility (15 Best Practices) (bru)459
accessibility, best-practices, content, readability, captcha, alt-text, forms, focus, html, tooling
Mini-Guide to Add an Image (its/mat)458
html
CSS Infinite Slider Flipping Through Polaroid Images (css/css)457
sliders, css, effects
Enough With the Pointless Images (boa)456
design, decoration
Take Full-Size Screenshots of Websites Without Any Tools in Chrome (ami)455
browsers, chrome, screenshots
Reduce Image Sizes by Removing Metadata (per)454
metadata, performance, optimization
CSS Infinite and Circular Rotating Image Slider (css/css)453
sliders, css, animations
Handling Images With Inconsistent Height in CSS (ami)452
css
What Image Format Should You Use in Your Next Project? (alv)451
A Guide to Image Optimization on Jamstack Sites (daw/sma)450
guides, compression, optimization, performance, tech-stacks, jamstack
6 Steps to Improve HTML Images for Users and Developers (aus)449
html, performance, responsive-design
The Case for JPEG XL (jon)448
jpeg-xl, compression
Screenshotting VoiceOver on macOS (kil)447
tooling, screenshots, unix-like, voiceover, screen-readers, accessibility
Twitter Reminds Us About Alt Text, but How Good Are We at It?446
accessibility, writing, alt-text, twitter+x
Google on Alt Text SEO and Accessibility (joh+/sea)445
google, seo, accessibility, writing, alt-text
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project444
accessibility, svg, lessons
How to Write Good Alt Text (cfe)443
how-tos, accessibility, writing, alt-text
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep)442
svg, sprites, performance
How to Scale SVG (ame/css)441
how-tos, scaling, svg
GIFs Without the .gif: The Most Performant Image and Video Options Right Now (oll/css)440
performance, multimedia, gif, html
Media (htt)439
web-almanac, studies, research, metrics, multimedia
Justin Yarbrough Talks About Alt Text438
podcasts, accessibility, writing, alt-text
Converting PNG Images to WebP Using PHP (ami)437
conversion, png, webp, php
How Your Favourite UI Libraries Manage Their Icons (and)436
libraries, icons, maintenance
8 Tricks for SVG Optimization435
svg, tips-and-tricks, optimization
Screenshots Are Not Documentation434
documentation, screenshots
AI-Generated Images From AI-Generated Alt Text (aar)433
accessibility, writing, alt-text, ai
What Are Best Practices for Creating Alt Text?432
accessibility, writing, alt-text, best-practices
Upload An Image With Node.js (rik)431
nodejs, file-handling
Research Insight: Accessibility of Images (ihe/tet)430
accessibility, usability, research
Vector Animations With Figma and SVG Animate429
animations, figma, svg
Powerful Image Optimization Tools (lou/sma)428
link-lists, compression, performance, tooling
Can SVG Symbols Affect Web Performance?427
svg, performance
Best Practices for Images426
html, best-practices
How to Serve WebP Images on nginx425
how-tos, webp, nginx, servers
Image Guard (j9t)424
packages, npm, compression, performance, jpeg, png, gif, webp, avif
Icon-Only Links Fail WCAG (tem)423
accessibility, links, wcag, icons, conformance
Writing Useful Alt Text (mic)422
accessibility, writing, alt-text
Just How Long Should Alt Text Be? (geo/css)421
accessibility, writing, alt-text
Magical SVG Techniques (sma)420
svg, techniques
How to Upload an Image With PHP (rik)419
how-tos, php, file-handling
Image Borders in CSS (ami)418
css, borders
How to Turn HTML Webpage Into an Image?417
how-tos, html, conversion
Alternative Text (Alt Text) (pop)416
accessibility, html, writing, alt-text
Picture Perfect Images With the Modern “<img>” Element (add)415
html, performance, web-vitals
Optimizing SVG Patterns to Their Smallest Size (css)414
svg, performance
15 Useful Placeholder Tools for Designers and Developers413
tooling, content, placeholders, testing, link-lists
Favi-Gone: 6 Reasons Why Your Favicon Disappeared From the Google Search Results412
favicons, google, seo
There Is No Character Limit for “Alt Text” (yat)411
accessibility, html, alt-text
Never, Ever, Ever Use Pixelation for Redacting Text410
content, obfuscation, security
Building an Adaptive Favicon (arg)409
favicons
How to Favicon in 2022: Six Files That Fit Most Needs (sit/evi)408
how-tos, favicons
Optimize Your PNGs With Oxipng and pre-commit (ada)407
png, performance, compression, tooling
Big Images, Blazingly Fast406
performance, quality
Create an Open Graph Image Generator With Node.js (log)405
nodejs, open-graph
Social Media Image Sizes 2022: Cheat Sheet for Every Network404
cheat-sheets, social-media
Alt Tag Emptiness (ste)403
accessibility, html, alt-text, aria
Responsive Image Gallery With Animated Captions (5t3)402
css, animations, responsive-design, examples
Image Magnifier Using Only One Line of CSS (ami)401
css
The Many Methods for Using SVG Icons (hui)400
css, svg, icons
Image Display Elements (5t3)399
html, responsive-design
Why Your Website Should Not Use Dithered Images398
dithering, compression, performance
We Analyzed 425,909 Favicons397
favicons
Beginner’s Guide to Responsive Images: How to Get Them Right (lou)396
guides, responsive-design, html
Using Modern Image Formats: AVIF and WebP (add/sma)395
avif, webp, jpeg, png, comparisons, performance, compression
Optimizing Images on the Web394
performance, cloudflare
Blowing Up HTML Size With Responsive Images (deb)393
html, performance, responsive-design
Fractional SVG Stars With CSS392
css, svg
5 Steps for Writing Alt Text for Accessibility391
accessibility, writing, alt-text
One Favicon to Rule Them All (j9t)390
html, favicons
Decoding AVIF: Deep Dive With Cats and imgproxy (evi)389
avif, deep-dives
Exploring the CSS Paint API: Image Fragmentation Effect (css/css)388
css, apis, effects
Pixelart and the “image-rendering” Paradox387
css, art
Writing Great Alt Text: Emotion Matters (jaf)386
accessibility, writing, alt-text, user-experience
What to Know About AVIF on Cloudinary (sia)385
avif, cloudinary
Image Descriptions: A Human Technique That Robots Can’t Grasp384
accessibility, alt-text
The Anatomy of a Web Page: 14 Basic Elements383
design-patterns, navigation, buttons, forms, multimedia, favicons, link-lists
Beyond Basic Alt Text—Charts, Maps, and Diagrams382
accessibility, alt-text, information-design
A Framework for Building Open Graph Images381
open-graph
OMG, SVG Favicons FTW!380
html, favicons, svg
Your Image Is Probably Not Decorative (eri/sma)379
decoration, accessibility, alt-text
Half the Size of Images by Optimising for High Density Displays (jaf)378
html, performance
Serving Sharp Images to High Density Screens (jaf)377
performance
Adding Shadows to SVG Icons With CSS and SVG Filters (css)376
css, svg, icons, shadows, filters, effects
Using AVIF to Compress Images on Your Site375
performance, avif, compression
How to Build an Image Comparison Slider374
how-tos, sliders, react
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma)373
accessibility, svg, screen-readers
JPEG XL372
websites, jpeg-xl
Content-Aware Image Resizing in JavaScript371
javascript, resizing
Web Developer’s Guide to AVIF Images370
guides, avif
How to Use SVG Image Sprites (cra)369
how-tos, svg, sprites
Create Responsive Image Effects With CSS Gradients and “aspect-ratio” (5t3/sma)368
responsive-design, css, gradients, aspect-ratio, effects
Seven Myths About Alt Text367
accessibility, alt-text, myths
Front-End Performance 2021: Assets Optimizations (vit/sma)366
performance, checklists, link-lists, compression
Optimizing Image Depth (mey/css)365
quality, performance, optimization
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format (pho)364
webp, google
GIFs and “prefers-reduced-motion” (chr/css)363
gif, reduced-motion, html
How to Design a Set of Icons362
design, icons
Creating a Custom Cursor Using CSS?361
css, svg, cursors
AVIF Has Landed (jaf)360
avif, performance, quality, jpeg, webp, svg, png, comparisons
Optimize Images With a GitHub Action (chr/css)359
compression, github-actions
Pausing a GIF With “details”/“summary” (chr/css)358
html, disclosure-widgets, gif, animations
Writing Alt Text for Data Visualization357
accessibility, alt-text, writing, information-design, visualization
Lazy Loading Images in Svelte (css)356
lazy-loading, svelte, performance
Webwaste (ger/ali)355
web, sustainability
How to Design a Brand Logo (With Ease) (sma)354
how-tos, design, branding, logos
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css)353
favicons, svg, dark-mode
How to Use an Emoji as a Favicon Easily (chr/css)352
how-tos, favicons, emoji, data-urls
Different Favicon for Development (chr/css)351
favicons, environments
Tools for Optimizing SVG (chr/css)350
tooling, svg, optimization, link-lists
Accessible SVGs: Inclusiveness Beyond Patterns (car/sma)349
svg, accessibility, tooling
Setting Height and Width on Images Is Important Again (tun/sma)348
html, performance, web-vitals
Optimize CSS Background Images With Media Queries347
css, backgrounds, media-queries, optimization
Do This to Improve Image Loading on Your Website (fon/css)346
performance, html
AVIF for Next-Generation Image Coding345
avif, compression
Progressive JPEGs: An Introduction344
introductions, jpeg, pjpeg, compression
Dark Mode Favicons (chr/css)343
favicons, dark-mode
Speed Up Your Website With WebP (sma)342
performance, optimization, webp
A Guide to Optimizing Images for Mobile (sma)341
guides, performance, optimization, mobile
Workflow Considerations for Using an Image Management Service (chr/css)340
performance, tooling, content-delivery
How to Change Your Favicon in Wordpress: A Step-by-Step Guide (yoa)339
guides, favicons, wordpress
Faster Image Loading With Embedded Image Previews (sma)338
performance, lazy-loading, techniques, javascript
The Making of an Animated Favicon (pre/css)337
favicons, animations, canvas
When to Use “img,” “img@srcset,” and “picture” and “source” (j9t)336
html
Image Optimization in WordPress (sma)335
wordpress, performance, optimization
Understanding Image Compression: Tooling and Context (j9t)334
performance, compression, tooling
A Crime Called Favicon (j9t)333
favicons, maintainability
A Practical Guide to SVG and Design Tools (sma)332
guides, svg, sketch, figma, adobe, tooling, design
SVG Circle Decomposition to Paths (sma)331
svg, animations
Stacked “Borders” (mey/css)330
css, borders, shadows, backgrounds, gradients
Did You Know That CSS Custom Properties Can Handle Images Too? (fon/css)329
css, custom-properties
Using Artificial Intelligence to Generate Alt Text on Images (css)328
ai, alt-text, accessibility
Improve Animated GIF Performance With HTML5 Video (sma)327
gif, multimedia, performance
Apply a Filter to a Background Image (chr/css)326
backgrounds, filters, css
Responsive Images (wil/ali)325
html, css, responsive-design
Icon Fonts vs. SVGs—Which One Should You Use in 2018?324
fonts, icon-fonts, svg
Converting Images to WebP (mal/sma)323
conversion, webp, sketch, photoshop, cloudinary
Image Alt Text vs. Title Text vs. File Names: What’s the Difference? (bri/sea)322
seo, alt-text, accessibility, naming, microcontent, comparisons
Improving Performance Perception: On-Demand Image Resizing (swa)321
performance, optimization, resizing, html
What Is SVG Good For? (chr/css)320
svg, examples
The Four Big Ways Jetpack Helps With Image Performance (css)319
wordpress, plugins, performance
Designing for Accessibility and Inclusion (sma)318
design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability
Some Things About “alt” Text (chr/css)317
accessibility, alt-text, html
Bad Icons: How to Identify and Improve Them (nng)316
how-tos, icons, design, usability
The Front-End Checklist (the)315
websites, checklists, html, css, javascript, accessibility, performance, seo
Tips for Icon Usability314
videos, icons, usability, tips-and-tricks
A Pretty Good SVG Icon System (chr/css)313
svg, icons
When Large Isn’t Large Enough: Designing With Hero Images (sma)312
design
Masking vs. Clipping: When to Use Each (sar/css)311
masking, clipping, svg, comparisons
GIF, PNG, JPG, or SVG: Which One to Use?310
jpeg, png, gif, svg, webp, comparisons
Let the Content Delivery Network Optimize Your Images (jon/sma)309
content-delivery, optimization, performance
What Is the Right Image Format for Your Website?308
compression, jpeg, gif, png, svg, webp
Guetzli, Google’s New JPEG Encoder (tel)307
performance, jpeg, compression, tooling
Measuring Image Widths in JavaScript (Carefully) (chr/css)306
javascript
Align SVG Icons to Text and Say Goodbye to Font Icons (pro)305
svg, icons, icon-fonts, fonts, css, design, alignment
A Compendium of SVG Information (chr/css)304
overviews, svg, link-lists
Develop Locally, Use Images From Production (chr/css)303
environments, processes, apache, servers
The Joy of Optimizing (una/btc)302
videos, performance, optimization
Create Thumbnails With PHP (rik)301
php
Responsive Images in CSS (chr/css)300
responsive-design, css, html
SVG Filter Primitives—Input and Output299
svg, filters
SVG and Media Queries (jaf)298
svg, css, media-queries, canvas, support, browsers
The SVG “path” Syntax: An Illustrated Guide (chr/css)297
guides, svg
WordPress SVG Support: How to Enable SVGs in WordPress296
how-tos, wordpress, svg
An Introduction to SVG Filters295
introductions, svg, filters
Accessible SVGs in High Contrast Mode (eri/css)294
accessibility, svg, contrast, colors
Are Icons Content? (chr/css)293
icons, html, content
Accessible SVGs (css)292
svg, accessibility, examples
Using WebP Images (mal/css)291
webp, conversion
Get the Original Image From a Data URL (chr/css)290
data-urls
Practical SVG (chr/ali)289
svg
High Performance SVGs (sar/css)288
svg, performance, tooling, optimization
Working With Images in Stylesheets With PostCSS (css)287
css, backgrounds, postcss, examples
RespImageLint—Linter for Responsive Images286
bookmarklets, html, responsive-design, linting
How PNG Works285
png, compression
The Hamburger Icon Debate284
mobile, icons, design-patterns
Why npm Scripts? (css)283
npm, nodejs, conversion, linting, minification, compression, sprites, examples
Usability Testing of Icons (nng)282
icons, testing, usability
Lazy-Loading Images: How Not to Really Annoy Your Users281
lazy-loading, performance, jquery
Blending Modes Demystified (ali)280
design, colors, effects, css
A Guide for SVG Support in Email (geo/css)279
guides, svg, support, email
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css)278
guides, smil, svg, animations
Decorating the Web With CSS Border Images277
decoration, css, borders
Creating Alpha Channel JPEGs Using SVG (zol)276
jpeg, svg, transparency+opacity
The Image Replacement Museum (mar/css)275
image-replacement, techniques, html, css, overviews, link-lists
Background Image Shapes (css)274
backgrounds, shapes, css, transforms, clipping, svg
Ensure High Contrast for Text Over Images (nng)273
contrast, colors, accessibility, usability
How to Make Charts With SVG (fon/css)272
how-tos, visualization, svg, html, javascript
Factors Affecting Website Performance271
performance, network, browsers, memory, servers, multimedia
Creating Cel Animations With SVG (hey/sma)270
animations, svg, css, sass
Preloading Images in Parallel With Promises (kit)269
javascript, promises, preloading, performance
The Anatomy of Responsive Images (jaf)268
html, responsive-design, support, browsers
SVG Is for Everybody (chr/btc)267
videos, svg
SVG Lessons I Learned the Hard Way (sar/btc)266
videos, svg, lessons
Mastering Image Optimization in WordPress265
wordpress, optimization, performance
Performance Tools (fon/css)264
performance, tooling, content-delivery, testing, dev-tools, css, javascript, optimization, link-lists
The Art of SVG Filters and Why It Is Awesome (sma)263
svg, filters, css
SVG Fallbacks Guide (ame/css)262
guides, svg, graceful-degradation
image-dimensions (sin)261
packages, npm
HTML5 Image Description Extension (“longdesc”) (cpt/w3c)260
html, standards
Responsive Hero Images (gri/clo)259
responsive-design
Using WebP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr (zol)258
webp, jpeg, png, polyfills, modernizr
CSS Sprites With Sass and Compass257
css, sprites, sass, compass
Why Responsive Images Matter (wil/ali)256
responsive-design
Responsive Images in Practice (ali)255
responsive-design, html, css
How SVG Fragment Identifiers Work (chr/css)254
svg, css
Styling and Animating SVGs With CSS (sar/sma)253
svg, css, animations
Probably Don’t Base64 SVG (chr/css)252
svg, data-urls, base64
A Guide to SVG Animations (SMIL) (sar/css)251
guides, svg, animations, smil
Image Optimization Services (gri/clo)250
performance, optimization, link-lists
Don’t Use “<picture>” (Most of the Time) (gri/clo)249
html, responsive-design
How a New HTML Element Will Make the Web Faster (ars)248
html, performance, responsive-design
Making SVGs Responsive With CSS (sar/cod)247
svg, responsive-design, css
Favicons, Touch Icons, Tile Icons, Etc.—Which Do You Need? (css)246
icons, favicons
Swapping Out SVG Icons (chr/css)245
svg, icons, css, jquery, techniques
How to “Resize” Images With CSS244
css, media-queries, resizing
Testing Responsive Images (wil/ali)243
html, responsive-design
Picturefill 2.0: Responsive Images and the Perfect Polyfill (sma)242
html, responsive-design, polyfills
Tips for Creating Accessible SVG (tin)241
accessibility, svg, tips-and-tricks
Dealing With Content Images in Email (chr/css)240
email, html, wordpress, responsive-design
“srcset” and “sizes” (eee)239
html, responsive-design
A Q&A on the Picture Element (wil+/ali)238
interviews, html, semantics, responsive-design
Shadow DOM237
shadow-dom, dom, svg, angularjs, css, mathml
Rethinking Responsive SVG (sma)236
responsive-design, svg, css
One Solution to Responsive Images (sma)235
responsive-design, html, php
Animating Vectors With SVG (bri/24w)234
svg, animations, javascript
Why Responsive Images Is So Hard (chr/css)233
responsive-design, css, html, art-direction
Webpage Performance (geo)232
performance, compression, minification, caching, content-delivery
Image Compression for Web Developers231
compression, performance, link-lists
Using Remote Image Files When You Develop Locally (lul)230
processes, drupal, apache, servers
WebKit Has Implemented “srcset”, and It’s a Good Thing (wil/sma)229
webkit, html, responsive-design
SVG Fallbacks (chr/css)228
svg, support, browsers, png
SVG Filters on Text (css)227
svg, filters, effects
Images Slowing Down Your Site? Try This One Weird Trick! (aer)226
performance, javascript
The Web Designer’s Guide to Image Copyrights225
guides, design, licensing
Simple Responsive Images With CSS Background Images (sma)224
responsive-design, backgrounds, css, html
Why We Need Responsive Images (tka)223
responsive-design, performance, metrics
Replace the Image in an “<img>” With CSS (css)222
css, image-replacement, techniques
How to Create SVG Paths Easily Using the GIMP (zol)221
how-tos, svg
Media Queries Within SVG (tka)220
svg, css, media-queries, support, browsers
Media Queries in SVG Images (gri/clo)219
svg, css, media-queries
Using SVG (chr/css)218
svg, css, support, browsers, examples, data-urls, tooling, link-lists
Favicon: A Changing Role217
html, favicons