Frontend Dogma

“images” Archive

Supertopics: , · subtopics: , , , , , , , , , , , , ,  (non-exhaustive) · glossary look-up: “images”

Entry (With Sources) and Other Related TopicsDate#
Media (by+/via)388
, , , , ,
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers (by/via)387
, , , , ,
Designer Problems: “Make the Logo Bigger!” (via)386
,
Solved by Modern CSS: Feature Image (by)385
Mastering SVG Arcs (via)384
A Link on a Logo in the Header, What Should the Alt-Text Be? (by/via)383
, , , ,
Preloading Responsive Images (by)382
, ,
Avoid Hotlinking Images With “Cross-Origin-Resource-Policy”381
Old Alt Text Advice (by)380
, , , ,
Don’t Forget to Localize Your Icons (by)379
, ,
How to Identify Decorative Images and Boost Accessibility (via)378
, , , ,
The Image Compression Challenge (Donating Money for Excess-Free Projects) (by)377
, ,
Dynamic Social Share Images Using Cloudinary (by)376
,
You Can Use “text-wrap: balance;” on Icons (by)375
,
How to Build an Image Search Application With OpenAI CLIP and PostgreSQL in JavaScript (by/via)374
, , , , , ,
Icon Usability: When and How to Evaluate Digital Icons (by/via)373
, ,
How to Use CSS and SVG Clipping and Masking Techniques (via)372
, , ,
“img sizes=auto” for Native Lazy Loading (by)371
, , ,
Keeping Pixely Images Pixely (and Performant!) (by/via)370
,
Building the Perfect Logo Strip (by/via)369
, ,
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (via)368
,
Supporting AVIF in Google Search (by/via)367
, , ,
Is Using “aria-label” to Add Alternative Text But No “alt” Attribute Still a WCAG Fail?366
, , , , , , ,
Mastering Typography in Logo Design (by/via)365
, ,
Accessibility Specialists Warn Against Using AI for Alt Text (by/via)364
, ,
Good Intentions, Poor Context (via)363
, , ,
Have It All: External, Styleable, and Scalable SVG (by)362
,
Designing Design Systems: Constructing an Icon System (via)361
, , ,
“Practical SVG” Is Now Free to Read Online (by)360
,
Alternative Text in Action (via)359
, , ,
Do Grayscale Images Take Less Space?358
,
The Little Things: Confusing Error Messages (by)357
,
How Top HR Agencies Build Trust Through Logo Designs (by/via)356
, ,
Minimal SVG Favicon (by)355
, ,
Ditch the Pixels: The Small and Vectorized Web (by)354
,
The Picture-Superiority Effect: Harness the Power of Visuals (via)353
,
Images as the First Thing in a Button or Link (by)352
, , ,
Sliding 3D Image Frames in CSS (by/via)351
,
Faster Websites With the “picture” Element (by)350
,
How to Think About HTML Responsive Images (by)349
, ,
Introducing Jpegli: A New JPEG Coding Library (by+/via)348
, , ,
“aspect-ratio” Gotcha (by)347
How to Design Icons in Figma (via)346
, , ,
Thoughts on Embedding Alternative Text Metadata Into Images (by)345
,
How to Invert the Colors Using CSS (by)344
, ,
AVIF Is the Future of Web Images343
, ,
The 88×31 Archive342
,
How to Make a Cursor Image Hover Effect With CSS and JS (by)341
, , ,
Everything You Need to Know About Image Formats in 2024 (via)340
, , , , , ,
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (by/via)339
, , ,
How to Favicon in 2024: Six Files That Fit Most Needs (by/via)338
,
The World’s Smallest PNG (by)337
,
AI Art Is the New Stock Image (via)336
,
Everything You Need to Know About Responsive Logo Design (via)335
, , ,
Responsive SVGs (by/via)334
,
Border Images in CSS: A Key Focus Area for Interop 2023 (by/via)333
, , , ,
Practical “img” Element Defaults (by/via)332
,
AI for Web Devs: AI Image Generation (by)331
, ,
“sizes=auto” Pretty Much Requires “width” and “height” Attributes (by)330
, ,
Create Dynamic Web Experiences With Interactive SVG Animations (via)329
, ,
Text With Media Background: Practical Solutions (by/via)328
, ,
Stop Using AI-Generated Images (by/via)327
AVIF: Meet the Next Level Image File Format (via)326
Cloudinary: The “Dramatic” Story of JPEG XL Support So Far (by/via)325
, ,
An Introduction to Working With SVGs in React (via)324
, ,
Some Sensible Defaults for Your “img” Elements (by)323
Images on the Web (by/via)322
, , , , , ,
Which Is the Best Image Format for Your Website? (via)321
, , , , ,
The Ultimate Low-Quality Image Placeholder Technique (by)320
,
How Mastodon Handles Images and Web Previews (by)319
, , , ,
Stop Lazy Loading Product and Hero Images (by/via)318
,
How to Make Charts and Graphs More Accessible (via)317
, ,
Let’s Make a Rubber Button With HTML, CSS and SVG (by/via)316
, , ,
Please Size Your Inline SVGs (by)315
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources II (by/via)314
, , ,
Responsive Images: DIY Implementation in 6 Steps (by)313
,
Designing Accessible Text Over Images: Best Practices, Techniques, and Resources (by/via)312
, , ,
SVG Gradients: Solving Curved Challenges (via)311
,
Using Imagery in Visual Design (by/via)310
,
How to Use CSS “object-fit” and “object-position” (by/via)309
,
JPEG XL: How It Started, How It’s Going (by/via)308
,
Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images (by/via)307
,
Displaying Your Full-Sized YouTube Thumbnail or a Custom OG Image in a Twitter Card (by)306
, , , ,
Creating SVG Animations Using Tailwind CSS (by+/via)305
, ,
Understanding SVG Paths (by)304
What Does the Image “decoding” Attribute Actually Do? (by)303
, ,
How to Add a CSS Reveal Animation to Your Images (by/via)302
, ,
Is There a Viable Animated GIF Alternative Yet or What? (by/via)301
Deploying AVIF for More Responsive Websites (by/via)300
,
Dithering (by)299
The Image Sorting Experiment (by/via)298
, ,
A Designers Guide to the Principles of Web Design (via)297
, , , , , , , ,
The Death of JPEG-XL (via)296
What Makes a Good Screenshot? (by/via)295
The Ultimate Guide to Image Optimisation (by/via)294
, , ,
Change Favicon on Switching Browser Tabs in JavaScript (by)293
,
Unlocking SVG’s Superpowers (by/via)292
,
On Container Queries, Responsive Images, and JPEG-XL (by/via)291
, , ,
Dithering Images With React/JavaScript (by)290
, ,
Using Focal Points, Aspect Ratio, and Object-Fit to Crop Images Correctly (by)289
Building an Animated SVG Logo With animejs (by/via)288
, , ,
You Kinda Want an Orange Favicon (by)287
, ,
How to Favicon in 2023: Six Files That Fit Most Needs (by/via)286
,
Learn Images (by/via)285
, , , , , ,
Easy SVG Customization and Animation: A Practical Guide (by/via)284
, ,
Optimal Images in HTML (by/via)283
, , ,
The Modern Way of Serving Images (by)282
,
Creating a Custom Cursor Using CSS (by/via)281
, ,
6 Common SVG Fails (and How to Fix Them) (by/via)280
Optimizing the Image Element LCP (via)279
,
Interactive SVG Reference (by)278
Stock Photos of People With Disabilities (by/via)277
,
Website Accessibility (15 Best Practices) (by)276
, , , , , , , , ,
Mini-Guide to Add an Image (by/via)275
CSS Infinite Slider Flipping Through Polaroid Images (by/via)274
,
Enough With the Pointless Images (by)273
,
Reduce Image Sizes by Removing Metadata (by/via)272
, ,
CSS Infinite and Circular Rotating Image Slider (by/via)271
,
Handling Images With Inconsistent Height in CSS (by)270
What Image Format Should You Use in Your Next Project? (by)269
A Guide to Image Optimization on Jamstack Sites (by/via)268
, , , , ,
6 Steps to Improve HTML Images for Users and Developers (by)267
, ,
The Case for JPEG XL (by/via)266
,
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project (by)265
, ,
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (by)264
, ,
How to Scale SVG (by/via)263
,
GIFs Without the .gif: The Most Performant Image and Video Options Right Now (by/via)262
, , ,
Media (by/via)261
, , , ,
Converting PNG Images to WebP Using PHP (by)260
, , ,
How Your Favourite UI Libraries Manage Their Icons (by/via)259
, ,
8 Tricks for SVG Optimization (by/via)258
, ,
AI-Generated Images From AI-Generated Alt Text (by)257
, , ,
Vector Animations With Figma and SVG Animate (by/via)256
, ,
Research Insight: Accessibility of Images (by/via)255
, ,
Powerful Image Optimization Tools (by/via)254
, , ,
Can SVG Symbols Affect Web Performance? (by)253
,
Best Practices for Images (by)252
,
Imagemin Guard (by)251
, , , , , , , ,
Icon-Only Links Fail WCAG (by)250
, , , ,
Magical SVG Techniques (via)249
,
Image Borders in CSS (by)248
,
How to Turn HTML Webpage Into an Image? (by)247
, ,
Picture Perfect Images With the Modern “<img>” Element (by/via)246
, ,
Optimizing SVG Patterns to Their Smallest Size (by/via)245
,
Favi-Gone: 6 Reasons Why Your Favicon Disappeared From the Google Search Results (by)244
, ,
15 Useful Placeholder Tools for Designers and Developers (by)243
, , , ,
Never, Ever, Ever Use Pixelation for Redacting Text (by/via)242
, ,
Building an Adaptive Favicon (by/via)241
How to Favicon in 2022: Six Files That Fit Most Needs (by/via)240
,
Optimize Your PNGs With Oxipng and pre-commit (by)239
, , ,
Big Images, Blazingly Fast (by/via)238
,
Create an Open Graph Image Generator With Node.js (by/via)237
,
Social Media Image Sizes 2022: Cheat Sheet for Every Network (by+/via)236
,
Alt Tag Emptiness (by)235
, , ,
Responsive Image Gallery With Animated Captions (by)234
, , ,
Image Magnifier Using Only One Line of CSS (by)233
The Many Methods for Using SVG Icons (by)232
, ,
Image Display Elements (by)231
,
Why Your Website Should Not Use Dithered Images (via)230
, ,
We Analyzed 425,909 Favicons229
Beginner’s Guide to Responsive Images: How to Get Them Right (by/via)228
, ,
Using Modern Image Formats: AVIF and WebP (by/via)227
, , , , , ,
Optimizing Images on the Web (by/via)226
,
Blowing Up HTML Size With Responsive Images (via)225
, ,
Fractional SVG Stars With CSS (by)224
,
One Favicon to Rule Them All (by)223
,
Decoding AVIF: Deep Dive With Cats and imgproxy (by+/via)222
,
Exploring the CSS Paint API: Image Fragmentation Effect (by/via)221
, ,
Pixelart and the “image-rendering” Paradox (by)220
,
What to Know About AVIF on Cloudinary (by)219
Image Descriptions: A Human Technique That Robots Can’t Grasp (by/via)218
,
The Anatomy of a Web Page: 14 Basic Elements (by/via)217
, , , , , ,
Beyond Basic Alt Text—Charts, Maps, and Diagrams (by/via)216
, ,
A Framework for Building Open Graph Images (by/via)215
Your Image Is Probably Not Decorative (by/via)214
, ,
OMG, SVG Favicons FTW! (by)213
, ,
Serving Sharp Images to High Density Screens (by)212
Half the Size of Images by Optimising for High Density Displays (by)211
,
Adding Shadows to SVG Icons With CSS and SVG Filters (by/via)210
, , , , ,
Using AVIF to Compress Images on Your Site (by/via)209
, ,
How to Build an Image Comparison Slider (by)208
,
JPEG XL207
,
Content-Aware Image Resizing in JavaScript (by)206
,
Web Developer’s Guide to AVIF Images (by)205
,
How to Use SVG Image Sprites (by/via)204
, ,
Create Responsive Image Effects With CSS Gradients and “aspect-ratio” (by/via)203
, , ,
Front-End Performance 2021: Assets Optimizations (by/via)202
, , ,
Google Is Already Experimenting With WebP2 As Successor To WebP Image Format (by/via)201
,
How to Design a Set of Icons (via)200
,
Creating a Custom Cursor Using CSS? (by)199
, ,
Webwaste (by/via)198
,
How to Design a Brand Logo (With Ease) (via)197
, , ,
Accessible SVGs: Inclusiveness Beyond Patterns (by/via)196
, ,
Setting Height and Width on Images Is Important Again (by/via)195
, ,
Optimize CSS Background Images With Media Queries (by/via)194
, , ,
AVIF for Next-Generation Image Coding (by+/via)193
,
Progressive JPEGs: An Introduction (via)192
, ,
Speed Up Your Website With WebP (via)191
, ,
A Guide to Optimizing Images for Mobile (via)190
, , ,
Faster Image Loading With Embedded Image Previews (via)189
, , ,
When to Use “img,” “img@ srcset,” and “picture” and “source” (by)188
Image Optimization in WordPress (by/via)187
, ,
Understanding Image Compression: Tooling and Context (by)186
, ,
A Crime Called Favicon (by)185
,
A Practical Guide to SVG and Design Tools (by/via)184
, , , , , ,
SVG Circle Decomposition to Paths (via)183
,
Improve Animated GIF Performance With HTML5 Video (by/via)182
, ,
Responsive Images (by/via)181
, ,
Icon Fonts vs. SVGs—Which One Should You Use in 2018? (via)180
, ,
Converting Images to WebP (by/via)179
, , , ,
Improving Performance Perception: On-Demand Image Resizing (by/via)178
, , ,
Designing for Accessibility and Inclusion (via)177
, , , , , , , , ,
The Front-End Checklist (by)176
, , , , , , ,
When Large Isn’t Large Enough: Designing With Hero Images (by/via)175
GIF, PNG, JPG, or SVG: Which One to Use? (via)174
, , , , ,
Let the Content Delivery Network Optimize Your Images (by/via)173
, ,
What Is the Right Image Format for Your Website? (by/via)172
, , , , ,
Guetzli, Google’s New JPEG Encoder (by)171
, , ,
Align SVG Icons to Text and Say Goodbye to Font Icons (by/via)170
, , , , , ,
A Compendium of SVG Information (by/via)169
, ,
The Joy of Optimizing (by/via)168
, ,
WordPress SVG Support: How to Enable SVGs in WordPress (by/via)167
, ,
Accessible SVGs (by/via)166
, ,
Practical SVG (by/via)165
RespImageLint—Linter for Responsive Images (by)164
, , ,
How PNG Works (by)163
,
Lazy-Loading Images: How Not to Really Annoy Your Users (via)162
, ,
Blending Modes Demystified (by/via)161
, , ,
Decorating the Web With CSS Border Images (by/via)160
, ,
Creating Cel Animations With SVG (by/via)159
, , ,
Preloading Images in Parallel With Promises (by/via)158
,
SVG Lessons I Learned the Hard Way (by/via)157
, ,
SVG Is for Everybody (by/via)156
,
Mastering Image Optimization in WordPress (via)155
, ,
image-dimensions (by)154
,
Responsive Hero Images (by/via)153
CSS Sprites With Sass and Compass (via)152
, , ,
Why Responsive Images Matter (by/via)151
Responsive Images in Practice (by/via)150
, ,
Styling and Animating SVGs With CSS (by/via)149
, ,
Image Optimization Services (by/via)148
, ,
Don’t Use “<picture>” (Most of the Time) (by/via)147
,
Making SVGs Responsive With CSS (by/via)146
, ,
How to “Resize” Images With CSS (by/via)145
, ,
Testing Responsive Images (by/via)144
,
Picturefill 2.0: Responsive Images and the Perfect Polyfill (via)143
, ,
Tips for Creating Accessible SVG (by/via)142
, ,
“srcset” and “sizes” (by)141
,
A Q&A on the Picture Element (by+/via)140
, , ,
Rethinking Responsive SVG (by/via)139
, ,