Life is about deciding who you are: Join us and decide to be for environmental protection, free education and generous social security, human rights and international law, and, of course, action against oppression and violence (starting with helping the people of occupied Palestine 🇵🇸)! 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#
SVG Favicons That Respect Theme Preference (paw)657
svg, favicons, dark-mode
Figcaptions Versus Alt Text (tem)656
html, alt-text, accessibility, comparisons
Sprites on the Web (jos)655
css, sprites, techniques
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design (hol/css)654
svg, progress-indicators, performance
How to Write Alt Text for News (sta/the)653
how-tos, alt-text, accessibility
Measuring SVG Rendering Time (sto)652
svg, png, rendering, performance, web-vitals, metrics
What Is JPEG XL: Do We Really Need Another Image Format? (aar/deb)651
jpeg-xl, quality, performance, metrics
How to Design Great Alt Text: An Introduction (deq)650
how-tos, introductions, alt-text, accessibility
How to Favicon in 2026: Three Files That Fit Most Needs (sit/evi)649
how-tos, favicons
Accessibility (bog+/htt)648
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 Make (uxd)647
contrast, colors, wcag, accessibility, mistakes
Non-Blocking Cross-Browser Image Rendering on the Canvas (mys/per)646
canvas, javascript, performance
Non-Square Image Blur Extensions (ana/fro)645
css, effects
The Idiot Sandwich—on Embedding Alt Text (ede)644
alt-text, accessibility
How to Create an Adaptive SVG Favicon Using the “prefers-color-scheme” Media Query (zor/css)643
videos, how-tos, favicons, svg, css
How to Create 3D Images in CSS With the Layered Pattern (sun/fro)642
how-tos, css, transforms
100, 150, or 200? Debunking the Alt Text Character Limit641
alt-text, accessibility, link-lists
“pathLength” Makes Makes SVG Path Animations Easier to Manage (ste)640
svg, animations
AI and Alt Text (ted+/web)639
videos, ai, alt-text, accessibility
Alt Text or Image Description?638
accessibility, alt-text, comparisons, terminology
Why Do We Need Dithering?637
dithering
The Present and Potential Future of Progressive Image Rendering (jaf)636
jpeg, png, webp, avif, jpeg-xl, pjpeg, comparisons, outlooks
Inset Shadows Directly on “img” Elements (ana/fro)635
svg, css, shadows
Accessibility Minute—September 2025 (col)634
accessibility, alt-text, captions, comparisons
Replace Your Animated GIFs With SVGs (fro)633
gif, svg, animations, css
Your Images Are (Probably) Oversized632
html, pixel-density
Liquid Glass in the Browser: Refraction With CSS and SVG631
effects, liquid-glass, css, svg
Anatomy of Good Icons (nng)630
videos, icons, design
Added Support for WebP Images (git)629
webp, github
Testing Methods: Images of Text (dec)628
accessibility, testing, wcag
Icon Interpretation vs. Recognizability627
videos, icons, usability
How to Build a Cohesive Icon Library for Your Design System626
how-tos, design-systems, icons
Implementing Accessible SVG Elements (a11)625
accessibility, svg, fundamentals
A Friendly Introduction to SVG (jos)624
introductions, svg
A Simple Website623
websites, history, layout, animations, tables, javascript, ajax, flash, deploying, simplicity
Accessible Social Media: Alt Text622
accessibility, social-media, alt-text
How Long Can Alt-Text Be? (jup)621
accessibility, alt-text
Stop Using Hero Images! They’re Killing Your UX (web)620
design, user-experience
Implement WCAG Rules in Your Infographics (a11)619
accessibility, wcag, visualization, design, alt-text, contrast, colors
SVG Optimization and Accessibility Basics (dbu)618
fundamentals, svg, optimization, accessibility
Writing Alt Text With AI (jar)617
ai, prompting, alt-text, accessibility
PNG Is Back (pro)616
png
Portable Network Graphics (PNG) Specification (Third Edition) (pro+/w3c)615
standards, png
Why JPEGs Still Rule the Web (ern/iee)614
jpeg, history
Having “figure” Match Width of Contained Image (jef)613
html, css
You Can Style Alt Text Like Any Other Text (geo/css)612
alt-text, accessibility, css, javascript
Finding the Joy in Alt Text (bry)611
alt-text, accessibility
How I Built Dynamic Social Media Images in Eleventy Using Cloudinary (chi)610
eleventy, social-media, tooling, cloudinary
Revisiting Image Maps (mal/css)609
image-maps, html, techniques
The Problem(s) With Image Accessibility608
accessibility, alt-text, html
Image Alt Text Guide: How to Write and Add Image Alt Text Reference607
guides, accessibility, user-experience, seo, alt-text, shopify
A11y 101: 1.4.5 Images of Text (nat)606
introductions, accessibility, wcag, alt-text
Background Image Opacity in CSS (jim)605
css, backgrounds
The Importance of Alt Text for Images604
alt-text, accessibility, dei, compliance, legal, seo, user-experience
A Guide to Alt Text Across Popular Tools (pop)603
guides, alt-text, accessibility, tooling
How Does Chrome Prioritize Image Requests? (deb)602
chrome, google, browsers, performance
Minimal CSS-Only Blurry Image Placeholders (kal)601
placeholders, backgrounds, css, techniques
Create an HTML Dialog When You Click an Image (cas)600
html, modals
Revisiting CSS “border-image” (mal/css)599
css, borders, data-urls
Quick Accessibility Wins That Are Easy to Implement (kev)598
videos, accessibility, html, semantics, alt-text, contrast, colors, keyboard-navigation, focus, skip-links
Generate Growing Images Using Gemini API597
ai, gemini, apis
Maintaining Screenshot Quality and Color Profile in Figma (max)596
figma, screenshots, quality, colors
Super Crispy SVG Icons (ale)595
svg, icons, optimization
Image Comparison Slider in 6 Lines of JavaScript594
sliders, javascript
@ 11ty/image-color (zac)593
packages, npm, colors
Trusting AI With My Images Wasn’t Easy (dri)592
ai, alt-text, accessibility, automation, tooling
In Defense of Text Labels (chr)591
labels, icons, usability, design
Common Accessibility Challenges When Navigating Tables590
accessibility, tables, keyboard-navigation
How to Improve Webpage Speed: Tips and Best Practices589
how-tos, performance, optimization, tips-and-tricks, best-practices, redirecting, fonts, testing, tooling, webpagetest
Optimizing Images for Web Performance (tod/fro)588
performance, optimization, jpeg, png, webp, avif, html, caching
GitHub Copilot Brings Mockups to Life by Generating Code From Images (web)587
github-copilot, ai, design
10 Digital Accessibility Mistakes to Avoid586
accessibility, mistakes, alt-text, contrast, colors, keyboard-navigation, aria, semantics, headings, labels, forms, pop-ups, testing
Alt Text Accessibility: Balancing AI and Human Oversight (tec+/equ)585
podcasts, accessibility, multimedia, alt-text, ai, quality
How to Gif (2025 Edition) (oll)584
how-tos, multimedia, gif, png, webp, avif, jpeg-xl
How to Favicon in 2025: Three Files That Fit Most Needs (sit/evi)583
how-tos, favicons
Generating Image Descriptions and Alt-Text With AI (dri)582
alt-text, accessibility, ai, quality
Page Bloat Update: How Does Ever-Increasing Page Size Affect Your Business and Your Users? (tam/spe)581
performance, trends, metrics, javascript, desktop, mobile
Using SVGs on Canvas With Compose Multiplatform (eev)580
canvas, svg, javascript
How to Fix Washed Out Colors in Google Chrome Screenshots for Clear and Accurate Images579
how-tos, screenshots, colors, chrome, google, browsers
Remove the “direction” Property on Your Arrow Icons (ali)578
icons, microcontent
Quick Note: Limit Use of “Logo” in Alt Text (nat)577
accessibility, logos, alt-text, microcontent
Media (ste+/htt)576
web-almanac, studies, research, metrics, multimedia, html
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers (ale/mat)575
html, buttons, icons, accessibility, screen-readers
Designer Problems: “Make the Logo Bigger!” (web)574
design, logos
Solved by Modern CSS: Feature Image (sha)573
css
Mastering SVG Arcs (sma)572
svg
How to Fix Storybook Screenshot Testing (not)571
how-tos, testing, screenshots, storybook, vitest
A Link on a Logo in the Header, What Should the Alt-Text Be? (ria/mat)570
accessibility, branding, links, logos, alt-text
Preloading Responsive Images (tre)569
html, hints, performance, preloading
Avoid Hotlinking Images With “Cross-Origin-Resource-Policy”568
security
Old Alt Text Advice (ste)567
accessibility, alt-text, html, microcontent, best-practices
Alt Text: Not Always Needed (nng)566
accessibility, alt-text, writing
Don’t Forget to Localize Your Icons (eri)565
localization, icons, culture
How to Identify Decorative Images and Boost Accessibility (a11)564
how-tos, decoration, accessibility, html, aria
Advanced Image Formats and When to Use Them: WebP, AVIF, HEIC, and JPEG XL563
webp, avif, jpeg-xl, comparisons
The Image Compression Challenge (Donating Money for Excess-Free Projects) (j9t)562
compression, performance, tooling
Dynamic Social Share Images Using Cloudinary (sia)561
social-media, tooling, cloudinary
10 Simple Ways to Make Your Social Media Posts Accessible560
accessibility, social-media, content, alt-text, captions, contrast
You Can Use “text-wrap: balance;” on Icons (ede)559
css, icons
How to Build an Image Search Application With OpenAI CLIP and PostgreSQL in JavaScript558
how-tos, search, ai, openai, postgresql, databases, javascript, functionality
AVIF vs. HEIC: Which Format Is Better?557
avif, comparisons
Icon Usability: When and How to Evaluate Digital Icons (nng)556
how-tos, usability, icons
How to Use CSS and SVG Clipping and Masking Techniques (wpe)555
how-tos, css, svg, clipping, masking
“img sizes=auto” for Native Lazy Loading (ste)554
code-pens, html, lazy-loading, performance
Building the Perfect Logo Strip (nil/9el)553
css, logos, techniques
Keeping Pixely Images Pixely (and Performant!) (chr/fro)552
css, effects
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)551
svg, examples
Supporting AVIF in Google Search (joh)550
google, search, avif, support
Harnessing Copilot and Other Gen-AI Tools to Increase Digital Accessibility Efficiency549
videos, ai, microsoft, tooling, accessibility, alt-text
Is Using “aria-label” to Add Alternative Text But No “alt” Attribute Still a WCAG Fail?548
discussions, accessibility, html, attributes, forms, labels, aria, alt-text
Mastering Typography in Logo Design (sma)547
typography, design, logos
Accessibility Specialists Warn Against Using AI for Alt Text546
accessibility, alt-text, ai
Writing Alt Text for a Scientific Figure545
accessibility, alt-text, writing, information-design
Good Intentions, Poor Context (tpg)544
accessibility, microcontent, buttons, links
Have It All: External, Styleable, and Scalable SVG (sco)543
svg, css
Designing Design Systems: Constructing an Icon System542
design, design-systems, icons, case-studies
“Practical SVG” Is Now Free to Read Online (chr)541
books, svg
Can AI Be Used to Write Good Descriptive Alt Text for Images in 2024? (the)540
accessibility, alt-text, ai
Alternative Text in Action539
accessibility, alt-text, writing, examples
Do Grayscale Images Take Less Space?538
colors, performance
The Little Things: Confusing Error Messages (brw)537
errors, developer-experience
Seamless Screenshot Testing for Compose With Screenshotbot536
screenshots, regressions, testing, tooling
How Top HR Agencies Build Trust Through Logo Designs535
design, logos, branding
Minimal SVG Favicon (sto)534
svg, favicons, minimalism
Ditch the Pixels: The Small and Vectorized Web (yor)533
html, svg
My Approach to Alt Text (aar)532
accessibility, processes, alt-text, link-lists
Alt Left (ste)531
accessibility, html, alt-text, anti-patterns
The Picture-Superiority Effect: Harness the Power of Visuals (nng)530
design, information-design
Images as the First Thing in a Button or Link (tem)529
accessibility, html, buttons, links
Taking Regular Screenshots of My Website528
screenshots, automation, playwright, github-actions
Write Alt Text Like You’re Talking to a Friend (spa/clo)527
accessibility, alt-text
Long Alt (aar)526
accessibility, alt-text, support, browsers, screen-readers
Why We Are Still Using 88×31 Buttons525
history, design
Sliding 3D Image Frames in CSS (css/sma)524
css, techniques
Faster Websites With the “picture” Element (fra)523
html, performance
How to Think About HTML Responsive Images (db)522
how-tos, html, responsive-design
“aspect-ratio” Gotcha (css)521
css, aspect-ratio
Introducing Jpegli: A New JPEG Coding Library520
introductions, jpeg, libraries, compression
How to Design Icons in Figma519
how-tos, icons, figma, design
Thoughts on Embedding Alternative Text Metadata Into Images (eri)518
accessibility, metadata
How to Invert the Colors Using CSS (ron)517
css, colors, filters
AVIF Is the Future of Web Images516
avif, performance, outlooks
The 88×31 Archive515
web, history
How to Make a Cursor Image Hover Effect With CSS and JS514
how-tos, css, javascript, cursors, hover
Everything You Need to Know About Image Formats in 2024 (web)513
jpeg, png, gif, webp, avif, pdf, svg
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro)512
svg, css, masking, performance
Dynamically Adding Text Alternatives to Images With AI (kar)511
automation, ai, accessibility, alt-text
How to Favicon in 2024: Six Files That Fit Most Needs (sit/evi)510
how-tos, favicons
Progressive JPEGs (PJPEG): The Key to Loading Images Faster on Your Website509
pjpeg, jpeg, performance, comparisons
The World’s Smallest PNG (eva)508
png, minimalism
AI Art Is the New Stock Image (ia)507
design, ai
Everything You Need to Know About Responsive Logo Design (web)506
design, branding, logos, responsive-design
Responsive SVGs (nil/5t3)505
svg, responsive-design
Border Images in CSS: A Key Focus Area for Interop 2023 (dip/mdn)504
borders, css, browsers, web-platform, interoperability
Practical “img” Element Defaults (zor/css)503
videos, css
AI for Web Devs: AI Image Generation (aus)502
ai, tooling, automation
“sizes=auto” Pretty Much Requires “width” and “height” Attributes (eee)501
html, attributes, maintainability
Create Dynamic Web Experiences With Interactive SVG Animations500
svg, animations, tooling
Text With Media Background: Practical Solutions499
microcontent, readability, accessibility
Stop Using AI-Generated Images (mic)498
ai
AVIF: Meet the Next Level Image File Format497
avif
Cloudinary: The “Dramatic” Story of JPEG XL Support So Far (jon/com)496
jpeg-xl, support, browsers
How to Write Good Alt Text for Screen Readers (cra)495
how-tos, accessibility, writing, alt-text, screen-readers
An Introduction to Working With SVGs in React494
introductions, svg, react
Some Sensible Defaults for Your “img” Elements (css)493
css
Images on the Web492
concepts, compression, jpeg, png, webp, avif, nextjs
Which Is the Best Image Format for Your Website?491
comparisons, jpeg, png, gif, webp, avif
The Ultimate Low-Quality Image Placeholder Technique (css)490
performance, web-vitals
How Mastodon Handles Images and Web Previews (rba)489
social-media, mastodon, open-graph, metadata, html
Stop Lazy Loading Product and Hero Images (gri/clo)488
performance, lazy-loading
How to Make Charts and Graphs More Accessible (pop)487
how-tos, information-design, accessibility
Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo)486
buttons, html, css, svg
How I Write Alt Text for Code Snippets on Social Media (ben)485
accessibility, alt-text, writing, social-media
What Is Alt Text and How to Write It (tpg)484
accessibility, alt-text, writing
Please Size Your Inline SVGs (aar)483
svg
An “alt” Decision Tree Using Only “:has()” (aar)482
accessibility, css, alt-text
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources II (sma)481
accessibility, content, best-practices, techniques
Alt Text Hall of Fame (ste/alt)480
websites, accessibility, writing, alt-text
Responsive Images: DIY Implementation in 6 Steps479
html, responsive-design
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources (sma)478
accessibility, content, best-practices, techniques
SVG Gradients: Solving Curved Challenges477
svg, gradients
Using Imagery in Visual Design (nng)476
design, content
How to Use CSS “object-fit” and “object-position”475
how-tos, css
JPEG XL: How It Started, How It’s Going474
compression, jpeg-xl
Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images (css/sma)473
css, effects
Creating SVG Animations Using Tailwind CSS472
svg, animations, tailwind
Displaying Your Full-Sized YouTube Thumbnail or a Custom OG Image in a Twitter Card (phi)471
youtube, twitter+x, open-graph, social-media, metadata
Understanding SVG Paths470
svg
What Does the Image “decoding” Attribute Actually Do? (tun)469
html, attributes, performance
How to Add a CSS Reveal Animation to Your Images (css)468
how-tos, css, animations
Is There a Viable Animated GIF Alternative Yet or What? (tyl/clo)467
gif
Deploying AVIF for More Responsive Websites (dev)466
avif, performance
Dithering (chr)465
dithering
The Image Sorting Experiment (uxd)464
information-design, sorting, experiments
A Designers Guide to the Principles of Web Design463
guides, design, principles, consistency, legibility, navigation, hierarchy, whitespace, usability
The Alt Text War—SEO vs. Accessibility462
accessibility, seo, writing, alt-text, comparisons
The Death of JPEG-XL461
jpeg-xl
What Makes a Good Screenshot? (llo/tpg)460
accessibility
Convert PNG to JPG Using FFmpeg (ama)459
png, jpeg, conversion, tooling
The Ultimate Guide to Image Optimisation (fox/cal)458
guides, performance, compression, optimization
Change Favicon on Switching Browser Tabs in JavaScript (ami)457
favicons, javascript
Are You Making These Five Mistakes When Writing Alt Text?456
accessibility, writing, alt-text, mistakes
Unlocking SVG’s Superpowers (btc)455
videos, svg
On Container Queries, Responsive Images, and JPEG-XL (gri/clo)454
css, container-queries, responsive-design, jpeg-xl
Dithering Images With React/JavaScript453
dithering, react, javascript
How to Style Your Alt Text (ede)452
how-tos, css, accessibility, alt-text
Using Focal Points, Aspect Ratio, and Object-Fit to Crop Images Correctly (hen)451
css, aspect-ratio
Building an Animated SVG Logo With animejs450
svg, logos, animations, vuejs
You Kinda Want an Orange Favicon (chr)449
favicons, browsers, theming
How to Favicon in 2023: Six Files That Fit Most Needs (sit/evi)448
how-tos, favicons
Learn Images (wil/dev)447
courses, svg, gif, png, jpeg, webp, avif
Easy SVG Customization and Animation: A Practical Guide (cod/sma)446
guides, svg, animations
Optimal Images in HTML (ste/bui)445
html, backgrounds, performance, optimization
The Modern Way of Serving Images (kur)444
html, performance
Creating a Custom Cursor Using CSS (css)443
cursors, css, svg
Easy Dynamic Social Sharing Image With Eleventy442
eleventy, social-media, tooling
6 Common SVG Fails (and How to Fix Them) (css)441
svg
Optimizing the Image Element LCP (sma)440
performance, web-vitals
Advanced Usage Patterns for Taking Page Element Screenshots With Playwright439
screenshots, playwright, javascript
Interactive SVG Reference438
svg
Stock Photos of People With Disabilities (den)437
accessibility, content
Compress an Image Before Upload With JavaScript (rik)436
javascript, file-handling, compression
Website Accessibility (15 Best Practices) (bru)435
accessibility, best-practices, content, readability, captcha, alt-text, forms, focus, html, tooling
Mini-Guide to Add an Image (its/mat)434
html
CSS Infinite Slider Flipping Through Polaroid Images (css/css)433
sliders, css, effects
Enough With the Pointless Images (boa)432
design, decoration
Take Full-Size Screenshots of Websites Without Any Tools in Chrome (ami)431
browsers, google, chrome, screenshots
Reduce Image Sizes by Removing Metadata (per)430
metadata, performance, optimization
CSS Infinite and Circular Rotating Image Slider (css/css)429
sliders, css, animations
Handling Images With Inconsistent Height in CSS (ami)428
css
What Image Format Should You Use in Your Next Project? (alv)427
A Guide to Image Optimization on Jamstack Sites (daw/sma)426
guides, compression, optimization, performance, tech-stacks, jamstack
6 Steps to Improve HTML Images for Users and Developers (aus)425
html, performance, responsive-design
The Case for JPEG XL (jon)424
jpeg-xl, compression
Screenshotting VoiceOver on macOS (kil)423
tooling, screenshots, apple, unix-like, voiceover
Twitter Reminds Us About Alt Text, but How Good Are We at It? (uxd)422
accessibility, writing, alt-text, twitter+x
Google on Alt Text SEO and Accessibility (sea)421
google, seo, accessibility, writing, alt-text
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project420
accessibility, svg, lessons
How to Write Good Alt Text (cfe)419
how-tos, accessibility, writing, alt-text
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep)418
svg, sprites, performance
How to Scale SVG (ame/css)417
how-tos, scaling, svg
GIFs Without the .gif: The Most Performant Image and Video Options Right Now (oll/css)416
performance, multimedia, gif, html
Media (htt)415
web-almanac, studies, research, metrics, multimedia
Justin Yarbrough Talks About Alt Text414
podcasts, accessibility, writing, alt-text
Converting PNG Images to WebP Using PHP (ami)413
conversion, png, webp, php
How Your Favourite UI Libraries Manage Their Icons (and)412
libraries, icons, maintenance
8 Tricks for SVG Optimization (uxd)411
svg, tips-and-tricks, optimization
Screenshots Are Not Documentation410
documentation, screenshots
AI-Generated Images From AI-Generated Alt Text (aar)409
accessibility, writing, alt-text, ai
What Are Best Practices for Creating Alt Text?408
accessibility, writing, alt-text, best-practices
Upload An Image With Node.js (rik)407
nodejs, file-handling
Vector Animations With Figma and SVG Animate (uxd)406
animations, figma, svg
Research Insight: Accessibility of Images (ihe/tet)405
accessibility, usability, research
Powerful Image Optimization Tools (lou/sma)404
link-lists, compression, performance, tooling
Can SVG Symbols Affect Web Performance?403
svg, performance
Best Practices for Images402
html, best-practices
How to Serve WebP Images on nginx401
how-tos, webp, nginx, servers
Image Guard (j9t)400
packages, npm, compression, performance, jpeg, png, gif, webp, avif
Icon-Only Links Fail WCAG (tem)399
accessibility, links, wcag, icons, conformance
Writing Useful Alt Text (mic)398
accessibility, writing, alt-text
Just How Long Should Alt Text Be? (geo/css)397
accessibility, writing, alt-text
Magical SVG Techniques (sma)396
svg, techniques
How to Upload an Image With PHP (rik)395
how-tos, php, file-handling
Image Borders in CSS (ami)394
css, borders
How to Turn HTML Webpage Into an Image?393
how-tos, html, conversion
Alternative Text (Alt Text) (pop)392
accessibility, html, writing, alt-text
Picture Perfect Images With the Modern “<img>” Element (add)391
html, performance, web-vitals
Optimizing SVG Patterns to Their Smallest Size (css)390
svg, performance
15 Useful Placeholder Tools for Designers and Developers389
tooling, content, placeholders, testing, link-lists
Favi-Gone: 6 Reasons Why Your Favicon Disappeared From the Google Search Results388
favicons, google, seo
There Is No Character Limit for “Alt Text” (yat)387
accessibility, html, alt-text
Never, Ever, Ever Use Pixelation for Redacting Text386
content, obfuscation, security
Building an Adaptive Favicon (arg/dev)385
favicons
How to Favicon in 2022: Six Files That Fit Most Needs (sit/evi)384
how-tos, favicons
Big Images, Blazingly Fast383
performance, quality
Optimize Your PNGs With Oxipng and pre-commit (ada)382
png, performance, compression, tooling
Create an Open Graph Image Generator With Node.js (log)381
nodejs, open-graph
Social Media Image Sizes 2022: Cheat Sheet for Every Network380
cheat-sheets, social-media
Alt Tag Emptiness (ste)379
accessibility, html, alt-text, aria
Responsive Image Gallery With Animated Captions (5t3)378
css, animations, responsive-design, examples
Image Magnifier Using Only One Line of CSS (ami)377
css
The Many Methods for Using SVG Icons (hui)376
css, svg, icons
Image Display Elements (5t3)375
html, responsive-design
Why Your Website Should Not Use Dithered Images374
dithering, compression, performance
We Analyzed 425,909 Favicons373
favicons
Beginner’s Guide to Responsive Images: How to Get Them Right (lou)372
guides, responsive-design, html
Using Modern Image Formats: AVIF and WebP (add/sma)371
avif, webp, jpeg, png, comparisons, performance, compression
Optimizing Images on the Web (clo)370
performance, cloudflare
Blowing Up HTML Size With Responsive Images (deb)369
html, performance, responsive-design
5 Steps for Writing Alt Text for Accessibility368
accessibility, writing, alt-text
Fractional SVG Stars With CSS367
css, svg
One Favicon to Rule Them All (j9t)366
html, favicons
Decoding AVIF: Deep Dive With Cats and imgproxy (evi)365
avif, deep-dives
Exploring the CSS Paint API: Image Fragmentation Effect (css/css)364
css, apis, effects
Pixelart and the “image-rendering” Paradox363
css, art
Writing Great Alt Text: Emotion Matters (jaf)362
accessibility, writing, alt-text, user-experience
What to Know About AVIF on Cloudinary (sia)361
avif, cloudinary
Image Descriptions: A Human Technique That Robots Can’t Grasp (uxd)360
accessibility, alt-text
The Anatomy of a Web Page: 14 Basic Elements359
design-patterns, navigation, buttons, forms, multimedia, favicons, link-lists
Beyond Basic Alt Text—Charts, Maps, and Diagrams358
accessibility, alt-text, information-design
A Framework for Building Open Graph Images (git)357
open-graph
OMG, SVG Favicons FTW!356
html, favicons, svg
Your Image Is Probably Not Decorative (eri/sma)355
decoration, accessibility, alt-text
Adding Shadows to SVG Icons With CSS and SVG Filters (css)354
css, svg, icons, shadows, filters, effects
Half the Size of Images by Optimising for High Density Displays (jaf)353
html, performance
Serving Sharp Images to High Density Screens (jaf)352
performance
Using AVIF to Compress Images on Your Site (dev)351
performance, avif, compression
How to Build an Image Comparison Slider350
how-tos, sliders, react
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma)349
accessibility, svg, screen-readers
JPEG XL348
websites, jpeg-xl
Content-Aware Image Resizing in JavaScript347
javascript, resizing
Web Developer’s Guide to AVIF Images346
guides, avif
How to Use SVG Image Sprites (cra)345
how-tos, svg, sprites
Create Responsive Image Effects With CSS Gradients and “aspect-ratio” (5t3/sma)344
responsive-design, css, gradients, aspect-ratio, effects
Seven Myths About Alt Text343
accessibility, alt-text, myths
Front-End Performance 2021: Assets Optimizations (vit/sma)342
performance, checklists, link-lists, compression
Optimizing Image Depth (mey/css)341
quality, performance, optimization
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format340
webp, google
GIFs and “prefers-reduced-motion” (chr/css)339
gif, reduced-motion, html
How to Design a Set of Icons338
design, icons
Creating a Custom Cursor Using CSS?337
css, svg, cursors
AVIF Has Landed (jaf)336
avif, performance, quality, jpeg, webp, svg, png, comparisons
Optimize Images With a GitHub Action (chr/css)335
compression, github-actions
Pausing a GIF With “details”/“summary” (chr/css)334
html, disclosure-widgets, gif, animations
Writing Alt Text for Data Visualization333
accessibility, alt-text, writing, information-design, visualization
Lazy Loading Images in Svelte (css)332
lazy-loading, svelte, performance
Webwaste (ger/ali)331
web, sustainability
How to Design a Brand Logo (With Ease) (sma)330
how-tos, design, branding, logos
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css)329
favicons, svg, dark-mode
How to Use an Emoji as a Favicon Easily (chr/css)328
how-tos, favicons, emoji, data-urls
Different Favicon for Development (chr/css)327
favicons, environments
Tools for Optimizing SVG (chr/css)326
tooling, svg, optimization, link-lists
Accessible SVGs: Inclusiveness Beyond Patterns (car/sma)325
svg, accessibility, tooling
Setting Height and Width on Images Is Important Again (tun/sma)324
html, performance, web-vitals
Optimize CSS Background Images With Media Queries (dev)323
css, backgrounds, media-queries, optimization
Do This to Improve Image Loading on Your Website (fon/css)322
performance, html
AVIF for Next-Generation Image Coding321
avif, compression
Progressive JPEGs: An Introduction320
introductions, jpeg, pjpeg, compression
Dark Mode Favicons (chr/css)319
favicons, dark-mode
Speed Up Your Website With WebP (sma)318
performance, optimization, webp
A Guide to Optimizing Images for Mobile (sma)317
guides, performance, optimization, mobile
Workflow Considerations for Using an Image Management Service (chr/css)316
performance, tooling, content-delivery
How to Change Your Favicon in Wordpress: A Step-by-Step Guide (yoa)315
guides, favicons, wordpress
Faster Image Loading With Embedded Image Previews (sma)314
performance, lazy-loading, techniques, javascript
The Making of an Animated Favicon (pre/css)313
favicons, animations, canvas
When to Use “img,” “img@ srcset,” and “picture” and “source” (j9t)312
html
Image Optimization in WordPress (sma)311
wordpress, performance, optimization
Understanding Image Compression: Tooling and Context (j9t)310
performance, compression, tooling
A Crime Called Favicon (j9t)309
favicons, maintainability
A Practical Guide to SVG and Design Tools (sma)308
guides, svg, sketch, figma, adobe, tooling, design
SVG Circle Decomposition to Paths (sma)307
svg, animations
Stacked “Borders” (mey/css)306
css, borders, shadows, backgrounds, gradients
Did You Know That CSS Custom Properties Can Handle Images Too? (fon/css)305
css, custom-properties
Using Artificial Intelligence to Generate Alt Text on Images (css)304
ai, alt-text, accessibility
Improve Animated GIF Performance With HTML5 Video (sma)303
gif, multimedia, performance
Apply a Filter to a Background Image (chr/css)302
backgrounds, filters, css
Responsive Images (wil/ali)301
html, css, responsive-design
Icon Fonts vs. SVGs—Which One Should You Use in 2018?300
fonts, icon-fonts, svg
Converting Images to WebP (mal/sma)299
conversion, webp, sketch, photoshop, adobe, cloudinary
Image Alt Text vs. Title Text vs. File Names: What’s the Difference? (bri/sea)298
seo, alt-text, accessibility, naming, microcontent, comparisons
Improving Performance Perception: On-Demand Image Resizing297
performance, optimization, resizing, html
What Is SVG Good For? (chr/css)296
svg, examples
The Four Big Ways Jetpack Helps With Image Performance (css)295
wordpress, plugins, performance
Designing for Accessibility and Inclusion (sma)294
design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability
Some Things About “alt” Text (chr/css)293
accessibility, alt-text, html
Bad Icons: How to Identify and Improve Them (nng)292
how-tos, icons, design, usability
The Front-End Checklist (the)291
websites, checklists, html, css, javascript, accessibility, performance, seo
Tips for Icon Usability290
videos, icons, usability, tips-and-tricks
A Pretty Good SVG Icon System (chr/css)289
svg, icons
When Large Isn’t Large Enough: Designing With Hero Images (sma)288
design
Masking vs. Clipping: When to Use Each (sar/css)287
masking, clipping, svg, comparisons
GIF, PNG, JPG, or SVG: Which One to Use?286
jpeg, png, gif, svg, webp, comparisons
Let the Content Delivery Network Optimize Your Images (jon/sma)285
content-delivery, optimization, performance
What Is the Right Image Format for Your Website?284
compression, jpeg, gif, png, svg, webp
Guetzli, Google’s New JPEG Encoder (tel)283
performance, jpeg, compression, tooling
Measuring Image Widths in JavaScript (Carefully) (chr/css)282
javascript
Align SVG Icons to Text and Say Goodbye to Font Icons281
svg, icons, icon-fonts, fonts, css, design, alignment
A Compendium of SVG Information (chr/css)280
overviews, svg, link-lists
Develop Locally, Use Images From Production (chr/css)279
environments, processes, apache, servers
The Joy of Optimizing (una/btc)278
videos, performance, optimization
Create Thumbnails With PHP (rik)277
php
Responsive Images in CSS (chr/css)276
responsive-design, css, html
SVG and Media Queries (jaf)275
svg, css, media-queries, canvas, support, browsers
The SVG “path” Syntax: An Illustrated Guide (chr/css)274
guides, svg
WordPress SVG Support: How to Enable SVGs in WordPress273
how-tos, wordpress, svg
Accessible SVGs in High Contrast Mode (eri/css)272
accessibility, svg, contrast, colors
Are Icons Content? (chr/css)271
icons, html, content
Accessible SVGs (css)270
svg, accessibility, examples
Using WebP Images (mal/css)269
webp, conversion
Get the Original Image From a Data URL (chr/css)268
data-urls
Practical SVG (chr/ali)267
svg
High Performance SVGs (sar/css)266
svg, performance, tooling, optimization
Working With Images in Stylesheets With PostCSS (css)265
css, backgrounds, postcss, examples
RespImageLint—Linter for Responsive Images264
bookmarklets, html, responsive-design, linting
How PNG Works263
png, compression
Why npm Scripts? (css)262
npm, nodejs, conversion, linting, minification, compression, sprites, examples
Usability Testing of Icons (nng)261
icons, testing, usability
Lazy-Loading Images: How Not to Really Annoy Your Users260
lazy-loading, performance, jquery
Blending Modes Demystified (ali)259
design, colors, effects, css
A Guide for SVG Support in Email (geo/css)258
guides, svg, support, email
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css)257
guides, smil, svg, animations
Decorating the Web With CSS Border Images256
decoration, css, borders
The Image Replacement Museum (mar/css)255
image-replacement, techniques, html, css, overviews, link-lists
Background Image Shapes (css)254
backgrounds, shapes, css, transforms, clipping, svg
Ensure High Contrast for Text Over Images (nng)253
contrast, colors, accessibility, usability
How to Make Charts With SVG (fon/css)252
how-tos, visualization, svg, html, javascript
Factors Affecting Website Performance251
performance, network, browsers, memory, servers, multimedia
Creating Cel Animations With SVG (hey/sma)250
animations, svg, css, sass
Preloading Images in Parallel With Promises (kit)249
javascript, promises, preloading, performance
The Anatomy of Responsive Images (jaf)248
html, responsive-design, support, browsers
SVG Is for Everybody (chr/btc)247
videos, svg
SVG Lessons I Learned the Hard Way (sar/btc)246
videos, svg, lessons
Mastering Image Optimization in WordPress245
wordpress, optimization, performance
Performance Tools (fon/css)244
performance, tooling, content-delivery, testing, dev-tools, css, javascript, optimization, link-lists
The Art of SVG Filters and Why It Is Awesome (sma)243
svg, filters, css
SVG Fallbacks Guide (ame/css)242
guides, svg, graceful-degradation
image-dimensions (sin)241
packages, npm
HTML5 Image Description Extension (“longdesc”) (cpt/w3c)240
html, standards
Responsive Hero Images (gri/clo)239
responsive-design
CSS Sprites With Sass and Compass238
css, sprites, sass, compass
Why Responsive Images Matter (wil/ali)237
responsive-design
Responsive Images in Practice (ali)236
responsive-design, html, css
How SVG Fragment Identifiers Work (chr/css)235
svg, css
Styling and Animating SVGs With CSS (sar/sma)234
svg, css, animations
Probably Don’t Base64 SVG (chr/css)233
svg, data-urls, base64
A Guide to SVG Animations (SMIL) (sar/css)232
guides, svg, animations, smil
Image Optimization Services (gri/clo)231
performance, optimization, link-lists
Don’t Use “<picture>” (Most of the Time) (gri/clo)230
html, responsive-design
How a New HTML Element Will Make the Web Faster (ars)229
html, performance, responsive-design
Making SVGs Responsive With CSS (sar/cod)228
svg, responsive-design, css
Favicons, Touch Icons, Tile Icons, Etc.—Which Do You Need? (css)227
icons, favicons
Swapping Out SVG Icons (chr/css)226
svg, icons, css, jquery, techniques
How to “Resize” Images With CSS225
css, media-queries, resizing
Testing Responsive Images (wil/ali)224
html, responsive-design
Picturefill 2.0: Responsive Images and the Perfect Polyfill (sma)223
html, responsive-design, polyfills
Tips for Creating Accessible SVG (tin)222
accessibility, svg, tips-and-tricks
Dealing With Content Images in Email (chr/css)221
email, html, wordpress, responsive-design
“srcset” and “sizes” (eee)220
html, responsive-design
A Q&A on the Picture Element (wil+/ali)219
interviews, html, semantics, responsive-design
Shadow DOM218
shadow-dom, dom, svg, angularjs, css, mathml
Rethinking Responsive SVG (sma)217
responsive-design, svg, css
One Solution to Responsive Images (sma)216
responsive-design, html, php
Animating Vectors With SVG (bri/24w)215
svg, animations, javascript
Why Responsive Images Is So Hard (chr/css)214
responsive-design, css, html
Image Compression for Web Developers (dev)213
compression, performance, link-lists
Webpage Performance (geo)212
performance, compression, minification, caching, content-delivery
Using Remote Image Files When You Develop Locally (lul)211
processes, drupal, apache, servers
WebKit Has Implemented “srcset”, and It’s a Good Thing (wil/sma)210
webkit, html, responsive-design
SVG Fallbacks (chr/css)209
svg, support, browsers, png
SVG Filters on Text (css)208
svg, filters, effects
Images Slowing Down Your Site? Try This One Weird Trick! (aer)207
performance, javascript
The Web Designer’s Guide to Image Copyrights206
guides, design, licensing
Simple Responsive Images With CSS Background Images (sma)205
responsive-design, backgrounds, css, html
Why We Need Responsive Images (tka)204
responsive-design, performance, metrics
Replace the Image in an “<img>” With CSS (css)203
css, image-replacement, techniques
Media Queries Within SVG (tka)202
svg, css, media-queries, support, browsers
Media Queries in SVG Images (gri/clo)201
svg, css, media-queries
Using SVG (chr/css)200
svg, css, support, browsers, examples, data-urls, tooling, link-lists
Favicon: A Changing Role199
html, favicons
Web Technology: 5 Things to Watch in 2013 (sts/cne)198
browsers, standards, performance
CSS Masks—How to Use Masking in CSS Now (sch)197
how-tos, css, masking, svg
Perfecting Your Website’s Favicon196
favicons, optimization
Compressive Images (sco)195
compression, jpeg
Better SVG Sprites With Fragment Identifiers (sto)194
svg, sprites
Responsive Image Format193
responsive-design, jpeg, pjpeg
CSS Sprites Revisited (sma)192
css, sprites, techniques
On Responsive Images (chr/css)191
html, responsive-design
The Need for a Responsive Web Image Format (tel)190
responsive-design, mobile, webp
Resolution Independence With SVG (dbu/sma)189
svg, css, responsive-design
pngquant (kor)188
websites, tooling, libraries, png, compression
Adaptive Images for Responsive Designs (mat)187
responsive-design, html
Responsive Images and Transparent Content Negotiation in HTTP (kar)186
html, responsive-design, content-negotiation
Lightbox2185
libraries, javascript, effects, lightbox
Responsive [Images] (gri/clo)184
responsive-design
A Farewell to CSS3 Gradients (mis)183
css, gradients, vendor-extensions, svg
How to Optimize Images With HTML5 Canvas (sma)182
how-tos, optimization, canvas, html
Infinite All-CSS Scrolling Slideshow (chr/css)181
scrolling, css, effects
More Logo Markup Tips (css)180
branding, logos, html, tips-and-tricks
Responsive “<img>” Elements in HTML, for Responsive Designs (mat)179
html, responsive-design
Fluid Images (bee/ali)178
layout, css, responsive-design
Better Image Management With WordPress (sma)177
wordpress, maintenance, php
HTML, “@ width,” and “@ height” (j9t)176
html, multimedia, maintainability
Using the CSS “border-image” Property (tab)175
css, borders
Google Now Indexes SVG (jsa)174
google, search, svg
Understanding “border-image” (css)173
css, borders
The Death of the Pixel as We Know It—the New DPI Web (dal/aja)172
pixel-density
Transparency in Web Design (chr/css)171
design, transparency, css, png
Principles of Icon Design (jon)170
principles, icons, design
SVG Wow169
websites, svg, examples
Empty Image “src” Can Destroy Your Site (nza)168
html, php, traffic
Fast by Default and Web Performances (aja)167
performance, sprites, javascript, css
“toDataURL,” Canvas, and SVG (bra/aja)166
javascript, apis, canvas, svg
Vital Tips for Effective Logo Design (sma)165
design, logos, tips-and-tricks
Perfect Full Page Background Image (chr/css)164
backgrounds, css, filters, jquery, techniques
Lightbox 2: Simple JavaScript Image Gallery163
videos, javascript, lightbox
Why IE9 Will Support SVG (fyr)162
internet-explorer, microsoft, browsers, svg, support
How to Optimize PNG (sma)161
how-tos, png, optimization
Clever JPG Optimization Techniques (sma)160
jpeg, optimization, techniques
IE Fix: Bicubic Scaling for Images (chr/css)159
internet-explorer, microsoft, browsers, scaling, css
WebFormElements.com (tel)158
forms, browsers, screenshots