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 and included. 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#
4 Tiny Mistakes That Secretly Destroy App Performance687
performance, web-apps, mistakes, cors, code-splitting, dependencies, backgrounds
How Alt Text Accessibility Supports Low-Vision Users686
accessibility, alt-text, wcag
What’s !important #10: HTML-in-Canvas, Hex Maps, E-Ink Optimization, and More (dxn/css)685
css, html, retrospectives, canvas, apis, web-platform
Do Graphs and Charts Need to Be Accessible? (tem)684
accessibility, png, svg, aria, information-design
The End of Responsive Images (wil/pic)683
html, responsive-design
Logo Design Trends for 2026: What I’m Actually Seeing (and What Most Designers Are Missing) (web)682
design, logos, typography, trends
SVG Filters Guide: Getting Started With the Basics (ana/fro)681
guides, fundamentals, svg, filters
Why Some Images Look Brighter Than Your Screen680
colors
Making Emojis and Icons Screen Reader Accessible (pop)679
emoji, icons, accessibility, screen-readers, html
Your Options for Preloading Images With JavaScript (mac)678
preloading, javascript, techniques
More Easy Light-Dark Mode Switching: “light-dark()” Is About to Support Images (bra)677
css, functions, dark-mode
SVG Favicons That Respect Theme Preference (paw)676
svg, favicons, dark-mode
Cascade Icons675
css, icons
JPEG Compression (sop)674
jpeg, compression
Folded Corner With CSS (kit)673
css, clipping
Figcaptions Versus Alt Text (tem)672
html, alt-text, accessibility, comparisons
Put “aria-hidden=true” on Decorative SVGs (mat)671
svg, aria, accessibility, attributes
SVGs on the Web: Performance Comparison Based on How You Load Them (nuc)670
svg, performance, comparisons
Sprites on the Web (jos)669
css, sprites, techniques
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design (hol/css)668
svg, progress-indicators, performance
How to Write Alt Text for News (sta/the)667
how-tos, alt-text, accessibility
Measuring SVG Rendering Time (sto)666
svg, png, rendering, performance, web-vitals, metrics
What Is JPEG XL: Do We Really Need Another Image Format? (aar/deb)665
jpeg-xl, quality, performance, metrics
How to Design Great Alt Text: An Introduction (deq)664
how-tos, introductions, alt-text, accessibility
How to Favicon in 2026: Three Files That Fit Most Needs (sit/evi)663
how-tos, favicons
Accessibility (bog+/htt)662
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 Make661
contrast, colors, wcag, accessibility, mistakes
Non-Blocking Cross-Browser Image Rendering on the Canvas (mys/per)660
canvas, javascript, performance
Non-Square Image Blur Extensions (ana/fro)659
css, effects
The Idiot Sandwich—on Embedding Alt Text (ede)658
alt-text, accessibility
How to Create an Adaptive SVG Favicon Using the “prefers-color-scheme” Media Query (zor/css)657
videos, how-tos, favicons, svg, css
How to Create 3D Images in CSS With the Layered Pattern (sun/fro)656
how-tos, css, transforms
100, 150, or 200? Debunking the Alt Text Character Limit655
alt-text, accessibility, link-lists
“pathLength” Makes Makes SVG Path Animations Easier to Manage (ste)654
svg, animations
AI and Alt Text (ted+/web)653
videos, ai, alt-text, accessibility
Alt Text or Image Description?652
accessibility, alt-text, comparisons, terminology
Why Do We Need Dithering?651
dithering
The Present and Potential Future of Progressive Image Rendering (jaf)650
jpeg, png, webp, avif, jpeg-xl, pjpeg, comparisons, outlooks
Inset Shadows Directly on “img” Elements (ana/fro)649
svg, css, shadows
Accessibility Minute—September 2025 (col)648
accessibility, alt-text, captions, comparisons
Replace Your Animated GIFs With SVGs (fro)647
gif, svg, animations, css
Your Images Are (Probably) Oversized646
html, pixel-density
Liquid Glass in the Browser: Refraction With CSS and SVG645
effects, liquid-glass, css, svg
Anatomy of Good Icons (nng)644
videos, icons, design
Added Support for WebP Images643
webp, github
Testing Methods: Images of Text (dec)642
accessibility, testing, wcag
Icon Interpretation vs. Recognizability641
videos, icons, usability
How to Build a Cohesive Icon Library for Your Design System640
how-tos, design-systems, icons
Implementing Accessible SVG Elements (a11)639
accessibility, svg, fundamentals
A Friendly Introduction to SVG (jos)638
introductions, svg
A Simple Website637
websites, history, layout, animations, tables, javascript, ajax, flash, deploying, simplicity
Accessible Social Media: Alt Text636
accessibility, social-media, alt-text
How Long Can Alt-Text Be? (jup)635
accessibility, alt-text
Stop Using Hero Images! They’re Killing Your UX (web)634
design, user-experience
Implement WCAG Rules in Your Infographics (a11)633
accessibility, wcag, visualization, design, alt-text, contrast, colors
SVG Optimization and Accessibility Basics (dbu)632
fundamentals, svg, optimization, accessibility
Writing Alt Text With AI (jar)631
ai, prompting, alt-text, accessibility
PNG Is Back (pro)630
png
Portable Network Graphics (PNG) Specification (Third Edition) (pro+/w3c)629
standards, png
Why JPEGs Still Rule the Web (ern/iee)628
jpeg, history
Having “figure” Match Width of Contained Image (jef)627
html, css
Social Media and Ad Specs Cheat Sheet (ron)626
websites, cheat-sheets, social-media, monetization
You Can Style Alt Text Like Any Other Text (geo/css)625
alt-text, accessibility, css, javascript
Finding the Joy in Alt Text (bry)624
alt-text, accessibility
How I Built Dynamic Social Media Images in Eleventy Using Cloudinary (chi)623
eleventy, social-media, tooling, cloudinary
Revisiting Image Maps (mal/css)622
image-maps, html, techniques
The Problem(s) With Image Accessibility621
accessibility, alt-text, html
Image Alt Text Guide: How to Write and Add Image Alt Text Reference620
guides, accessibility, user-experience, seo, alt-text, shopify
A11y 101: 1.4.5 Images of Text (nat)619
introductions, accessibility, wcag, alt-text
Background Image Opacity in CSS (jim)618
css, backgrounds, transparency+opacity
The Importance of Alt Text for Images617
alt-text, accessibility, dei, compliance, legal, seo, user-experience
A Guide to Alt Text Across Popular Tools (pop)616
guides, alt-text, accessibility, tooling
How Does Chrome Prioritize Image Requests? (deb)615
chrome, google, browsers, performance
Minimal CSS-Only Blurry Image Placeholders (kal)614
placeholders, backgrounds, css, techniques
Create an HTML Dialog When You Click an Image (cas)613
html, modals
Revisiting CSS “border-image” (mal/css)612
css, borders, data-urls
Quick Accessibility Wins That Are Easy to Implement (kev)611
videos, accessibility, html, semantics, alt-text, contrast, colors, keyboard-navigation, focus, skip-links
Generate Growing Images Using Gemini API610
ai, gemini, apis
Maintaining Screenshot Quality and Color Profile in Figma (max)609
figma, screenshots, quality, colors
Super Crispy SVG Icons (ale)608
svg, icons, optimization
Image Comparison Slider in 6 Lines of JavaScript607
sliders, javascript
@11ty/image-color (zac)606
packages, npm, colors
Trusting AI With My Images Wasn’t Easy (dri)605
ai, alt-text, accessibility, automation, tooling
In Defense of Text Labels (chr)604
labels, icons, usability, design
Common Accessibility Challenges When Navigating Tables603
accessibility, tables, keyboard-navigation
How to Improve Webpage Speed: Tips and Best Practices602
how-tos, performance, optimization, tips-and-tricks, best-practices, redirecting, fonts, testing, tooling, webpagetest
Optimizing Images for Web Performance (tod/fro)601
performance, optimization, jpeg, png, webp, avif, html, caching
GitHub Copilot Brings Mockups to Life by Generating Code From Images (web)600
github-copilot, ai, design
10 Digital Accessibility Mistakes to Avoid599
accessibility, mistakes, alt-text, contrast, colors, keyboard-navigation, aria, semantics, headings, labels, forms, pop-ups, testing
How to Favicon in 2025: Three Files That Fit Most Needs (sit/evi)598
how-tos, favicons
Alt Text Accessibility: Balancing AI and Human Oversight (tec+/equ)597
podcasts, accessibility, multimedia, alt-text, ai, quality
How to Gif (2025 Edition) (oll)596
how-tos, multimedia, gif, png, webp, avif, jpeg-xl
Generating Image Descriptions and Alt-Text With AI (dri)595
alt-text, accessibility, ai, quality
Page Bloat Update: How Does Ever-Increasing Page Size Affect Your Business and Your Users? (tam/spe)594
performance, trends, metrics, javascript, desktop, mobile
Using SVGs on Canvas With Compose Multiplatform (eev)593
canvas, svg, javascript
How to Fix Washed Out Colors in Google Chrome Screenshots for Clear and Accurate Images592
how-tos, screenshots, colors, chrome, google, browsers
Remove the “direction” Property on Your Arrow Icons (ali)591
icons, microcontent
Quick Note: Limit Use of “Logo” in Alt Text (nat)590
accessibility, logos, alt-text, microcontent
Media (ste+/htt)589
web-almanac, studies, research, metrics, multimedia, html
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers (ale/mat)588
html, buttons, icons, accessibility, screen-readers
Designer Problems: “Make the Logo Bigger!” (web)587
design, logos
Solved by Modern CSS: Feature Image (sha)586
css
Mastering SVG Arcs (sma)585
svg
How to Fix Storybook Screenshot Testing (not)584
how-tos, testing, screenshots, storybook, vitest
A Link on a Logo in the Header, What Should the Alt-Text Be? (ria/mat)583
accessibility, branding, links, logos, alt-text
Preloading Responsive Images (tre)582
html, hints, performance, preloading
Avoid Hotlinking Images With “Cross-Origin-Resource-Policy”581
security
Old Alt Text Advice (ste)580
accessibility, alt-text, html, microcontent, best-practices
Alt Text: Not Always Needed (nng)579
accessibility, alt-text, writing
Don’t Forget to Localize Your Icons (eri)578
localization, icons, culture
How to Identify Decorative Images and Boost Accessibility (a11)577
how-tos, decoration, accessibility, html, aria
Advanced Image Formats and When to Use Them: WebP, AVIF, HEIC, and JPEG XL576
webp, avif, jpeg-xl, comparisons
The Image Compression Challenge (Donating Money for Excess-Free Projects) (j9t)575
compression, performance, tooling
Dynamic Social Share Images Using Cloudinary (sia)574
social-media, tooling, cloudinary
10 Simple Ways to Make Your Social Media Posts Accessible573
accessibility, social-media, content, alt-text, captions, contrast
You Can Use “text-wrap: balance;” on Icons (ede)572
css, icons
How to Build an Image Search Application With OpenAI CLIP and PostgreSQL in JavaScript571
how-tos, search, ai, openai, postgresql, databases, javascript, functionality
AVIF vs. HEIC: Which Format Is Better?570
avif, comparisons
Icon Usability: When and How to Evaluate Digital Icons (nng)569
how-tos, usability, icons
How to Use CSS and SVG Clipping and Masking Techniques (wpe)568
how-tos, css, svg, clipping, masking
“img sizes=auto” for Native Lazy Loading (ste)567
code-pens, html, lazy-loading, performance
Building the Perfect Logo Strip (nil/9el)566
css, logos, techniques
Keeping Pixely Images Pixely (and Performant!) (chr/fro)565
css, effects
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)564
svg, examples
Supporting AVIF in Google Search (joh)563
google, search, avif, support
Harnessing Copilot and Other Gen-AI Tools to Increase Digital Accessibility Efficiency562
videos, ai, microsoft, tooling, accessibility, alt-text
Is Using “aria-label” to Add Alternative Text but No “alt” Attribute Still a WCAG Fail?561
discussions, accessibility, html, attributes, forms, labels, aria, alt-text
Mastering Typography in Logo Design (sma)560
typography, design, logos
Accessibility Specialists Warn Against Using AI for Alt Text559
accessibility, alt-text, ai
Writing Alt Text for a Scientific Figure558
accessibility, alt-text, writing, information-design
Good Intentions, Poor Context (tpg)557
accessibility, microcontent, buttons, links
Have It All: External, Styleable, and Scalable SVG (sco)556
svg, css
Designing Design Systems: Constructing an Icon System555
design, design-systems, icons, case-studies
“Practical SVG” Is Now Free to Read Online (chr)554
books, svg
Can AI Be Used to Write Good Descriptive Alt Text for Images in 2024? (the)553
accessibility, alt-text, ai
Alternative Text in Action552
accessibility, alt-text, writing, examples
Do Grayscale Images Take Less Space?551
colors, performance
The Little Things: Confusing Error Messages (brw)550
errors, developer-experience
Seamless Screenshot Testing for Compose With Screenshotbot549
screenshots, regressions, testing, tooling
How Top HR Agencies Build Trust Through Logo Designs548
design, logos, branding
Minimal SVG Favicon (sto)547
svg, favicons, minimalism
Ditch the Pixels: The Small and Vectorized Web (yor)546
html, svg
My Approach to Alt Text (aar)545
accessibility, processes, alt-text, link-lists
Alt Left (ste)544
accessibility, html, alt-text, anti-patterns
The Picture-Superiority Effect: Harness the Power of Visuals (nng)543
design, information-design
Images as the First Thing in a Button or Link (tem)542
accessibility, html, buttons, links
Taking Regular Screenshots of My Website541
screenshots, automation, playwright, github-actions
Write Alt Text Like You’re Talking to a Friend (spa/clo)540
accessibility, alt-text
Long Alt (aar)539
accessibility, alt-text, support, browsers, screen-readers
Why We Are Still Using 88×31 Buttons538
history, design
Sliding 3D Image Frames in CSS (css/sma)537
css, techniques
Faster Websites With the “picture” Element (fra)536
html, performance
How to Think About HTML Responsive Images (db)535
how-tos, html, responsive-design
“aspect-ratio” Gotcha (css)534
css, aspect-ratio
Introducing Jpegli: A New JPEG Coding Library533
introductions, jpeg, libraries, compression
How to Design Icons in Figma532
how-tos, icons, figma, design
Thoughts on Embedding Alternative Text Metadata Into Images (eri)531
accessibility, metadata
How to Invert the Colors Using CSS (ron)530
css, colors, filters
AVIF Is the Future of Web Images529
avif, performance, outlooks
The 88×31 Archive528
web, history
How to Make a Cursor Image Hover Effect With CSS and JS527
how-tos, css, javascript, cursors, hover
Everything You Need to Know About Image Formats in 2024 (web)526
jpeg, png, gif, webp, avif, pdf, svg
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro)525
svg, css, masking, performance
Dynamically Adding Text Alternatives to Images With AI (kar)524
automation, ai, accessibility, alt-text
How to Favicon in 2024: Six Files That Fit Most Needs (sit/evi)523
how-tos, favicons
Progressive JPEGs (PJPEG): The Key to Loading Images Faster on Your Website522
pjpeg, jpeg, performance, comparisons
The World’s Smallest PNG (eva)521
png, minimalism
AI Art Is the New Stock Image (ia)520
design, ai
Everything You Need to Know About Responsive Logo Design (web)519
design, branding, logos, responsive-design
Responsive SVGs (nil/5t3)518
svg, responsive-design
Border Images in CSS: A Key Focus Area for Interop 2023 (dip/mdn)517
borders, css, browsers, web-platform, interoperability
Practical “img” Element Defaults (zor/css)516
videos, css
AI for Web Devs: AI Image Generation (aus)515
ai, tooling, automation
“sizes=auto” Pretty Much Requires “width” and “height” Attributes (eee)514
html, attributes, maintainability
Create Dynamic Web Experiences With Interactive SVG Animations513
svg, animations, tooling
Text With Media Background: Practical Solutions512
microcontent, readability, accessibility
Stop Using AI-Generated Images (mic)511
ai
AVIF: Meet the Next Level Image File Format510
avif
Cloudinary: The “Dramatic” Story of JPEG XL Support So Far (jon/com)509
jpeg-xl, support, browsers
How to Write Good Alt Text for Screen Readers (cra)508
how-tos, accessibility, writing, alt-text, screen-readers
An Introduction to Working With SVGs in React507
introductions, svg, react
Some Sensible Defaults for Your “img” Elements (css)506
css
Images on the Web505
concepts, compression, jpeg, png, webp, avif, nextjs
Which Is the Best Image Format for Your Website?504
comparisons, jpeg, png, gif, webp, avif
The Ultimate Low-Quality Image Placeholder Technique (css)503
performance, web-vitals
How Mastodon Handles Images and Web Previews (rba)502
social-media, mastodon, open-graph, metadata, html
Stop Lazy Loading Product and Hero Images (gri/clo)501
performance, lazy-loading
How to Make Charts and Graphs More Accessible (pop)500
how-tos, information-design, accessibility
Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo)499
buttons, html, css, svg
How I Write Alt Text for Code Snippets on Social Media (ben)498
accessibility, alt-text, writing, social-media
What Is Alt Text and How to Write It (tpg)497
accessibility, alt-text, writing
Please Size Your Inline SVGs (aar)496
svg
An “alt” Decision Tree Using Only “:has()” (aar)495
accessibility, css, alt-text
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources II (sma)494
accessibility, content, best-practices, techniques
Alt Text Hall of Fame (ste/alt)493
websites, accessibility, writing, alt-text
Responsive Images: DIY Implementation in 6 Steps492
html, responsive-design
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources (sma)491
accessibility, content, best-practices, techniques
SVG Gradients: Solving Curved Challenges490
svg, gradients
Using Imagery in Visual Design (nng)489
design, content
How to Use CSS “object-fit” and “object-position”488
how-tos, css
JPEG XL: How It Started, How It’s Going487
compression, jpeg-xl
Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images (css/sma)486
css, effects
Creating SVG Animations Using Tailwind CSS485
svg, animations, tailwind
Displaying Your Full-Sized YouTube Thumbnail or a Custom OG Image in a Twitter Card (phi)484
youtube, twitter+x, open-graph, social-media, metadata
Understanding SVG Paths483
svg
What Does the Image “decoding” Attribute Actually Do? (tun)482
html, attributes, performance
How to Add a CSS Reveal Animation to Your Images (css)481
how-tos, css, animations
Is There a Viable Animated GIF Alternative Yet or What? (tyl/clo)480
gif
Deploying AVIF for More Responsive Websites479
avif, performance
Dithering (chr)478
dithering
The Image Sorting Experiment477
information-design, sorting, experiments
A Designers Guide to the Principles of Web Design476
guides, design, principles, consistency, legibility, navigation, hierarchy, whitespace, usability
The Death of JPEG-XL475
jpeg-xl
The Alt Text War—SEO vs. Accessibility474
accessibility, seo, writing, alt-text, comparisons
What Makes a Good Screenshot? (llo/tpg)473
accessibility
Convert PNG to JPG Using FFmpeg (ama)472
png, jpeg, conversion, tooling
The Ultimate Guide to Image Optimisation (fox/cal)471
guides, performance, compression, optimization
Change Favicon on Switching Browser Tabs in JavaScript (ami)470
favicons, javascript
Are You Making These Five Mistakes When Writing Alt Text?469
accessibility, writing, alt-text, mistakes
Unlocking SVG’s Superpowers (btc)468
videos, svg
On Container Queries, Responsive Images, and JPEG-XL (gri/clo)467
css, container-queries, responsive-design, jpeg-xl
Dithering Images With React/JavaScript466
dithering, react, javascript
How to Style Your Alt Text (ede)465
how-tos, css, accessibility, alt-text
Using Focal Points, Aspect Ratio, and Object-Fit to Crop Images Correctly (hen)464
css, aspect-ratio
Building an Animated SVG Logo With animejs463
svg, logos, animations, vuejs
You Kinda Want an Orange Favicon (chr)462
favicons, browsers, theming
How to Favicon in 2023: Six Files That Fit Most Needs (sit/evi)461
how-tos, favicons
Learn Images (wil)460
courses, svg, gif, png, jpeg, webp, avif
Easy SVG Customization and Animation: A Practical Guide (cod/sma)459
guides, svg, animations
Optimal Images in HTML (ste/bui)458
html, backgrounds, performance, optimization
The Modern Way of Serving Images (kur)457
html, performance
Creating a Custom Cursor Using CSS (css)456
cursors, css, svg
Easy Dynamic Social Sharing Image With Eleventy455
eleventy, social-media, tooling
6 Common SVG Fails (and How to Fix Them) (css)454
svg
Optimizing the Image Element LCP (sma)453
performance, web-vitals
Advanced Usage Patterns for Taking Page Element Screenshots With Playwright452
screenshots, playwright, javascript
Interactive SVG Reference451
svg
Stock Photos of People With Disabilities (den)450
accessibility, content
Compress an Image Before Upload With JavaScript (rik)449
javascript, file-handling, compression
Website Accessibility (15 Best Practices) (bru)448
accessibility, best-practices, content, readability, captcha, alt-text, forms, focus, html, tooling
Mini-Guide to Add an Image (its/mat)447
html
CSS Infinite Slider Flipping Through Polaroid Images (css/css)446
sliders, css, effects
Enough With the Pointless Images (boa)445
design, decoration
Take Full-Size Screenshots of Websites Without Any Tools in Chrome (ami)444
browsers, google, chrome, screenshots
Reduce Image Sizes by Removing Metadata (per)443
metadata, performance, optimization
CSS Infinite and Circular Rotating Image Slider (css/css)442
sliders, css, animations
Handling Images With Inconsistent Height in CSS (ami)441
css
What Image Format Should You Use in Your Next Project? (alv)440
A Guide to Image Optimization on Jamstack Sites (daw/sma)439
guides, compression, optimization, performance, tech-stacks, jamstack
6 Steps to Improve HTML Images for Users and Developers (aus)438
html, performance, responsive-design
The Case for JPEG XL (jon)437
jpeg-xl, compression
Screenshotting VoiceOver on macOS (kil)436
tooling, screenshots, apple, unix-like, voiceover
Twitter Reminds Us About Alt Text, but How Good Are We at It?435
accessibility, writing, alt-text, twitter+x
Google on Alt Text SEO and Accessibility (sea)434
google, seo, accessibility, writing, alt-text
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project433
accessibility, svg, lessons
How to Write Good Alt Text (cfe)432
how-tos, accessibility, writing, alt-text
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep)431
svg, sprites, performance
How to Scale SVG (ame/css)430
how-tos, scaling, svg
GIFs Without the .gif: The Most Performant Image and Video Options Right Now (oll/css)429
performance, multimedia, gif, html
Media (htt)428
web-almanac, studies, research, metrics, multimedia
Justin Yarbrough Talks About Alt Text427
podcasts, accessibility, writing, alt-text
Converting PNG Images to WebP Using PHP (ami)426
conversion, png, webp, php
How Your Favourite UI Libraries Manage Their Icons (and)425
libraries, icons, maintenance
8 Tricks for SVG Optimization424
svg, tips-and-tricks, optimization
Screenshots Are Not Documentation423
documentation, screenshots
AI-Generated Images From AI-Generated Alt Text (aar)422
accessibility, writing, alt-text, ai
What Are Best Practices for Creating Alt Text?421
accessibility, writing, alt-text, best-practices
Upload An Image With Node.js (rik)420
nodejs, file-handling
Research Insight: Accessibility of Images (ihe/tet)419
accessibility, usability, research
Vector Animations With Figma and SVG Animate418
animations, figma, svg
Powerful Image Optimization Tools (lou/sma)417
link-lists, compression, performance, tooling
Can SVG Symbols Affect Web Performance?416
svg, performance
Best Practices for Images415
html, best-practices
How to Serve WebP Images on nginx414
how-tos, webp, nginx, servers
Image Guard (j9t)413
packages, npm, compression, performance, jpeg, png, gif, webp, avif
Icon-Only Links Fail WCAG (tem)412
accessibility, links, wcag, icons, conformance
Writing Useful Alt Text (mic)411
accessibility, writing, alt-text
Just How Long Should Alt Text Be? (geo/css)410
accessibility, writing, alt-text
Magical SVG Techniques (sma)409
svg, techniques
How to Upload an Image With PHP (rik)408
how-tos, php, file-handling
Image Borders in CSS (ami)407
css, borders
How to Turn HTML Webpage Into an Image?406
how-tos, html, conversion
Alternative Text (Alt Text) (pop)405
accessibility, html, writing, alt-text
Picture Perfect Images With the Modern “<img>” Element (add)404
html, performance, web-vitals
Optimizing SVG Patterns to Their Smallest Size (css)403
svg, performance
15 Useful Placeholder Tools for Designers and Developers402
tooling, content, placeholders, testing, link-lists
Favi-Gone: 6 Reasons Why Your Favicon Disappeared From the Google Search Results401
favicons, google, seo
There Is No Character Limit for “Alt Text” (yat)400
accessibility, html, alt-text
Never, Ever, Ever Use Pixelation for Redacting Text399
content, obfuscation, security
Building an Adaptive Favicon (arg)398
favicons
How to Favicon in 2022: Six Files That Fit Most Needs (sit/evi)397
how-tos, favicons
Big Images, Blazingly Fast396
performance, quality
Optimize Your PNGs With Oxipng and pre-commit (ada)395
png, performance, compression, tooling
Create an Open Graph Image Generator With Node.js (log)394
nodejs, open-graph
Social Media Image Sizes 2022: Cheat Sheet for Every Network393
cheat-sheets, social-media
Alt Tag Emptiness (ste)392
accessibility, html, alt-text, aria
Responsive Image Gallery With Animated Captions (5t3)391
css, animations, responsive-design, examples
Image Magnifier Using Only One Line of CSS (ami)390
css
The Many Methods for Using SVG Icons (hui)389
css, svg, icons
Image Display Elements (5t3)388
html, responsive-design
Why Your Website Should Not Use Dithered Images387
dithering, compression, performance
We Analyzed 425,909 Favicons386
favicons
Beginner’s Guide to Responsive Images: How to Get Them Right (lou)385
guides, responsive-design, html
Using Modern Image Formats: AVIF and WebP (add/sma)384
avif, webp, jpeg, png, comparisons, performance, compression
Optimizing Images on the Web383
performance, cloudflare
Blowing Up HTML Size With Responsive Images (deb)382
html, performance, responsive-design
5 Steps for Writing Alt Text for Accessibility381
accessibility, writing, alt-text
Fractional SVG Stars With CSS380
css, svg
One Favicon to Rule Them All (j9t)379
html, favicons
Decoding AVIF: Deep Dive With Cats and imgproxy (evi)378
avif, deep-dives
Exploring the CSS Paint API: Image Fragmentation Effect (css/css)377
css, apis, effects
Pixelart and the “image-rendering” Paradox376
css, art
Writing Great Alt Text: Emotion Matters (jaf)375
accessibility, writing, alt-text, user-experience
What to Know About AVIF on Cloudinary (sia)374
avif, cloudinary
Image Descriptions: A Human Technique That Robots Can’t Grasp373
accessibility, alt-text
The Anatomy of a Web Page: 14 Basic Elements372
design-patterns, navigation, buttons, forms, multimedia, favicons, link-lists
Beyond Basic Alt Text—Charts, Maps, and Diagrams371
accessibility, alt-text, information-design
A Framework for Building Open Graph Images370
open-graph
OMG, SVG Favicons FTW!369
html, favicons, svg
Your Image Is Probably Not Decorative (eri/sma)368
decoration, accessibility, alt-text
Adding Shadows to SVG Icons With CSS and SVG Filters (css)367
css, svg, icons, shadows, filters, effects
Half the Size of Images by Optimising for High Density Displays (jaf)366
html, performance
Serving Sharp Images to High Density Screens (jaf)365
performance
Using AVIF to Compress Images on Your Site364
performance, avif, compression
How to Build an Image Comparison Slider363
how-tos, sliders, react
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma)362
accessibility, svg, screen-readers
JPEG XL361
websites, jpeg-xl
Content-Aware Image Resizing in JavaScript360
javascript, resizing
Web Developer’s Guide to AVIF Images359
guides, avif
How to Use SVG Image Sprites (cra)358
how-tos, svg, sprites
Create Responsive Image Effects With CSS Gradients and “aspect-ratio” (5t3/sma)357
responsive-design, css, gradients, aspect-ratio, effects
Seven Myths About Alt Text356
accessibility, alt-text, myths
Front-End Performance 2021: Assets Optimizations (vit/sma)355
performance, checklists, link-lists, compression
Optimizing Image Depth (mey/css)354
quality, performance, optimization
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format353
webp, google
GIFs and “prefers-reduced-motion” (chr/css)352
gif, reduced-motion, html
How to Design a Set of Icons351
design, icons
Creating a Custom Cursor Using CSS?350
css, svg, cursors
AVIF Has Landed (jaf)349
avif, performance, quality, jpeg, webp, svg, png, comparisons
Optimize Images With a GitHub Action (chr/css)348
compression, github-actions
Pausing a GIF With “details”/“summary” (chr/css)347
html, disclosure-widgets, gif, animations
Writing Alt Text for Data Visualization346
accessibility, alt-text, writing, information-design, visualization
Lazy Loading Images in Svelte (css)345
lazy-loading, svelte, performance
Webwaste (ger/ali)344
web, sustainability
How to Design a Brand Logo (With Ease) (sma)343
how-tos, design, branding, logos
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css)342
favicons, svg, dark-mode
How to Use an Emoji as a Favicon Easily (chr/css)341
how-tos, favicons, emoji, data-urls
Different Favicon for Development (chr/css)340
favicons, environments
Tools for Optimizing SVG (chr/css)339
tooling, svg, optimization, link-lists
Accessible SVGs: Inclusiveness Beyond Patterns (car/sma)338
svg, accessibility, tooling
Setting Height and Width on Images Is Important Again (tun/sma)337
html, performance, web-vitals
Optimize CSS Background Images With Media Queries336
css, backgrounds, media-queries, optimization
Do This to Improve Image Loading on Your Website (fon/css)335
performance, html
AVIF for Next-Generation Image Coding334
avif, compression
Progressive JPEGs: An Introduction333
introductions, jpeg, pjpeg, compression
Dark Mode Favicons (chr/css)332
favicons, dark-mode
Speed Up Your Website With WebP (sma)331
performance, optimization, webp
A Guide to Optimizing Images for Mobile (sma)330
guides, performance, optimization, mobile
Workflow Considerations for Using an Image Management Service (chr/css)329
performance, tooling, content-delivery
How to Change Your Favicon in Wordpress: A Step-by-Step Guide (yoa)328
guides, favicons, wordpress
Faster Image Loading With Embedded Image Previews (sma)327
performance, lazy-loading, techniques, javascript
The Making of an Animated Favicon (pre/css)326
favicons, animations, canvas
When to Use “img,” “img@srcset,” and “picture” and “source” (j9t)325
html
Image Optimization in WordPress (sma)324
wordpress, performance, optimization
Understanding Image Compression: Tooling and Context (j9t)323
performance, compression, tooling
A Crime Called Favicon (j9t)322
favicons, maintainability
A Practical Guide to SVG and Design Tools (sma)321
guides, svg, sketch, figma, adobe, tooling, design
SVG Circle Decomposition to Paths (sma)320
svg, animations
Stacked “Borders” (mey/css)319
css, borders, shadows, backgrounds, gradients
Did You Know That CSS Custom Properties Can Handle Images Too? (fon/css)318
css, custom-properties
Using Artificial Intelligence to Generate Alt Text on Images (css)317
ai, alt-text, accessibility
Improve Animated GIF Performance With HTML5 Video (sma)316
gif, multimedia, performance
Apply a Filter to a Background Image (chr/css)315
backgrounds, filters, css
Responsive Images (wil/ali)314
html, css, responsive-design
Icon Fonts vs. SVGs—Which One Should You Use in 2018?313
fonts, icon-fonts, svg
Converting Images to WebP (mal/sma)312
conversion, webp, sketch, photoshop, adobe, cloudinary
Image Alt Text vs. Title Text vs. File Names: What’s the Difference? (bri/sea)311
seo, alt-text, accessibility, naming, microcontent, comparisons
Improving Performance Perception: On-Demand Image Resizing310
performance, optimization, resizing, html
What Is SVG Good For? (chr/css)309
svg, examples
The Four Big Ways Jetpack Helps With Image Performance (css)308
wordpress, plugins, performance
Designing for Accessibility and Inclusion (sma)307
design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability
Some Things About “alt” Text (chr/css)306
accessibility, alt-text, html
Bad Icons: How to Identify and Improve Them (nng)305
how-tos, icons, design, usability
The Front-End Checklist (the)304
websites, checklists, html, css, javascript, accessibility, performance, seo
Tips for Icon Usability303
videos, icons, usability, tips-and-tricks
A Pretty Good SVG Icon System (chr/css)302
svg, icons
When Large Isn’t Large Enough: Designing With Hero Images (sma)301
design
Masking vs. Clipping: When to Use Each (sar/css)300
masking, clipping, svg, comparisons
GIF, PNG, JPG, or SVG: Which One to Use?299
jpeg, png, gif, svg, webp, comparisons
Let the Content Delivery Network Optimize Your Images (jon/sma)298
content-delivery, optimization, performance
What Is the Right Image Format for Your Website?297
compression, jpeg, gif, png, svg, webp
Guetzli, Google’s New JPEG Encoder (tel)296
performance, jpeg, compression, tooling
Measuring Image Widths in JavaScript (Carefully) (chr/css)295
javascript
Align SVG Icons to Text and Say Goodbye to Font Icons (pro)294
svg, icons, icon-fonts, fonts, css, design, alignment
A Compendium of SVG Information (chr/css)293
overviews, svg, link-lists
Develop Locally, Use Images From Production (chr/css)292
environments, processes, apache, servers
The Joy of Optimizing (una/btc)291
videos, performance, optimization
Create Thumbnails With PHP (rik)290
php
Responsive Images in CSS (chr/css)289
responsive-design, css, html
SVG Filter Primitives—Input and Output288
svg, filters
SVG and Media Queries (jaf)287
svg, css, media-queries, canvas, support, browsers
The SVG “path” Syntax: An Illustrated Guide (chr/css)286
guides, svg
WordPress SVG Support: How to Enable SVGs in WordPress285
how-tos, wordpress, svg
An Introduction to SVG Filters284
introductions, svg, filters
Accessible SVGs in High Contrast Mode (eri/css)283
accessibility, svg, contrast, colors
Are Icons Content? (chr/css)282
icons, html, content
Accessible SVGs (css)281
svg, accessibility, examples
Using WebP Images (mal/css)280
webp, conversion
Get the Original Image From a Data URL (chr/css)279
data-urls
Practical SVG (chr/ali)278
svg
High Performance SVGs (sar/css)277
svg, performance, tooling, optimization
Working With Images in Stylesheets With PostCSS (css)276
css, backgrounds, postcss, examples
RespImageLint—Linter for Responsive Images275
bookmarklets, html, responsive-design, linting
How PNG Works274
png, compression
The Hamburger Icon Debate273
mobile, icons, design-patterns
Why npm Scripts? (css)272
npm, nodejs, conversion, linting, minification, compression, sprites, examples
Usability Testing of Icons (nng)271
icons, testing, usability
Lazy-Loading Images: How Not to Really Annoy Your Users270
lazy-loading, performance, jquery
Blending Modes Demystified (ali)269
design, colors, effects, css
A Guide for SVG Support in Email (geo/css)268
guides, svg, support, email
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css)267
guides, smil, svg, animations
Decorating the Web With CSS Border Images266
decoration, css, borders
Creating Alpha Channel JPEGs Using SVG (zol)265
jpeg, svg, transparency+opacity
The Image Replacement Museum (mar/css)264
image-replacement, techniques, html, css, overviews, link-lists
Background Image Shapes (css)263
backgrounds, shapes, css, transforms, clipping, svg
Ensure High Contrast for Text Over Images (nng)262
contrast, colors, accessibility, usability
How to Make Charts With SVG (fon/css)261
how-tos, visualization, svg, html, javascript
Factors Affecting Website Performance260
performance, network, browsers, memory, servers, multimedia
Creating Cel Animations With SVG (hey/sma)259
animations, svg, css, sass
Preloading Images in Parallel With Promises (kit)258
javascript, promises, preloading, performance
The Anatomy of Responsive Images (jaf)257
html, responsive-design, support, browsers
SVG Is for Everybody (chr/btc)256
videos, svg
SVG Lessons I Learned the Hard Way (sar/btc)255
videos, svg, lessons
Mastering Image Optimization in WordPress254
wordpress, optimization, performance
Performance Tools (fon/css)253
performance, tooling, content-delivery, testing, dev-tools, css, javascript, optimization, link-lists
The Art of SVG Filters and Why It Is Awesome (sma)252
svg, filters, css
SVG Fallbacks Guide (ame/css)251
guides, svg, graceful-degradation
image-dimensions (sin)250
packages, npm
HTML5 Image Description Extension (“longdesc”) (cpt/w3c)249
html, standards
Responsive Hero Images (gri/clo)248
responsive-design
Using WebP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr (zol)247
webp, jpeg, png, polyfills, modernizr
CSS Sprites With Sass and Compass246
css, sprites, sass, compass
Why Responsive Images Matter (wil/ali)245
responsive-design
Responsive Images in Practice (ali)244
responsive-design, html, css
How SVG Fragment Identifiers Work (chr/css)243
svg, css
Styling and Animating SVGs With CSS (sar/sma)242
svg, css, animations
Probably Don’t Base64 SVG (chr/css)241
svg, data-urls, base64
A Guide to SVG Animations (SMIL) (sar/css)240
guides, svg, animations, smil
Image Optimization Services (gri/clo)239
performance, optimization, link-lists
Don’t Use “<picture>” (Most of the Time) (gri/clo)238
html, responsive-design
How a New HTML Element Will Make the Web Faster (ars)237
html, performance, responsive-design
Making SVGs Responsive With CSS (sar/cod)236
svg, responsive-design, css
Favicons, Touch Icons, Tile Icons, Etc.—Which Do You Need? (css)235
icons, favicons
Swapping Out SVG Icons (chr/css)234
svg, icons, css, jquery, techniques
How to “Resize” Images With CSS233
css, media-queries, resizing
Testing Responsive Images (wil/ali)232
html, responsive-design
Picturefill 2.0: Responsive Images and the Perfect Polyfill (sma)231
html, responsive-design, polyfills
Tips for Creating Accessible SVG (tin)230
accessibility, svg, tips-and-tricks
Dealing With Content Images in Email (chr/css)229
email, html, wordpress, responsive-design
“srcset” and “sizes” (eee)228
html, responsive-design
A Q&A on the Picture Element (wil+/ali)227
interviews, html, semantics, responsive-design
Shadow DOM226
shadow-dom, dom, svg, angularjs, css, mathml
Rethinking Responsive SVG (sma)225
responsive-design, svg, css
One Solution to Responsive Images (sma)224
responsive-design, html, php
Animating Vectors With SVG (bri/24w)223
svg, animations, javascript
Why Responsive Images Is So Hard (chr/css)222
responsive-design, css, html, art-direction
Webpage Performance (geo)221
performance, compression, minification, caching, content-delivery
Image Compression for Web Developers220
compression, performance, link-lists
Using Remote Image Files When You Develop Locally (lul)219
processes, drupal, apache, servers
WebKit Has Implemented “srcset”, and It’s a Good Thing (wil/sma)218
webkit, html, responsive-design
SVG Fallbacks (chr/css)217
svg, support, browsers, png
SVG Filters on Text (css)216
svg, filters, effects
Images Slowing Down Your Site? Try This One Weird Trick! (aer)215
performance, javascript
The Web Designer’s Guide to Image Copyrights214
guides, design, licensing
Simple Responsive Images With CSS Background Images (sma)213
responsive-design, backgrounds, css, html
Why We Need Responsive Images (tka)212
responsive-design, performance, metrics
Replace the Image in an “<img>” With CSS (css)211
css, image-replacement, techniques
How to Create SVG Paths Easily Using the GIMP (zol)210
how-tos, svg
Media Queries Within SVG (tka)209
svg, css, media-queries, support, browsers
Media Queries in SVG Images (gri/clo)208
svg, css, media-queries
Using SVG (chr/css)207
svg, css, support, browsers, examples, data-urls, tooling, link-lists
Favicon: A Changing Role206
html, favicons
Web Technology: 5 Things to Watch in 2013 (sts/cne)205
browsers, standards, performance
CSS Masks—How to Use Masking in CSS Now (sch)204
how-tos, css, masking, svg
Perfecting Your Website’s Favicon203
favicons, optimization
Compressive Images (sco)202
compression, jpeg
Better SVG Sprites With Fragment Identifiers (sto)201
svg, sprites
Responsive Image Format200
responsive-design, jpeg, pjpeg
CSS Sprites Revisited (sma)199
css, sprites, techniques
On Responsive Images (chr/css)198
html, responsive-design
The Need for a Responsive Web Image Format (tel)197
responsive-design, mobile, webp
Resolution Independence With SVG (dbu/sma)196
svg, css, responsive-design
Caching Images With JavaScript and HTML5 Progress Bars (zol)195
caching, performance, javascript, html, progress-indicators
pngquant (kor)194
websites, tooling, libraries, png, compression
Adaptive Images for Responsive Designs (mat)193
responsive-design, html
Responsive Images and Transparent Content Negotiation in HTTP (kar)192
html, responsive-design, content-negotiation
How to Add Images to Your CSS Borders191
how-tos, css, borders
Lightbox2190
libraries, javascript, effects, lightbox
Responsive [Images] (gri/clo)189
responsive-design
A Farewell to CSS3 Gradients (mis)188
css, gradients, vendor-extensions, svg