| Front-End Performance 2021: Assets Optimizations (vit/sma) | | 282 |
| performance, checklists, link-lists, compression |
| Google Is Already Experimenting With WebP2 As Successor To WebP Image Format | | 281 |
| webp, google |
| How to Design a Set of Icons | | 280 |
| design, icons |
| Creating a Custom Cursor Using CSS? | | 279 |
| css, svg, cursors |
| AVIF Has Landed (jaf) | | 278 |
| avif, performance, quality, jpeg, webp, svg, png, comparisons |
| Writing Alt Text for Data Visualization | | 277 |
| accessibility, alt-text, writing, information-design, visualization |
| Webwaste (ger/ali) | | 276 |
| web, sustainability |
| How to Design a Brand Logo (With Ease) (sma) | | 275 |
| how-tos, design, branding, logos |
| Accessible SVGs: Inclusiveness Beyond Patterns (car/sma) | | 274 |
| svg, accessibility, tooling |
| Setting Height and Width on Images Is Important Again (tun/sma) | | 273 |
| html, performance, web-vitals |
| Optimize CSS Background Images With Media Queries (dev) | | 272 |
| css, backgrounds, media-queries, optimization |
| AVIF for Next-Generation Image Coding | | 271 |
| avif, compression |
| Progressive JPEGs: An Introduction | | 270 |
| introductions, jpeg, pjpeg, compression |
| Speed Up Your Website With WebP (sma) | | 269 |
| performance, optimization, webp |
| A Guide to Optimizing Images for Mobile (sma) | | 268 |
| guides, performance, optimization, mobile |
| How to Change Your Favicon in Wordpress: A Step-by-Step Guide | | 267 |
| guides, favicons, wordpress |
| Faster Image Loading With Embedded Image Previews (sma) | | 266 |
| performance, lazy-loading, techniques, javascript |
| When to Use “img,” “img@ srcset,” and “picture” and “source” (j9t) | | 265 |
| html |
| Image Optimization in WordPress (sma) | | 264 |
| wordpress, performance, optimization |
| Understanding Image Compression: Tooling and Context (j9t) | | 263 |
| performance, compression, tooling |
| A Crime Called Favicon (j9t) | | 262 |
| favicons, maintainability |
| A Practical Guide to SVG and Design Tools (sma) | | 261 |
| guides, svg, sketch, figma, adobe, tooling, design |
| SVG Circle Decomposition to Paths (sma) | | 260 |
| svg, animations |
| Improve Animated GIF Performance With HTML5 Video (sma) | | 259 |
| gif, multimedia, performance |
| Responsive Images (wil/ali) | | 258 |
| html, css, responsive-design |
| Icon Fonts vs. SVGs—Which One Should You Use in 2018? | | 257 |
| fonts, icon-fonts, svg |
| Converting Images to WebP (mal/sma) | | 256 |
| conversion, webp, sketch, photoshop, adobe |
| Image Alt Text vs. Title Text vs. File Names: What’s the Difference? (bri/sea) | | 255 |
| seo, alt-text, accessibility, naming, microcontent, comparisons |
| Improving Performance Perception: On-Demand Image Resizing | | 254 |
| performance, optimization, resizing, html |
| Designing for Accessibility and Inclusion (sma) | | 253 |
| design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability |
| Some Things About “alt” Text (chr/css) | | 252 |
| accessibility, alt-text, html |
| The Front-End Checklist (the) | | 251 |
| websites, checklists, html, css, javascript, accessibility, performance, seo |
| A Pretty Good SVG Icon System (chr/css) | | 250 |
| svg, icons |
| When Large Isn’t Large Enough: Designing With Hero Images (sma) | | 249 |
| design |
| Masking vs. Clipping: When to Use Each (sar/css) | | 248 |
| masking, clipping, svg, comparisons |
| GIF, PNG, JPG, or SVG: Which One to Use? | | 247 |
| jpeg, png, gif, svg, webp, comparisons |
| Let the Content Delivery Network Optimize Your Images (jon/sma) | | 246 |
| content-delivery, optimization, performance |
| What Is the Right Image Format for Your Website? | | 245 |
| compression, jpeg, gif, png, svg, webp |
| Guetzli, Google’s New JPEG Encoder (tel) | | 244 |
| performance, jpeg, compression, tooling |
| Measuring Image Widths in JavaScript (Carefully) (chr/css) | | 243 |
| javascript |
| Align SVG Icons to Text and Say Goodbye to Font Icons | | 242 |
| svg, icons, icon-fonts, fonts, css, design, alignment |
| A Compendium of SVG Information (chr/css) | | 241 |
| overviews, svg, link-lists |
| Develop Locally, Use Images From Production (chr/css) | | 240 |
| environments, processes, apache, servers |
| The Joy of Optimizing (una/btc) | | 239 |
| videos, performance, optimization |
| Responsive Images in CSS (chr/css) | | 238 |
| responsive-design, css, html |
| SVG and Media Queries (jaf) | | 237 |
| svg, css, media-queries, canvas, support, browsers |
| The SVG “path” Syntax: An Illustrated Guide (chr/css) | | 236 |
| guides, svg |
| WordPress SVG Support: How to Enable SVGs in WordPress | | 235 |
| how-tos, wordpress, svg |
| Accessible SVGs in High Contrast Mode (eri/css) | | 234 |
| accessibility, svg, contrast, colors |
| Are Icons Content? (chr/css) | | 233 |
| icons, html, content |
| Accessible SVGs (css) | | 232 |
| svg, accessibility, examples |
| Using WebP Images (mal/css) | | 231 |
| webp, conversion |
| Get the Original Image From a Data URL (chr/css) | | 230 |
| data-urls |
| Practical SVG (chr/ali) | | 229 |
| svg |
| High Performance SVGs (sar/css) | | 228 |
| svg, performance, tooling, optimization |
| Working With Images in Stylesheets With PostCSS (css) | | 227 |
| css, backgrounds, postcss, examples |
| RespImageLint—Linter for Responsive Images | | 226 |
| bookmarklets, html, responsive-design, linting |
| How PNG Works | | 225 |
| png, compression |
| Why npm Scripts? (css) | | 224 |
| npm, nodejs, conversion, linting, minification, compression, sprites, examples |
| Lazy-Loading Images: How Not to Really Annoy Your Users | | 223 |
| lazy-loading, performance, jquery |
| Blending Modes Demystified (ali) | | 222 |
| design, colors, effects, css |
| A Guide for SVG Support in Email (geo/css) | | 221 |
| guides, svg, support, email |
| SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css) | | 220 |
| guides, smil, svg, animations |
| Decorating the Web With CSS Border Images | | 219 |
| decoration, css, borders |
| The Image Replacement Museum (mar/css) | | 218 |
| image-replacement, techniques, html, css, overviews, link-lists |
| Background Image Shapes (css) | | 217 |
| backgrounds, shapes, css, transforms, clipping, svg |
| How to Make Charts With SVG (fon/css) | | 216 |
| how-tos, visualization, svg, html, javascript |
| Factors Affecting Website Performance | | 215 |
| performance, network, browsers, memory, servers, multimedia |
| Creating Cel Animations With SVG (hey/sma) | | 214 |
| animations, svg, css, sass |
| Preloading Images in Parallel With Promises (kit) | | 213 |
| javascript, promises |
| The Anatomy of Responsive Images (jaf) | | 212 |
| html, responsive-design, support, browsers |
| SVG Lessons I Learned the Hard Way (sar/btc) | | 211 |
| videos, svg, lessons |
| SVG Is for Everybody (chr/btc) | | 210 |
| videos, svg |
| Mastering Image Optimization in WordPress | | 209 |
| wordpress, optimization, performance |
| Performance Tools (fon/css) | | 208 |
| performance, tooling, content-delivery, testing, dev-tools, css, javascript, optimization, link-lists |
| The Art of SVG Filters and Why It Is Awesome (sma) | | 207 |
| svg, filters, css |
| SVG Fallbacks Guide (ame/css) | | 206 |
| guides, svg, graceful-degradation |
| image-dimensions (sin) | | 205 |
| packages, npm |
| HTML5 Image Description Extension (“longdesc”) (cpt/w3c) | | 204 |
| html, standards |
| Responsive Hero Images (gri/clo) | | 203 |
| responsive-design |
| CSS Sprites With Sass and Compass | | 202 |
| css, sprites, sass, compass |
| Why Responsive Images Matter (wil/ali) | | 201 |
| responsive-design |
| Responsive Images in Practice (ali) | | 200 |
| responsive-design, html, css |
| How SVG Fragment Identifiers Work (chr/css) | | 199 |
| svg, css |
| Styling and Animating SVGs With CSS (sar/sma) | | 198 |
| svg, css, animations |
| Probably Don’t Base64 SVG (chr/css) | | 197 |
| svg, data-urls |
| A Guide to SVG Animations (SMIL) (sar/css) | | 196 |
| guides, svg, animations, smil |
| Image Optimization Services (gri/clo) | | 195 |
| performance, optimization, link-lists |
| Don’t Use “<picture>” (Most of the Time) (gri/clo) | | 194 |
| html, responsive-design |
| How a New HTML Element Will Make the Web Faster (ars) | | 193 |
| html, performance, responsive-design |
| Making SVGs Responsive With CSS (sar/cod) | | 192 |
| svg, responsive-design, css |
| Favicons, Touch Icons, Tile Icons, Etc.—Which Do You Need? (css) | | 191 |
| icons, favicons |
| Swapping Out SVG Icons (chr/css) | | 190 |
| svg, icons, css, jquery, techniques |
| How to “Resize” Images With CSS | | 189 |
| css, media-queries, resizing |
| Testing Responsive Images (wil/ali) | | 188 |
| html, responsive-design |
| Picturefill 2.0: Responsive Images and the Perfect Polyfill (sma) | | 187 |
| html, responsive-design, polyfills |
| Tips for Creating Accessible SVG (tin) | | 186 |
| accessibility, svg, tips-and-tricks |
| Dealing With Content Images in Email (chr/css) | | 185 |
| email, html, wordpress, responsive-design |
| “srcset” and “sizes” (eee) | | 184 |
| html, responsive-design |
| A Q&A on the Picture Element (yoa+/ali) | | 183 |
| interviews, html, semantics, responsive-design |
| Shadow DOM | | 182 |
| shadow-dom, dom, svg, angularjs, css, mathml |
| Rethinking Responsive SVG (sma) | | 181 |
| responsive-design, svg, css |
| One Solution to Responsive Images (sma) | | 180 |
| responsive-design, html, php |
| Animating Vectors With SVG (bri/24w) | | 179 |
| svg, animations, javascript |
| Why Responsive Images Is So Hard (chr/css) | | 178 |
| responsive-design, css, html |
| Image Compression for Web Developers (dev) | | 177 |
| compression, performance, link-lists |
| Using Remote Image Files When You Develop Locally (lul) | | 176 |
| processes, drupal, apache, servers |
| WebKit Has Implemented “srcset”, and It’s a Good Thing (wil/sma) | | 175 |
| webkit, html, responsive-design |
| SVG Fallbacks (chr/css) | | 174 |
| svg, support, browsers, png |
| SVG Filters on Text (css) | | 173 |
| svg, filters, effects |
| Images Slowing Down Your Site? Try This One Weird Trick! (aer) | | 172 |
| performance, javascript |
| The Web Designer’s Guide to Image Copyrights | | 171 |
| guides, design, licensing |
| Simple Responsive Images With CSS Background Images (sma) | | 170 |
| responsive-design, backgrounds, css, html |
| Why We Need Responsive Images (tka) | | 169 |
| responsive-design, performance, metrics |
| Replace the Image in an “<img>” With CSS (css) | | 168 |
| css, image-replacement, techniques |
| Media Queries Within SVG (tka) | | 167 |
| svg, css, media-queries, support, browsers |
| Media Queries in SVG Images (gri/clo) | | 166 |
| svg, css, media-queries |
| Using SVG (chr/css) | | 165 |
| svg, css, support, browsers, examples, data-urls, tooling, link-lists |
| Favicon: A Changing Role | | 164 |
| html, favicons |
| Web Technology: 5 Things to Watch in 2013 (sts/cne) | | 163 |
| browsers, standards, performance |
| CSS Masks—How to Use Masking in CSS Now (sch) | | 162 |
| how-tos, css, masking, svg |
| Perfecting Your Website’s Favicon | | 161 |
| favicons, optimization |
| Compressive Images (sco) | | 160 |
| compression, jpeg |
| Better SVG Sprites With Fragment Identifiers (sto) | | 159 |
| svg, sprites |
| Responsive Image Format (yoa) | | 158 |
| responsive-design, jpeg, pjpeg |
| CSS Sprites Revisited (sma) | | 157 |
| css, sprites, techniques |
| On Responsive Images (chr/css) | | 156 |
| html, responsive-design |
| The Need for a Responsive Web Image Format (tel) | | 155 |
| responsive-design, mobile, webp |
| Resolution Independence With SVG (dbu/sma) | | 154 |
| svg, css, responsive-design |
| pngquant (kor) | | 153 |
| websites, tooling, libraries, png, compression |
| Responsive Images and Transparent Content Negotiation in HTTP (kar) | | 152 |
| html, responsive-design, content-negotiation |
| Lightbox2 | | 151 |
| libraries, javascript, effects, lightbox |
| Responsive [Images] (gri/clo) | | 150 |
| responsive-design |
| A Farewell to CSS3 Gradients (mis) | | 149 |
| css, gradients, vendor-extensions, svg |
| How to Optimize Images With HTML5 Canvas (sma) | | 148 |
| how-tos, optimization, canvas, html |
| Infinite All-CSS Scrolling Slideshow (chr/css) | | 147 |
| scrolling, css, effects |
| More Logo Markup Tips (css) | | 146 |
| branding, logos, html, tips-and-tricks |
| Fluid Images (bee/ali) | | 145 |
| layout, css, responsive-design |
| Better Image Management With WordPress (sma) | | 144 |
| wordpress, maintenance, php |
| HTML, “@ width,” and “@ height” (j9t) | | 143 |
| html, multimedia, maintainability |
| Using the CSS “border-image” Property (tab) | | 142 |
| css, borders |
| Understanding “border-image” (css) | | 141 |
| css, borders |
| Transparency in Web Design (chr/css) | | 140 |
| design, transparency, css, png |
| Vital Tips for Effective Logo Design (sma) | | 139 |
| design, logos, tips-and-tricks |
| Perfect Full Page Background Image (chr/css) | | 138 |
| backgrounds, css, filters, jquery, techniques |
| Lightbox 2: Simple JavaScript Image Gallery | | 137 |
| videos, javascript, lightbox |
| Why IE9 Will Support SVG (fyr) | | 136 |
| internet-explorer, microsoft, browsers, svg, support |
| How to Optimize PNG (sma) | | 135 |
| how-tos, png, optimization |
| Clever JPG Optimization Techniques (sma) | | 134 |
| jpeg, optimization, techniques |
| IE Fix: Bicubic Scaling for Images (chr/css) | | 133 |
| internet-explorer, microsoft, browsers, scaling, css |
| The Tiniest GIF Ever | | 132 |
| gif, php |
| WebFormElements.com (tel) | | 131 |
| forms, browsers, screenshots |
| 88 Outstanding Favicons and 6 Resources to Help You Create Your Own | | 130 |
| favicons, examples, link-lists |
| SVG Is the Future of Application Development | | 129 |
| svg, web-apps, outlooks |
| SVG Test Page (fyr) | | 128 |
| svg, testing |
| SVG Filter Performance Improvements in Gecko 1.9.1 | | 127 |
| gecko, browser-engines, browsers, svg, filters |
| SVG Paint Servers for HTML | | 126 |
| html, svg, css, backgrounds |
| Google Changes Favicon, Challenges You to Do Better | | 125 |
| google, favicons |
| A Validator Is Not an Accessibility Evaluation Tool? (w3c) | | 124 |
| discussions, html, conformance, accessibility, alt-text, tooling |
| Making “IE6-Friendly” PNG8 Images (mis) | | 123 |
| browsers, microsoft, internet-explorer, png |
| Using CSS for Image Borders (css) | | 122 |
| css, borders |
| RDFa and HTML Imagemap (kar/w3c) | | 121 |
| rdf, html |
| Misconceptions About PNG (chr/css) | | 120 |
| png |
| CSS Sprites: What They Are, Why They’re Cool, and How to Use Them (chr/css) | | 119 |
| how-tos, css, sprites |
| PNG Transparency for Internet Explorer (IE6 and Beyond) (tel) | | 118 |
| png, transparency, browsers, microsoft, internet-explorer, css, hacks |
| Color Sampling and SVG Gradients (bur) | | 117 |
| colors, svg, gradients |
| Getting Started With Photoshop: Saving for the Web | | 116 |
| introductions, adobe, photoshop, gif, jpeg, png |
| Reviving Anorexic Web Writing (ali) | | 115 |
| writing, alt-text, accessibility |
| Icon Design: Sizing (dav) | | 114 |
| icons, design |
| Animated GIF Not Animating? (pau) | | 113 |
| gif, javascript, html |
| W3C Sets Standard for Technical Illustrations on the Web | | 112 |
| w3c, standards |
| Which Image Format Is Best (jus) | | 111 |
| gif, jpeg, png |
| My PNG Image Replacement Method (tel) | | 110 |
| image-replacement, techniques, png |
| Semantic Image Use (jch) | | 109 |
| html, alt-text, accessibility, semantics |
| Accessible Alternate Content (lac) | | 108 |
| accessibility, content |
| Lightbox JS | | 107 |
| libraries, javascript, effects, lightbox |
| Ten Steps to a More User Friendly Website | | 106 |
| flash, performance, compression, link-rot, html, conformance, browsers, support, navigation, readability, quality |
| JPG Quality (dav) | | 105 |
| jpeg, quality, compression |
| Alt Attribute (Alt Tag, Alt Tooltip) (ann) | | 104 |
| html, attributes, alt-text, accessibility |
| From an Alt Point of View (the) | | 103 |
| accessibility, usability, legal, alt-text |
| New Site Technology for Visually Impaired Surfers (zdn) | | 102 |
| css, accessibility, alt-text |
| GIF Hacking (dav) | | 101 |
| gif, png, dithering, compression |
| I Laugh at Your Spacer Gifs (jon) | | 100 |
| html, tables, gif, css, refactoring |
| CSS Sprites: Image Slicing’s Kiss of Death (dav/ali) | | 99 |
| css, sprites, performance |
| CSS Drop Shadows (ali) | | 98 |
| css, shadows, effects |
| Night of the Image Map (ali) | | 97 |
| css, techniques |
| Portable Network Graphics (PNG) Specification (Second Edition) (w3c) | | 96 |
| png, standards |
| Sliding Doors of CSS II (ali) | | 95 |
| css, techniques |
| Sliding Doors of CSS (ali) | | 94 |
| css, techniques |
| An SVG Case Study: Integrated, Dynamic Avalanche Forecasting | | 93 |
| perl, html, sql, databases, svg, case-studies |
| Graphics Standard Heads to Print (cne) | | 92 |
| w3c, standards, svg, print |
| Better Image Rollovers (sim) | | 91 |
| effects, javascript |
| SVG: Modularized and Mobile | | 90 |
| svg, html, animations |
| SWF vs. SVG—Which Should You Choose? | | 89 |
| flash, svg, comparisons |
| Animated GIFs Made Easy | | 88 |
| gif |
| Icons to Go | | 87 |
| icons, windows |
| A Milestone for SVG | | 86 |
| svg, w3c |
| A New Face for the Web (zdn) | | 85 |
| svg, flash |
| Bitmaps and Vectors: Web Graphics Evolve (zdn) | | 84 |
| comparisons, gif, jpeg, png |
| The Single Pixel GIF | | 83 |
| html, gif, techniques |
| Basic Image Insertion | | 82 |
| html |
| Unified Web Site Accessibility Guidelines (w3c) | | 81 |
| guidelines, accessibility, html, content, lists, tables, links, multimedia, design, frames, forms |
| Art and the Zen of Web Sites | | 80 |
| web, design, colors, tables, frames, java, javascript, monetization, testing, maintenance, tips-and-tricks |
| AVIF and WebP Settings Comparer | | 79 |
| tools, exploration, avif, webp, comparisons |
| Aspect Ratio Calculator (seg) | | 78 |
| tools, exploration, math |
| Image Accessibility Analyzer | | 77 |
| tools, analysis, accessibility |
| Wave-Style SVG Generator | | 76 |
| tools, exploration, svg, effects, code-generation |
| Tilt-Shift Photo Generator | | 75 |
| tools, exploration, effects |
| SVG URL Encoder | | 74 |
| tools, exploration, svg, urls, code-generation |
| SVG Shape Generator | | 73 |
| tools, exploration, svg |
| SVG Optimizer (Jake Archibald) (jaf) | | 72 |
| tools, exploration, svg, optimization |
| SVG Optimizer (Daryll Doyle) | | 71 |
| tools, exploration, svg, optimization |
| SVG Editor | | 70 |
| tools, exploration, svg |
| Random Favicon Generator | | 69 |
| tools, exploration, favicons, randomness |
| Progressive JPEG Generator | | 68 |
| tools, exploration, jpeg, pjpeg |
| Profile Picture Generator | | 67 |
| tools, exploration, social-media |
| Placeholder Generator | | 66 |
| tools, exploration, placeholders |
| Photo Enlarger (Zygomatic) | | 65 |
| tools, exploration |
| Photo Enlarger (Ojoy) | | 64 |
| tools, exploration |
| Photo Editor | | 63 |
| tools, exploration |
| Photo Data Remover | | 62 |
| tools, exploration, metadata |
| Image Resizer and Editor (resizemyimg.com) | | 61 |
| tools, exploration, effects, resizing |
| Image Resizer and Editor (PicResize) | | 60 |
| tools, exploration, effects, resizing |
| Image Compressors | | 59 |
| tools, exploration, compression, performance |
| Image Compressor (WebUtils) | | 58 |
| tools, exploration, compression, performance |
| Image Compressor (Compressor.io) | | 57 |
| tools, exploration, compression, performance |
| Image Cleaner | | 56 |
| tools, exploration |
| Image Background Remover (remove.bg) | | 55 |
| tools, exploration, backgrounds |
| Image Background Remover (PhotoRoom) | | 54 |
| tools, exploration, backgrounds |
| Image Art Generator | | 53 |
| tools, exploration, art |
| Icon Generator (cod) | | 52 |
| tools, exploration, icons |
| Icon Font, SVG, PDF, and PNG Generator | | 51 |
| tools, exploration, code-generation, fonts, icon-fonts, svg, pdf, png |
| GIF Text Editor | | 50 |
| tools, exploration, gif |
| GIF Splitter | | 49 |
| tools, exploration, gif |
| GIF Resizer | | 48 |
| tools, exploration, gif, resizing |
| Flat Design Icon Generator | | 47 |
| tools, exploration, icons, flat-design |
| Animated GIF Generator | | 46 |
| tools, exploration, gif |
| Raster to Vector Image Converter | | 45 |
| tools, exploration, conversion |
| Raster Image to SVG Converter (tom/dev) | | 44 |
| tools, exploration, conversion, svg |
| Image to Text Converter | | 43 |
| tools, exploration, conversion |
| Image Converters | | 42 |
| tools, exploration, conversion |
| Image Converter (FreeConvert.com) | | 41 |
| tools, exploration, conversion |
| Image Color Determiner | | 40 |
| tools, exploration, colors |
| Screenshot Generator | | 39 |
| tools, exploration, testing, browsers, screenshots |
| Screenshot Generator for Windows and Android | | 38 |
| tools, exploration, testing, browsers, screenshots, microsoft, windows, mobile |
| Progressive JPEG Checker | | 37 |
| tools, analysis, jpeg, pjpeg |
| Favicon Checker (Favicon Kit) | | 36 |
| tools, analysis, favicons |
| Favicon Checker (Favicon Generator) | | 35 |
| tools, analysis, favicons |
| Image Performance Analyzer | | 34 |
| tools, analysis, performance |
| Link and Image Checker | | 33 |
| tools, analysis, links, link-rot, user-experience |
