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 Other Related TopicsDate#
Non-Blocking Cross-Browser Image Rendering on the Canvas (mys)626
canvas, javascript, performance
How to Create 3D Images in CSS With the Layered Pattern (sun/fro)625
how-tos, css, transforms
100, 150, or 200? Debunking the Alt Text Character Limit624
alt-text, accessibility, link-lists
“pathLength” Makes Makes SVG Path Animations Easier to Manage (ste)623
svg, animations
AI and Alt Text (ted+/web)622
videos, ai, alt-text, accessibility
Alt Text or Image Description?621
accessibility, alt-text, comparisons, terminology
Why Do We Need Dithering?620
dithering
The Present and Potential Future of Progressive Image Rendering (jaf)619
jpeg, png, webp, avif, jpeg-xl, pjpeg, comparisons, outlooks
Inset Shadows Directly on “img” Elements (ana/fro)618
svg, css, shadows
Accessibility Minute—September 2025 (col)617
accessibility, alt-text, captions, comparisons
Replace Your Animated GIFs With SVGs (fro)616
gif, svg, animations, css
Your Images Are (Probably) Oversized615
html, pixel-density
Liquid Glass in the Browser: Refraction With CSS and SVG614
effects, liquid-glass, css, svg
Anatomy of Good Icons (nng)613
videos, icons, design
Added Support for WebP Images (git)612
webp, github
Testing Methods: Images of Text (dec)611
accessibility, testing, wcag
Icon Interpretation vs. Recognizability610
videos, icons, usability
How to Build a Cohesive Icon Library for Your Design System609
how-tos, design-systems, icons
Implementing Accessible SVG Elements (a11)608
accessibility, svg, fundamentals
A Friendly Introduction to SVG (jos)607
introductions, svg
A Simple Website606
websites, history, layout, animations, tables, javascript, ajax, flash, deploying, simplicity
Accessible Social Media: Alt Text605
accessibility, social-media, alt-text
How Long Can Alt-Text Be? (jup)604
accessibility, alt-text
Stop Using Hero Images! They’re Killing Your UX (web)603
design, user-experience
Implement WCAG Rules in Your Infographics (a11)602
accessibility, wcag, visualization, design, alt-text, contrast, colors
SVG Optimization and Accessibility Basics (dbu)601
fundamentals, svg, optimization, accessibility
Writing Alt Text With AI (jar)600
ai, prompting, alt-text, accessibility
PNG Is Back (pro)599
png
Portable Network Graphics (PNG) Specification (Third Edition) (pro+/w3c)598
standards, png
Why JPEGs Still Rule the Web (ern/iee)597
jpeg, history
Having “figure” Match Width of Contained Image (jef)596
html, css
You Can Style Alt Text Like Any Other Text (geo/css)595
alt-text, accessibility, css, javascript
Finding the Joy in Alt Text (bry)594
alt-text, accessibility
How I Built Dynamic Social Media Images in Eleventy Using Cloudinary (chi)593
eleventy, social-media, tooling, cloudinary
Revisiting Image Maps (mal/css)592
image-maps, html, techniques
The Problem(s) With Image Accessibility591
accessibility, alt-text, html
Image Alt Text Guide: How to Write and Add Image Alt Text Reference590
guides, accessibility, user-experience, seo, alt-text, shopify
A11y 101: 1.4.5 Images of Text (nat)589
introductions, accessibility, wcag, alt-text
Background Image Opacity in CSS (jim)588
css, backgrounds
The Importance of Alt Text for Images587
alt-text, accessibility, dei, compliance, legal, seo, user-experience
A Guide to Alt Text Across Popular Tools (pop)586
guides, alt-text, accessibility, tooling
How Does Chrome Prioritize Image Requests? (deb)585
chrome, google, browsers, performance
Minimal CSS-Only Blurry Image Placeholders (kal)584
placeholders, backgrounds, css, techniques
Create an HTML Dialog When You Click an Image (cas)583
html, modals
Revisiting CSS “border-image” (mal/css)582
css, borders, data-urls
Quick Accessibility Wins That Are Easy to Implement (kev)581
videos, accessibility, html, semantics, alt-text, contrast, colors, keyboard-navigation, focus, skip-links
Generate Growing Images Using Gemini API580
ai, gemini, apis
Maintaining Screenshot Quality and Color Profile in Figma (max)579
figma, screenshots, quality, colors
Super Crispy SVG Icons (ale)578
svg, icons, optimization
Image Comparison Slider in 6 Lines of JavaScript577
sliders, javascript
@ 11ty/image-color (zac)576
packages, npm, colors
Trusting AI With My Images Wasn’t Easy (dri)575
ai, alt-text, accessibility, automation, tooling
In Defense of Text Labels (chr)574
labels, icons, usability, design
Common Accessibility Challenges When Navigating Tables573
accessibility, tables, keyboard-navigation
How to Improve Webpage Speed: Tips and Best Practices572
how-tos, performance, optimization, tips-and-tricks, best-practices, redirecting, fonts, testing, tooling, webpagetest
Optimizing Images for Web Performance (tod/fro)571
performance, optimization, jpeg, png, webp, avif, html, caching
GitHub Copilot Brings Mockups to Life by Generating Code From Images (web)570
github-copilot, ai, design
10 Digital Accessibility Mistakes to Avoid569
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)568
podcasts, accessibility, multimedia, alt-text, ai, quality
How to Favicon in 2025: Three Files That Fit Most Needs (sit/evi)567
how-tos, favicons
How to Gif (2025 Edition) (oll)566
how-tos, multimedia, gif, png, webp, avif, jpeg-xl
Generating Image Descriptions and Alt-Text With AI (dri)565
alt-text, accessibility, ai, quality
Page Bloat Update: How Does Ever-Increasing Page Size Affect Your Business and Your Users? (tam/spe)564
performance, trends, metrics, javascript, desktop, mobile
Using SVGs on Canvas With Compose Multiplatform (eev)563
canvas, svg, javascript
Remove the “direction” Property on Your Arrow Icons (ali)562
icons, microcontent
Quick Note: Limit Use of “Logo” in Alt Text (nat)561
accessibility, logos, alt-text, microcontent
Media (ste+/htt)560
web-almanac, studies, research, metrics, multimedia, html
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers (ale/mat)559
html, buttons, icons, accessibility, screen-readers
Designer Problems: “Make the Logo Bigger!” (web)558
design, logos
Solved by Modern CSS: Feature Image (sha)557
css
Mastering SVG Arcs (sma)556
svg
How to Fix Storybook Screenshot Testing (not)555
how-tos, testing, screenshots, storybook, vitest
A Link on a Logo in the Header, What Should the Alt-Text Be? (ria/mat)554
accessibility, branding, links, logos, alt-text
Preloading Responsive Images (tre)553
html, hints, performance, preloading
Avoid Hotlinking Images With “Cross-Origin-Resource-Policy”552
security
Old Alt Text Advice (ste)551
accessibility, alt-text, html, microcontent, best-practices
Alt Text: Not Always Needed (nng)550
accessibility, alt-text, writing
Don’t Forget to Localize Your Icons (eri)549
localization, icons, culture
How to Identify Decorative Images and Boost Accessibility (a11)548
how-tos, decoration, accessibility, html, aria
The Image Compression Challenge (Donating Money for Excess-Free Projects) (j9t)547
compression, performance, tooling
Dynamic Social Share Images Using Cloudinary (sia)546
social-media, tooling, cloudinary
10 Simple Ways to Make Your Social Media Posts Accessible545
accessibility, social-media, content, alt-text, captions, contrast
You Can Use “text-wrap: balance;” on Icons (ede)544
css, icons
How to Build an Image Search Application With OpenAI CLIP and PostgreSQL in JavaScript543
how-tos, search, ai, openai, postgresql, databases, javascript, functionality
Icon Usability: When and How to Evaluate Digital Icons (nng)542
how-tos, usability, icons
How to Use CSS and SVG Clipping and Masking Techniques (wpe)541
how-tos, css, svg, clipping, masking
“img sizes=auto” for Native Lazy Loading (ste)540
code-pens, html, lazy-loading, performance
Building the Perfect Logo Strip (nil/9el)539
css, logos, techniques
Keeping Pixely Images Pixely (and Performant!) (chr/fro)538
css, effects
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)537
svg, examples
Supporting AVIF in Google Search (joh)536
google, search, avif, support
Harnessing Copilot and Other Gen-AI Tools to Increase Digital Accessibility Efficiency535
videos, ai, microsoft, tooling, accessibility, alt-text
Is Using “aria-label” to Add Alternative Text But No “alt” Attribute Still a WCAG Fail?534
discussions, accessibility, html, attributes, forms, labels, aria, alt-text
Mastering Typography in Logo Design (sma)533
typography, design, logos
Accessibility Specialists Warn Against Using AI for Alt Text532
accessibility, alt-text, ai
Writing Alt Text for a Scientific Figure531
accessibility, alt-text, writing, information-design
Good Intentions, Poor Context (tpg)530
accessibility, microcontent, buttons, links
Have It All: External, Styleable, and Scalable SVG (sco)529
svg, css
Designing Design Systems: Constructing an Icon System528
design, design-systems, icons, case-studies
“Practical SVG” Is Now Free to Read Online (chr)527
books, svg
Can AI Be Used to Write Good Descriptive Alt Text for Images in 2024? (the)526
accessibility, alt-text, ai
Alternative Text in Action525
accessibility, alt-text, writing, examples
Do Grayscale Images Take Less Space?524
colors, performance
The Little Things: Confusing Error Messages (brw)523
errors, developer-experience
Seamless Screenshot Testing for Compose With Screenshotbot522
screenshots, regressions, testing, tooling
How Top HR Agencies Build Trust Through Logo Designs521
design, logos, branding
Minimal SVG Favicon (sto)520
svg, favicons, minimalism
Ditch the Pixels: The Small and Vectorized Web (yor)519
html, svg
My Approach to Alt Text (aar)518
accessibility, processes, alt-text, link-lists
Alt Left (ste)517
accessibility, html, alt-text, anti-patterns
The Picture-Superiority Effect: Harness the Power of Visuals (nng)516
design, information-design
Images as the First Thing in a Button or Link (tem)515
accessibility, html, buttons, links
Taking Regular Screenshots of My Website514
screenshots, automation, playwright, github-actions
Write Alt Text Like You’re Talking to a Friend (spa/clo)513
accessibility, alt-text
Long Alt (aar)512
accessibility, alt-text, support, browsers, screen-readers
Why We Are Still Using 88×31 Buttons511
history, design
Sliding 3D Image Frames in CSS (css/sma)510
css, techniques
Faster Websites With the “picture” Element (fra)509
html, performance
How to Think About HTML Responsive Images (db)508
how-tos, html, responsive-design
“aspect-ratio” Gotcha (css)507
css, aspect-ratio
Introducing Jpegli: A New JPEG Coding Library506
introductions, jpeg, libraries, compression
How to Design Icons in Figma505
how-tos, icons, figma, design
Thoughts on Embedding Alternative Text Metadata Into Images (eri)504
accessibility, metadata
How to Invert the Colors Using CSS (ron)503
css, colors, filters
AVIF Is the Future of Web Images502
avif, performance, outlooks
The 88×31 Archive501
web, history
How to Make a Cursor Image Hover Effect With CSS and JS500
how-tos, css, javascript, cursors
Everything You Need to Know About Image Formats in 2024 (web)499
jpeg, png, gif, webp, avif, pdf, svg
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro)498
svg, css, masking, performance
Dynamically Adding Text Alternatives to Images With AI (kar)497
automation, ai, accessibility, alt-text
How to Favicon in 2024: Six Files That Fit Most Needs (sit/evi)496
how-tos, favicons
Progressive JPEGs (PJPEG): The Key to Loading Images Faster on Your Website495
pjpeg, jpeg, performance, comparisons
The World’s Smallest PNG (eva)494
png, minimalism
AI Art Is the New Stock Image (ia)493
design, ai
Everything You Need to Know About Responsive Logo Design (web)492
design, branding, logos, responsive-design
Responsive SVGs (nil/5t3)491
svg, responsive-design
Border Images in CSS: A Key Focus Area for Interop 2023 (dip/mdn)490
borders, css, browsers, web-platform, interoperability
Practical “img” Element Defaults (zor/css)489
videos, css
AI for Web Devs: AI Image Generation (aus)488
ai, tooling, automation
“sizes=auto” Pretty Much Requires “width” and “height” Attributes (eee)487
html, attributes, maintainability
Create Dynamic Web Experiences With Interactive SVG Animations486
svg, animations, tooling
Text With Media Background: Practical Solutions485
microcontent, readability, accessibility
Stop Using AI-Generated Images (mic)484
ai
AVIF: Meet the Next Level Image File Format483
avif
Cloudinary: The “Dramatic” Story of JPEG XL Support So Far (jon/com)482
jpeg-xl, support, browsers
How to Write Good Alt Text for Screen Readers (cra)481
how-tos, accessibility, writing, alt-text, screen-readers
An Introduction to Working With SVGs in React480
introductions, svg, react
Some Sensible Defaults for Your “img” Elements (css)479
css
Images on the Web478
concepts, compression, jpeg, png, webp, avif, nextjs
Which Is the Best Image Format for Your Website?477
comparisons, jpeg, png, gif, webp, avif
The Ultimate Low-Quality Image Placeholder Technique (css)476
performance, web-vitals
How Mastodon Handles Images and Web Previews (rba)475
social-media, mastodon, open-graph, metadata, html
Stop Lazy Loading Product and Hero Images (gri/clo)474
performance, lazy-loading
How to Make Charts and Graphs More Accessible (pop)473
how-tos, information-design, accessibility
Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo)472
buttons, html, css, svg
How I Write Alt Text for Code Snippets on Social Media (ben)471
accessibility, alt-text, writing, social-media
What Is Alt Text and How to Write It (tpg)470
accessibility, alt-text, writing
Please Size Your Inline SVGs (aar)469
svg
An “alt” Decision Tree Using Only “:has()” (aar)468
accessibility, css, alt-text
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources II (sma)467
accessibility, content, best-practices, techniques
Alt Text Hall of Fame (ste/alt)466
websites, accessibility, writing, alt-text
Responsive Images: DIY Implementation in 6 Steps465
html, responsive-design
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources (sma)464
accessibility, content, best-practices, techniques
SVG Gradients: Solving Curved Challenges463
svg, gradients
Using Imagery in Visual Design (nng)462
design, content
How to Use CSS “object-fit” and “object-position”461
how-tos, css
JPEG XL: How It Started, How It’s Going460
compression, jpeg-xl
Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images (css/sma)459
css, effects
Creating SVG Animations Using Tailwind CSS458
svg, animations, tailwind
Displaying Your Full-Sized YouTube Thumbnail or a Custom OG Image in a Twitter Card (phi)457
youtube, twitter+x, open-graph, social-media, metadata
Understanding SVG Paths456
svg
What Does the Image “decoding” Attribute Actually Do? (tun)455
html, attributes, performance
How to Add a CSS Reveal Animation to Your Images (css)454
how-tos, css, animations
Is There a Viable Animated GIF Alternative Yet or What? (tyl/clo)453
gif
Deploying AVIF for More Responsive Websites (dev)452
avif, performance
Dithering (chr)451
dithering
The Image Sorting Experiment (uxd)450
information-design, sorting, experiments
A Designers Guide to the Principles of Web Design449
guides, design, principles, consistency, legibility, navigation, hierarchy, whitespace, usability
The Alt Text War—SEO vs. Accessibility448
accessibility, seo, writing, alt-text, comparisons
The Death of JPEG-XL447
jpeg-xl
What Makes a Good Screenshot? (llo/tpg)446
accessibility
Convert PNG to JPG Using FFmpeg (ama)445
png, jpeg, conversion, tooling
The Ultimate Guide to Image Optimisation (fox/cal)444
guides, performance, compression, optimization
Change Favicon on Switching Browser Tabs in JavaScript (ami)443
favicons, javascript
Are You Making These Five Mistakes When Writing Alt Text?442
accessibility, writing, alt-text, mistakes
Unlocking SVG’s Superpowers (btc)441
videos, svg
On Container Queries, Responsive Images, and JPEG-XL (gri/clo)440
css, container-queries, responsive-design, jpeg-xl
Dithering Images With React/JavaScript439
dithering, react, javascript
How to Style Your Alt Text (ede)438
how-tos, css, accessibility, alt-text
Using Focal Points, Aspect Ratio, and Object-Fit to Crop Images Correctly (hen)437
css, aspect-ratio
Building an Animated SVG Logo With animejs436
svg, logos, animations, vuejs
You Kinda Want an Orange Favicon (chr)435
favicons, browsers, theming
How to Favicon in 2023: Six Files That Fit Most Needs (sit/evi)434
how-tos, favicons
Learn Images (wil/dev)433
courses, svg, gif, png, jpeg, webp, avif
Easy SVG Customization and Animation: A Practical Guide (cod/sma)432
guides, svg, animations
Optimal Images in HTML (ste/bui)431
html, backgrounds, performance, optimization
The Modern Way of Serving Images (kur)430
html, performance
Creating a Custom Cursor Using CSS (css)429
cursors, css, svg
Easy Dynamic Social Sharing Image With Eleventy428
eleventy, social-media, tooling
6 Common SVG Fails (and How to Fix Them) (css)427
svg
Optimizing the Image Element LCP (sma)426
performance, web-vitals
Advanced Usage Patterns for Taking Page Element Screenshots With Playwright425
screenshots, playwright, javascript
Interactive SVG Reference424
svg
Stock Photos of People With Disabilities (den)423
accessibility, content
Compress an Image Before Upload With JavaScript (rik)422
javascript, file-handling, compression
Website Accessibility (15 Best Practices) (bru)421
accessibility, best-practices, content, readability, captcha, alt-text, forms, focus, html, tooling
Mini-Guide to Add an Image (its/mat)420
html
CSS Infinite Slider Flipping Through Polaroid Images (css/css)419
sliders, css, effects
Enough With the Pointless Images (boa)418
design, decoration
Take Full-Size Screenshots of Websites Without Any Tools in Chrome (ami)417
browsers, google, chrome, screenshots
Reduce Image Sizes by Removing Metadata416
metadata, performance, optimization
CSS Infinite and Circular Rotating Image Slider (css/css)415
sliders, css, animations
Handling Images With Inconsistent Height in CSS (ami)414
css
What Image Format Should You Use in Your Next Project? (alv)413
A Guide to Image Optimization on Jamstack Sites (daw/sma)412
guides, compression, optimization, performance, tech-stacks, jamstack
6 Steps to Improve HTML Images for Users and Developers (aus)411
html, performance, responsive-design
The Case for JPEG XL (jon)410
jpeg-xl, compression
Screenshotting VoiceOver on macOS (kil)409
tooling, screenshots, apple, unix-like, voiceover
Twitter Reminds Us About Alt Text, but How Good Are We at It? (uxd)408
accessibility, writing, alt-text, twitter+x
Google on Alt Text SEO and Accessibility (sea)407
google, seo, accessibility, writing, alt-text
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project406
accessibility, svg, lessons
How to Write Good Alt Text (cfe)405
how-tos, accessibility, writing, alt-text
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep)404
svg, sprites, performance
How to Scale SVG (ame/css)403
how-tos, scaling, svg
GIFs Without the .gif: The Most Performant Image and Video Options Right Now (oll/css)402
performance, multimedia, gif, html
Media (htt)401
web-almanac, studies, research, metrics, multimedia
Justin Yarbrough Talks About Alt Text400
podcasts, accessibility, writing, alt-text
Converting PNG Images to WebP Using PHP (ami)399
conversion, png, webp, php
How Your Favourite UI Libraries Manage Their Icons (and)398
libraries, icons, maintenance
8 Tricks for SVG Optimization (uxd)397
svg, tips-and-tricks, optimization
Screenshots Are Not Documentation396
documentation, screenshots
AI-Generated Images From AI-Generated Alt Text (aar)395
accessibility, writing, alt-text, ai
What Are Best Practices for Creating Alt Text?394
accessibility, writing, alt-text, best-practices
Upload An Image With Node.js (rik)393
nodejs, file-handling
Research Insight: Accessibility of Images (tet)392
accessibility, usability, research
Vector Animations With Figma and SVG Animate (uxd)391
animations, figma, svg
Powerful Image Optimization Tools (lou/sma)390
link-lists, compression, performance, tooling
Can SVG Symbols Affect Web Performance?389
svg, performance
Best Practices for Images388
html, best-practices
How to Serve WebP Images on nginx387
how-tos, webp, nginx, servers
Imagemin Guard (j9t)386
packages, npm, compression, performance, jpeg, png, gif, webp, avif
Icon-Only Links Fail WCAG (tem)385
accessibility, links, wcag, icons, conformance
Writing Useful Alt Text (mic)384
accessibility, writing, alt-text
Just How Long Should Alt Text Be? (geo/css)383
accessibility, writing, alt-text
Magical SVG Techniques (sma)382
svg, techniques
How to Upload an Image With PHP (rik)381
how-tos, php, file-handling
Image Borders in CSS (ami)380
css, borders
How to Turn HTML Webpage Into an Image?379
how-tos, html, conversion
Alternative Text (Alt Text) (pop)378
accessibility, html, writing, alt-text
Picture Perfect Images With the Modern “<img>” Element (add)377
html, performance, web-vitals
Optimizing SVG Patterns to Their Smallest Size (css)376
svg, performance
15 Useful Placeholder Tools for Designers and Developers375
tooling, content, placeholders, testing, link-lists
Favi-Gone: 6 Reasons Why Your Favicon Disappeared From the Google Search Results374
favicons, google, seo
There Is No Character Limit for “Alt Text” (yat)373
accessibility, html, alt-text
Never, Ever, Ever Use Pixelation for Redacting Text372
content, obfuscation, security
Building an Adaptive Favicon (arg/dev)371
favicons
How to Favicon in 2022: Six Files That Fit Most Needs (sit/evi)370
how-tos, favicons
Big Images, Blazingly Fast369
performance, quality
Optimize Your PNGs With Oxipng and pre-commit (ada)368
png, performance, compression, tooling
Create an Open Graph Image Generator With Node.js (log)367
nodejs, open-graph
Social Media Image Sizes 2022: Cheat Sheet for Every Network366
cheat-sheets, social-media
Alt Tag Emptiness (ste)365
accessibility, html, alt-text, aria
Responsive Image Gallery With Animated Captions (5t3)364
css, animations, responsive-design, examples
Image Magnifier Using Only One Line of CSS (ami)363
css
The Many Methods for Using SVG Icons (hui)362
css, svg, icons
Image Display Elements (5t3)361
html, responsive-design
Why Your Website Should Not Use Dithered Images360
dithering, compression, performance
We Analyzed 425,909 Favicons359
favicons
Beginner’s Guide to Responsive Images: How to Get Them Right (lou)358
guides, responsive-design, html
Using Modern Image Formats: AVIF and WebP (add/sma)357
avif, webp, jpeg, png, comparisons, performance, compression
Optimizing Images on the Web (clo)356
performance, cloudflare
Blowing Up HTML Size With Responsive Images (deb)355
html, performance, responsive-design
5 Steps for Writing Alt Text for Accessibility354
accessibility, writing, alt-text
Fractional SVG Stars With CSS353
css, svg
One Favicon to Rule Them All (j9t)352
html, favicons
Decoding AVIF: Deep Dive With Cats and imgproxy (evi)351
avif, deep-dives
Exploring the CSS Paint API: Image Fragmentation Effect (css/css)350
css, apis, effects
Pixelart and the “image-rendering” Paradox349
css, art
Writing Great Alt Text: Emotion Matters (jaf)348
accessibility, writing, alt-text, user-experience
What to Know About AVIF on Cloudinary (sia)347
avif, cloudinary
Image Descriptions: A Human Technique That Robots Can’t Grasp (uxd)346
accessibility, alt-text
The Anatomy of a Web Page: 14 Basic Elements345
design-patterns, navigation, buttons, forms, multimedia, favicons, link-lists
Beyond Basic Alt Text—Charts, Maps, and Diagrams344
accessibility, alt-text, information-design
A Framework for Building Open Graph Images (git)343
open-graph
OMG, SVG Favicons FTW!342
html, favicons, svg
Your Image Is Probably Not Decorative (eri/sma)341
decoration, accessibility, alt-text
Adding Shadows to SVG Icons With CSS and SVG Filters (css)340
css, svg, icons, shadows, filters, effects
Half the Size of Images by Optimising for High Density Displays (jaf)339
html, performance
Serving Sharp Images to High Density Screens (jaf)338
performance
Using AVIF to Compress Images on Your Site (dev)337
performance, avif, compression
How to Build an Image Comparison Slider336
how-tos, sliders, react
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma)335
accessibility, svg, screen-readers
JPEG XL334
websites, jpeg-xl
Content-Aware Image Resizing in JavaScript333
javascript, resizing
Web Developer’s Guide to AVIF Images332
guides, avif
How to Use SVG Image Sprites (cra)331
how-tos, svg, sprites
Create Responsive Image Effects With CSS Gradients and “aspect-ratio” (5t3/sma)330
responsive-design, css, gradients, aspect-ratio, effects
Seven Myths About Alt Text329
accessibility, alt-text, myths
Front-End Performance 2021: Assets Optimizations (vit/sma)328
performance, checklists, link-lists, compression
Optimizing Image Depth (mey/css)327
quality, performance, optimization
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format326
webp, google
GIFs and “prefers-reduced-motion” (chr/css)325
gif, reduced-motion, html
How to Design a Set of Icons324
design, icons
Creating a Custom Cursor Using CSS?323
css, svg, cursors
AVIF Has Landed (jaf)322
avif, performance, quality, jpeg, webp, svg, png, comparisons
Optimize Images With a GitHub Action (chr/css)321
compression, github-actions
Pausing a GIF With “details”/“summary” (chr/css)320
html, disclosure-widgets, gif, animations
Writing Alt Text for Data Visualization319
accessibility, alt-text, writing, information-design, visualization
Lazy Loading Images in Svelte (css)318
lazy-loading, svelte, performance
Webwaste (ger/ali)317
web, sustainability
How to Design a Brand Logo (With Ease) (sma)316
how-tos, design, branding, logos
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css)315
favicons, svg, dark-mode
How to Use an Emoji as a Favicon Easily (chr/css)314
how-tos, favicons, emoji, data-urls
Different Favicon for Development (chr/css)313
favicons, environments
Tools for Optimizing SVG (chr/css)312
tooling, svg, optimization, link-lists
Accessible SVGs: Inclusiveness Beyond Patterns (car/sma)311
svg, accessibility, tooling
Setting Height and Width on Images Is Important Again (tun/sma)310
html, performance, web-vitals
Optimize CSS Background Images With Media Queries (dev)309
css, backgrounds, media-queries, optimization
Do This to Improve Image Loading on Your Website (fon/css)308
performance, html
AVIF for Next-Generation Image Coding307
avif, compression
Progressive JPEGs: An Introduction306
introductions, jpeg, pjpeg, compression
Dark Mode Favicons (chr/css)305
favicons, dark-mode
Speed Up Your Website With WebP (sma)304
performance, optimization, webp
A Guide to Optimizing Images for Mobile (sma)303
guides, performance, optimization, mobile
Workflow Considerations for Using an Image Management Service (chr/css)302
performance, tooling, content-delivery
How to Change Your Favicon in Wordpress: A Step-by-Step Guide (yoa)301
guides, favicons, wordpress
Faster Image Loading With Embedded Image Previews (sma)300
performance, lazy-loading, techniques, javascript
The Making of an Animated Favicon (pre/css)299
favicons, animations, canvas
When to Use “img,” “img@ srcset,” and “picture” and “source” (j9t)298
html
Image Optimization in WordPress (sma)297
wordpress, performance, optimization
Understanding Image Compression: Tooling and Context (j9t)296
performance, compression, tooling
A Crime Called Favicon (j9t)295
favicons, maintainability
A Practical Guide to SVG and Design Tools (sma)294
guides, svg, sketch, figma, adobe, tooling, design
SVG Circle Decomposition to Paths (sma)293
svg, animations
Stacked “Borders” (mey/css)292
css, borders, shadows, backgrounds, gradients
Did You Know That CSS Custom Properties Can Handle Images Too? (fon/css)291
css, custom-properties
Using Artificial Intelligence to Generate Alt Text on Images (css)290
ai, alt-text, accessibility
Improve Animated GIF Performance With HTML5 Video (sma)289
gif, multimedia, performance
Apply a Filter to a Background Image (chr/css)288
backgrounds, filters, css
Responsive Images (wil/ali)287
html, css, responsive-design
Icon Fonts vs. SVGs—Which One Should You Use in 2018?286
fonts, icon-fonts, svg
Converting Images to WebP (mal/sma)285
conversion, webp, sketch, photoshop, adobe, cloudinary
Image Alt Text vs. Title Text vs. File Names: What’s the Difference? (bri/sea)284
seo, alt-text, accessibility, naming, microcontent, comparisons
Improving Performance Perception: On-Demand Image Resizing283
performance, optimization, resizing, html
What Is SVG Good For? (chr/css)282
svg, examples
The Four Big Ways Jetpack Helps With Image Performance (css)281
wordpress, plugins, performance
Designing for Accessibility and Inclusion (sma)280
design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability
Some Things About “alt” Text (chr/css)279
accessibility, alt-text, html
Bad Icons: How to Identify and Improve Them (nng)278
how-tos, icons, design, usability
The Front-End Checklist (the)277
websites, checklists, html, css, javascript, accessibility, performance, seo
Tips for Icon Usability276
videos, icons, usability, tips-and-tricks
A Pretty Good SVG Icon System (chr/css)275
svg, icons
When Large Isn’t Large Enough: Designing With Hero Images (sma)274
design
Masking vs. Clipping: When to Use Each (sar/css)273
masking, clipping, svg, comparisons
GIF, PNG, JPG, or SVG: Which One to Use?272
jpeg, png, gif, svg, webp, comparisons
Let the Content Delivery Network Optimize Your Images (jon/sma)271
content-delivery, optimization, performance
What Is the Right Image Format for Your Website?270
compression, jpeg, gif, png, svg, webp
Guetzli, Google’s New JPEG Encoder (tel)269
performance, jpeg, compression, tooling
Measuring Image Widths in JavaScript (Carefully) (chr/css)268
javascript
Align SVG Icons to Text and Say Goodbye to Font Icons267
svg, icons, icon-fonts, fonts, css, design, alignment
A Compendium of SVG Information (chr/css)266
overviews, svg, link-lists
Develop Locally, Use Images From Production (chr/css)265
environments, processes, apache, servers
The Joy of Optimizing (una/btc)264
videos, performance, optimization
Create Thumbnails With PHP (rik)263
php
Responsive Images in CSS (chr/css)262
responsive-design, css, html
SVG and Media Queries (jaf)261
svg, css, media-queries, canvas, support, browsers
The SVG “path” Syntax: An Illustrated Guide (chr/css)260
guides, svg
WordPress SVG Support: How to Enable SVGs in WordPress259
how-tos, wordpress, svg
Accessible SVGs in High Contrast Mode (eri/css)258
accessibility, svg, contrast, colors
Are Icons Content? (chr/css)257
icons, html, content
Accessible SVGs (css)256
svg, accessibility, examples
Using WebP Images (mal/css)255
webp, conversion
Get the Original Image From a Data URL (chr/css)254
data-urls
Practical SVG (chr/ali)253
svg
High Performance SVGs (sar/css)252
svg, performance, tooling, optimization
Working With Images in Stylesheets With PostCSS (css)251
css, backgrounds, postcss, examples
RespImageLint—Linter for Responsive Images250
bookmarklets, html, responsive-design, linting
How PNG Works249
png, compression
Why npm Scripts? (css)248
npm, nodejs, conversion, linting, minification, compression, sprites, examples
Usability Testing of Icons (nng)247
icons, testing, usability
Lazy-Loading Images: How Not to Really Annoy Your Users246
lazy-loading, performance, jquery
Blending Modes Demystified (ali)245
design, colors, effects, css
A Guide for SVG Support in Email (geo/css)244
guides, svg, support, email
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css)243
guides, smil, svg, animations
Decorating the Web With CSS Border Images242
decoration, css, borders
The Image Replacement Museum (mar/css)241
image-replacement, techniques, html, css, overviews, link-lists
Background Image Shapes (css)240
backgrounds, shapes, css, transforms, clipping, svg
Ensure High Contrast for Text Over Images (nng)239
contrast, colors, accessibility, usability
How to Make Charts With SVG (fon/css)238
how-tos, visualization, svg, html, javascript
Factors Affecting Website Performance237
performance, network, browsers, memory, servers, multimedia
Creating Cel Animations With SVG (hey/sma)236
animations, svg, css, sass
Preloading Images in Parallel With Promises (kit)235
javascript, promises, preloading, performance
The Anatomy of Responsive Images (jaf)234
html, responsive-design, support, browsers
SVG Is for Everybody (chr/btc)233
videos, svg
SVG Lessons I Learned the Hard Way (sar/btc)232
videos, svg, lessons
Mastering Image Optimization in WordPress231
wordpress, optimization, performance
Performance Tools (fon/css)230
performance, tooling, content-delivery, testing, dev-tools, css, javascript, optimization, link-lists
The Art of SVG Filters and Why It Is Awesome (sma)229
svg, filters, css
SVG Fallbacks Guide (ame/css)228
guides, svg, graceful-degradation
image-dimensions (sin)227
packages, npm
HTML5 Image Description Extension (“longdesc”) (cpt/w3c)226
html, standards
Responsive Hero Images (gri/clo)225
responsive-design
CSS Sprites With Sass and Compass224
css, sprites, sass, compass
Why Responsive Images Matter (wil/ali)223
responsive-design
Responsive Images in Practice (ali)222
responsive-design, html, css
How SVG Fragment Identifiers Work (chr/css)221
svg, css
Styling and Animating SVGs With CSS (sar/sma)220
svg, css, animations
Probably Don’t Base64 SVG (chr/css)219
svg, data-urls, base64
A Guide to SVG Animations (SMIL) (sar/css)218
guides, svg, animations, smil
Image Optimization Services (gri/clo)217
performance, optimization, link-lists
Don’t Use “<picture>” (Most of the Time) (gri/clo)216
html, responsive-design
How a New HTML Element Will Make the Web Faster (ars)215
html, performance, responsive-design
Making SVGs Responsive With CSS (sar/cod)214
svg, responsive-design, css
Favicons, Touch Icons, Tile Icons, Etc.—Which Do You Need? (css)213
icons, favicons
Swapping Out SVG Icons (chr/css)212
svg, icons, css, jquery, techniques
How to “Resize” Images With CSS211
css, media-queries, resizing
Testing Responsive Images (wil/ali)210
html, responsive-design
Picturefill 2.0: Responsive Images and the Perfect Polyfill (sma)209
html, responsive-design, polyfills
Tips for Creating Accessible SVG (tin)208
accessibility, svg, tips-and-tricks
Dealing With Content Images in Email (chr/css)207
email, html, wordpress, responsive-design
“srcset” and “sizes” (eee)206
html, responsive-design
A Q&A on the Picture Element (yoa+/ali)205
interviews, html, semantics, responsive-design
Shadow DOM204
shadow-dom, dom, svg, angularjs, css, mathml
Rethinking Responsive SVG (sma)203
responsive-design, svg, css
One Solution to Responsive Images (sma)202
responsive-design, html, php
Animating Vectors With SVG (bri/24w)201
svg, animations, javascript
Why Responsive Images Is So Hard (chr/css)200
responsive-design, css, html
Image Compression for Web Developers (dev)199
compression, performance, link-lists
Webpage Performance (geo)198
performance, compression, minification, caching, content-delivery
Using Remote Image Files When You Develop Locally (lul)197
processes, drupal, apache, servers
WebKit Has Implemented “srcset”, and It’s a Good Thing (wil/sma)196
webkit, html, responsive-design
SVG Fallbacks (chr/css)195
svg, support, browsers, png
SVG Filters on Text (css)194
svg, filters, effects
Images Slowing Down Your Site? Try This One Weird Trick! (aer)193
performance, javascript
The Web Designer’s Guide to Image Copyrights192
guides, design, licensing
Simple Responsive Images With CSS Background Images (sma)191
responsive-design, backgrounds, css, html
Why We Need Responsive Images (tka)190
responsive-design, performance, metrics
Replace the Image in an “<img>” With CSS (css)189
css, image-replacement, techniques
Media Queries Within SVG (tka)188
svg, css, media-queries, support, browsers
Media Queries in SVG Images (gri/clo)187
svg, css, media-queries
Using SVG (chr/css)186
svg, css, support, browsers, examples, data-urls, tooling, link-lists
Favicon: A Changing Role185
html, favicons
Web Technology: 5 Things to Watch in 2013 (sts/cne)184
browsers, standards, performance
CSS Masks—How to Use Masking in CSS Now (sch)183
how-tos, css, masking, svg
Perfecting Your Website’s Favicon182
favicons, optimization
Compressive Images (sco)181
compression, jpeg
Better SVG Sprites With Fragment Identifiers (sto)180
svg, sprites
Responsive Image Format (yoa)179
responsive-design, jpeg, pjpeg
CSS Sprites Revisited (sma)178
css, sprites, techniques
On Responsive Images (chr/css)177
html, responsive-design
The Need for a Responsive Web Image Format (tel)176
responsive-design, mobile, webp
Resolution Independence With SVG (dbu/sma)175
svg, css, responsive-design
pngquant (kor)174
websites, tooling, libraries, png, compression
Responsive Images and Transparent Content Negotiation in HTTP (kar)173
html, responsive-design, content-negotiation
Lightbox2172
libraries, javascript, effects, lightbox
Responsive [Images] (gri/clo)171
responsive-design
A Farewell to CSS3 Gradients (mis)170
css, gradients, vendor-extensions, svg
How to Optimize Images With HTML5 Canvas (sma)169
how-tos, optimization, canvas, html
Infinite All-CSS Scrolling Slideshow (chr/css)168
scrolling, css, effects
More Logo Markup Tips (css)167
branding, logos, html, tips-and-tricks
Fluid Images (bee/ali)166
layout, css, responsive-design
Better Image Management With WordPress (sma)165
wordpress, maintenance, php
HTML, “@ width,” and “@ height” (j9t)164
html, multimedia, maintainability
Using the CSS “border-image” Property (tab)163
css, borders
Google Now Indexes SVG (jsa)162
google, search, svg
Understanding “border-image” (css)161
css, borders
The Death of the Pixel as We Know It—the New DPI Web (dal/aja)160
pixel-density
Transparency in Web Design (chr/css)159
design, transparency, css, png
SVG Wow158
websites, svg, examples
Fast by Default and Web Performances (aja)157
performance, sprites, javascript, css
“toDataURL,” Canvas, and SVG (bra/aja)156
javascript, apis, canvas, svg
Vital Tips for Effective Logo Design (sma)155
design, logos, tips-and-tricks
Perfect Full Page Background Image (chr/css)154
backgrounds, css, filters, jquery, techniques
Lightbox 2: Simple JavaScript Image Gallery153
videos, javascript, lightbox
Why IE9 Will Support SVG (fyr)152
internet-explorer, microsoft, browsers, svg, support
How to Optimize PNG (sma)151
how-tos, png, optimization
Clever JPG Optimization Techniques (sma)150
jpeg, optimization, techniques
IE Fix: Bicubic Scaling for Images (chr/css)149
internet-explorer, microsoft, browsers, scaling, css
WebFormElements.com (tel)148
forms, browsers, screenshots
The Tiniest GIF Ever147
gif, base64, php
APNG Class: Get APNG Going on All Browsers (dal/aja)146
javascript, libraries, png
88 Outstanding Favicons and 6 Resources to Help You Create Your Own145
favicons, examples, link-lists
SVG Is the Future of Application Development144
svg, web-apps, outlooks
SVG Test Page (fyr)143
svg, testing
“border-image”: No More Cutting Up Hell (dal/aja)142
css, borders, webkit, firefox, mozilla, browsers, support
SVG Filter Performance Improvements in Gecko 1.9.1141
gecko, browser-engines, browsers, svg, filters
SVG Paint Servers for HTML140
html, svg, css, backgrounds
Evil GIFs: Hiding Java in Your Image (dal/aja)139
gif, java, security
Infinite Web 2.0 Image With GWT (dal/aja)138
canvas, gwt, web-2.0
Rendering Performance in Canvas Compared to SVG and VML (dal/aja)137
performance, rendering, canvas, svg, comparisons
Preloading Images With jQuery (oct/aja)136
performance, preloading, jquery
Google Changes Favicon, Challenges You to Do Better135
google, favicons
A Validator Is Not an Accessibility Evaluation Tool? (w3c)134
discussions, html, conformance, accessibility, alt-text, tooling
Making “IE6-Friendly” PNG8 Images (mis)133
browsers, microsoft, internet-explorer, png
Using CSS for Image Borders (css)132
css, borders
APNG—the Animated PNG131
websites, png
RDFa and HTML Imagemap (kar/w3c)130
rdf, html, image-maps
Misconceptions About PNG (chr/css)129
png
Matt Cutts Discusses the “alt” Attribute128
videos, html, alt-text, accessibility, search, google
CSS Sprites: What They Are, Why They’re Cool, and How to Use Them (chr/css)127
how-tos, css, sprites