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