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