| When to Use “img,” “img@ srcset,” and “picture” and “source” (j9t) | | 214 |
| html |
| Image Optimization in WordPress (ade/sma) | | 213 |
| wordpress, performance, optimization |
| Understanding Image Compression: Tooling and Context (j9t) | | 212 |
| performance, compression, tooling |
| A Crime Called Favicon (j9t) | | 211 |
| favicons, maintainability |
| A Practical Guide to SVG and Design Tools (mik/sma) | | 210 |
| guides, svg, sketch, figma, adobe, tooling, design |
| SVG Circle Decomposition to Paths (sma) | | 209 |
| svg, animations |
| Improve Animated GIF Performance With HTML5 Video (ayi/sma) | | 208 |
| gif, multimedia, performance |
| Responsive Images (wil/ali) | | 207 |
| html, css, responsive-design |
| Icon Fonts vs. SVGs—Which One Should You Use in 2018? (key) | | 206 |
| fonts, icon-fonts, svg |
| Converting Images to WebP (mal/sma) | | 205 |
| conversion, webp, sketch, photoshop, adobe |
| Image Alt Text vs. Title Text vs. File Names: What’s the Difference? (bri/sea) | | 204 |
| seo, alt-text, accessibility, naming, microcontent, comparisons |
| Improving Performance Perception: On-Demand Image Resizing (bit/sit) | | 203 |
| performance, optimization, resizing, html |
| Designing for Accessibility and Inclusion (sma) | | 202 |
| design, accessibility, dei, animations, colors, typography, multimedia, keyboard-navigation, layout, readability |
| The Front-End Checklist (the) | | 201 |
| websites, checklists, html, css, javascript, accessibility, performance, seo |
| When Large Isn’t Large Enough: Designing With Hero Images (101/sma) | | 200 |
| design |
| GIF, PNG, JPG, or SVG: Which One to Use? (sit) | | 199 |
| jpeg, png, gif, svg, webp, comparisons |
| Let the Content Delivery Network Optimize Your Images (jon/sma) | | 198 |
| content-delivery, optimization, performance |
| What Is the Right Image Format for Your Website? (ant/sit) | | 197 |
| compression, jpeg, gif, png, svg, webp |
| Guetzli, Google’s New JPEG Encoder (tel) | | 196 |
| performance, jpeg, compression, tooling |
| Align SVG Icons to Text and Say Goodbye to Font Icons (ell/pro) | | 195 |
| svg, icons, icon-fonts, fonts, css, design, alignment |
| A Compendium of SVG Information (chr/css) | | 194 |
| overviews, svg, link-lists |
| The Joy of Optimizing (una/btc) | | 193 |
| videos, performance, optimization |
| SVG and Media Queries (jaf) | | 192 |
| svg, css, media-queries, canvas, support, browsers |
| WordPress SVG Support: How to Enable SVGs in WordPress (src/sit) | | 191 |
| how-tos, wordpress, svg |
| Accessible SVGs (hm/css) | | 190 |
| svg, accessibility, examples |
| Practical SVG (chr/ali) | | 189 |
| svg |
| RespImageLint—Linter for Responsive Images (aus) | | 188 |
| bookmarklets, html, responsive-design, linting |
| How PNG Works (duh) | | 187 |
| png, compression |
| Lazy-Loading Images: How Not to Really Annoy Your Users (sit) | | 186 |
| lazy-loading, performance, jquery |
| Blending Modes Demystified (rev/ali) | | 185 |
| design, colors, effects, css |
| Decorating the Web With CSS Border Images (ant/sit) | | 184 |
| decoration, css, borders |
| Factors Affecting Website Performance | | 183 |
| performance, network, browsers, memory, servers, multimedia |
| Creating Cel Animations With SVG (hey/sma) | | 182 |
| animations, svg, css, sass |
| Preloading Images in Parallel With Promises (kit/sit) | | 181 |
| javascript, promises |
| The Anatomy of Responsive Images (jaf) | | 180 |
| html, responsive-design, support, browsers |
| SVG Is for Everybody (chr/btc) | | 179 |
| videos, svg |
| SVG Lessons I Learned the Hard Way (sar/btc) | | 178 |
| videos, svg, lessons |
| Mastering Image Optimization in WordPress (sit) | | 177 |
| wordpress, optimization, performance |
| image-dimensions (sin) | | 176 |
| packages, npm |
| HTML5 Image Description Extension (“longdesc”) (cha+/w3c) | | 175 |
| html, standards |
| Responsive Hero Images (gri/clo) | | 174 |
| responsive-design |
| CSS Sprites With Sass and Compass (sit) | | 173 |
| css, sprites, sass, compass |
| Why Responsive Images Matter (wil/ali) | | 172 |
| responsive-design |
| Responsive Images in Practice (etp/ali) | | 171 |
| responsive-design, html, css |
| Styling and Animating SVGs With CSS (sar/sma) | | 170 |
| svg, css, animations |
| Image Optimization Services (gri/clo) | | 169 |
| performance, optimization, link-lists |
| Don’t Use “<picture>” (Most of the Time) (gri/clo) | | 168 |
| html, responsive-design |
| How a New HTML Element Will Make the Web Faster (ars) | | 167 |
| html, performance, responsive-design |
| Making SVGs Responsive With CSS (sar/cod) | | 166 |
| svg, responsive-design, css |
| How to “Resize” Images With CSS (ada/sit) | | 165 |
| css, media-queries, resizing |
| Testing Responsive Images (wil/ali) | | 164 |
| html, responsive-design |
| Picturefill 2.0: Responsive Images and the Perfect Polyfill (sma) | | 163 |
| html, responsive-design, polyfills |
| Tips for Creating Accessible SVG (tin/sit) | | 162 |
| accessibility, svg, tips-and-tricks |
| “srcset” and “sizes” (eee) | | 161 |
| html, responsive-design |
| A Q&A on the Picture Element (yoa+/ali) | | 160 |
| interviews, html, semantics, responsive-design |
| Rethinking Responsive SVG (puk/sma) | | 159 |
| responsive-design, svg, css |
| One Solution to Responsive Images (gav/sma) | | 158 |
| responsive-design, html, php |
| Animating Vectors With SVG (bri/24w) | | 157 |
| svg, animations, javascript |
| Image Compression for Web Developers (duh/dev) | | 156 |
| compression, performance, link-lists |
| WebKit Has Implemented “srcset”, and It’s a Good Thing (wil/sma) | | 155 |
| webkit, html, responsive-design |
| Images Slowing Down Your Site? Try This One Weird Trick! (aer) | | 154 |
| performance, javascript |
| The Web Designer’s Guide to Image Copyrights (joh/sit) | | 153 |
| guides, design, licensing |
| Simple Responsive Images With CSS Background Images (sma) | | 152 |
| responsive-design, backgrounds, css, html |
| Why We Need Responsive Images (tka) | | 151 |
| responsive-design, performance, metrics |
| Media Queries Within SVG (tka) | | 150 |
| svg, css, media-queries, support, browsers |
| Media Queries in SVG Images (gri/clo) | | 149 |
| svg, css, media-queries |
| Favicon: A Changing Role (faz/sit) | | 148 |
| html, favicons |
| Web Technology: 5 Things to Watch in 2013 (sts/cne) | | 147 |
| browsers, standards, performance |
| CSS Masks—How to Use Masking in CSS Now (sch) | | 146 |
| how-tos, css, masking, svg |
| Perfecting Your Website’s Favicon (sit) | | 145 |
| favicons, optimization |
| Compressive Images (sco/fil) | | 144 |
| compression, jpeg |
| Responsive Image Format (yoa) | | 143 |
| responsive-design, jpeg, pjpeg |
| CSS Sprites Revisited (ond/sma) | | 142 |
| css, sprites, techniques |
| The Need for a Responsive Web Image Format (tel) | | 141 |
| responsive-design, mobile, webp |
| Resolution Independence With SVG (dbu/sma) | | 140 |
| svg, css, responsive-design |
| pngquant (kor) | | 139 |
| websites, tooling, libraries, png, compression |
| Responsive Images and Transparent Content Negotiation in HTTP (kar) | | 138 |
| html, responsive-design, content-negotiation |
| Lightbox2 (lok) | | 137 |
| libraries, javascript, effects, lightbox |
| Responsive [Images] (gri/clo) | | 136 |
| responsive-design |
| A Farewell to CSS3 Gradients (ale/sit) | | 135 |
| css, gradients, vendor-extensions, svg |
| How to Optimize Images With HTML5 Canvas (chi/sma) | | 134 |
| how-tos, optimization, canvas, html |
| More Logo Markup Tips (css) | | 133 |
| branding, logos, html, tips-and-tricks |
| Fluid Images (bee/ali) | | 132 |
| layout, css, responsive-design |
| Better Image Management With WordPress (dan/sma) | | 131 |
| wordpress, maintenance, php |
| HTML, “@ width,” and “@ height” (j9t) | | 130 |
| html, multimedia, maintainability |
| Using the CSS “border-image” Property (tab) | | 129 |
| css, borders |
| Vital Tips for Effective Logo Design (jus/sma) | | 128 |
| design, logos, tips-and-tricks |
| Lightbox 2: Simple JavaScript Image Gallery (tut) | | 127 |
| videos, javascript, lightbox |
| Why IE9 Will Support SVG (fyr) | | 126 |
| internet-explorer, microsoft, browsers, svg, support |
| How to Optimize PNG (chi/sma) | | 125 |
| how-tos, png, optimization |
| Clever JPG Optimization Techniques (chi/sma) | | 124 |
| jpeg, optimization, techniques |
| 88 Outstanding Favicons and 6 Resources to Help You Create Your Own (sit) | | 123 |
| favicons, examples, link-lists |
| SVG Is the Future of Application Development (sit) | | 122 |
| svg, web-apps, outlooks |
| SVG Test Page (fyr) | | 121 |
| svg, testing |
| SVG Filter Performance Improvements in Gecko 1.9.1 | | 120 |
| gecko, browser-engines, browsers, svg |
| SVG Paint Servers for HTML | | 119 |
| html, svg, css, backgrounds |
| Google Changes Favicon, Challenges You to Do Better (mat/sit) | | 118 |
| google, favicons |
| A Validator Is Not an Accessibility Evaluation Tool? (w3c) | | 117 |
| discussions, html, conformance, accessibility, alt-text, tooling |
| Making “IE6-Friendly” PNG8 Images (ale/sit) | | 116 |
| browsers, microsoft, internet-explorer, png |
| RDFa and HTML Imagemap (kar/w3c) | | 115 |
| rdf, html |
| PNG Transparency for Internet Explorer (IE6 and Beyond) (tel) | | 114 |
| png, transparency, browsers, microsoft, internet-explorer, css, hacks |
| Color Sampling and SVG Gradients (bur) | | 113 |
| colors, svg, gradients |
| Getting Started With Photoshop: Saving for the Web (cor/sit) | | 112 |
| introductions, adobe, photoshop, gif, jpeg, png |
| Reviving Anorexic Web Writing (amb/ali) | | 111 |
| writing, alt-text, accessibility |
| Icon Design: Sizing (dav) | | 110 |
| icons, design |
| Animated GIF Not Animating? (pau) | | 109 |
| gif, javascript, html |
| W3C Sets Standard for Technical Illustrations on the Web (pcp) | | 108 |
| w3c, standards |
| Which Image Format Is Best (jus) | | 107 |
| gif, jpeg, png |
| My PNG Image Replacement Method (tel) | | 106 |
| image-replacement, techniques, png |
| Semantic Image Use (jch) | | 105 |
| html, alt-text, accessibility, semantics |
| Accessible Alternate Content (lac) | | 104 |
| accessibility, content |
| Lightbox JS (lok) | | 103 |
| libraries, javascript, effects, lightbox |
| Ten Steps to a More User Friendly Website (web) | | 102 |
| flash, performance, compression, link-rot, html, conformance, browsers, support, navigation, readability, quality |
| JPG Quality (dav) | | 101 |
| jpeg, quality, compression |
| Alt Attribute (Alt Tag, Alt Tooltip) (ann) | | 100 |
| html, attributes, alt-text, accessibility |
| From an Alt Point of View (the) | | 99 |
| accessibility, usability, legal, alt-text |
| New Site Technology for Visually Impaired Surfers (zdn) | | 98 |
| css, accessibility, alt-text |
| GIF Hacking (dav) | | 97 |
| gif, png, dithering, compression |
| I Laugh at Your Spacer Gifs (jon) | | 96 |
| html, tables, gif, css, refactoring |
| CSS Sprites: Image Slicing’s Kiss of Death (dav/ali) | | 95 |
| css, sprites, performance |
| CSS Drop Shadows (ove/ali) | | 94 |
| css, shadows, effects |
| Night of the Image Map (ali) | | 93 |
| css, techniques |
| Portable Network Graphics (PNG) Specification (Second Edition) (w3c) | | 92 |
| png, standards |
| Sliding Doors of CSS II (sto/ali) | | 91 |
| css, techniques |
| Sliding Doors of CSS (sto/ali) | | 90 |
| css, techniques |
| An SVG Case Study: Integrated, Dynamic Avalanche Forecasting | | 89 |
| perl, html, sql, databases, svg, case-studies |
| Graphics Standard Heads to Print (cne) | | 88 |
| w3c, standards, svg, print |
| Better Image Rollovers (sim) | | 87 |
| effects, javascript |
| SVG: Modularized and Mobile | | 86 |
| svg, html, animations |
| SWF vs. SVG—Which Should You Choose? (sit) | | 85 |
| flash, svg, comparisons |
| Animated GIFs Made Easy (sit) | | 84 |
| gif |
| Icons to Go (ibm) | | 83 |
| icons, windows |
| A Milestone for SVG | | 82 |
| svg, w3c |
| A New Face for the Web (zdn) | | 81 |
| svg, flash |
| Bitmaps and Vectors: Web Graphics Evolve (zdn) | | 80 |
| comparisons, gif, jpeg, png |
| The Single Pixel GIF | | 79 |
| html, gif, techniques |
| Basic Image Insertion | | 78 |
| html |
| Mastodon Screenshot Generator (rai) | | 77 |
| tools, exploration, screenshots, mastodon, social-media |
| Gradient Image Generator | | 76 |
| tools, exploration, gradients, png, code-generation, css |
| Image Breakpoints Generator (clo) | | 75 |
| tools, exploration, code-generation, responsive-design, html |
| C64-Style Image Converter (mic) | | 74 |
| tools, exploration, conversion |
| CSS Clip Path Generator (ben) | | 73 |
| tools, exploration, code-generation, css, backgrounds |
| Content Credentials Checker (con) | | 72 |
| tools, exploration, ai, content, multimedia |
| Alt Text Decision Helper (sco) | | 71 |
| tools, exploration, accessibility, alt-text, html |
| Image Converter (Canva) (can) | | 70 |
| tools, exploration, conversion |
| Confetti Generator (mag) | | 69 |
| tools, exploration, png, jpeg, svg, code-generation, css |
| JPEG to SVG Converter (ado) | | 68 |
| tools, exploration, conversion, jpeg, svg |
| Logo Generator (Squarespace) (squ) | | 67 |
| tools, exploration, logos |
| Logo Generator (Looka) (loo) | | 66 |
| tools, exploration, logos |
| Line Drawing Generator (jav) | | 65 |
| tools, exploration, effects |
| JPEG Distorter (sno) | | 64 |
| tools, exploration, effects, jpeg |
| Image Rasterizer | | 63 |
| tools, exploration, effects |
| Image Quality Enhancer (let) | | 62 |
| tools, exploration, quality |
| Image Cropper (sma) | | 61 |
| tools, exploration |
| Favicon Generators (joh) | | 60 |
| tools, exploration, favicons |
| Favicon Generator (web) | | 59 |
| tools, exploration, favicons |
| Dummy Image Generator (kin) | | 58 |
| tools, exploration, placeholders |
| Dither Effect Generator | | 57 |
| tools, exploration, dithering, effects |
| Decorative Image Generator | | 56 |
| tools, exploration, decoration |
| Code Screenshot Generator (Chalk.ist) (ide) | | 55 |
| tools, exploration, screenshots |
| Code Screenshot Generator (Carbon) (car) | | 54 |
| tools, exploration, screenshots |
| C64-Style Logo Generator (cod) | | 53 |
| tools, exploration, logos |
| Brilliant Button Generator | | 52 |
| tools, exploration |
| Black and White Photo Colorizer (ImageColorizer) (ico) | | 51 |
| tools, exploration, colors |
| Black and White Photo Colorizer (DeepAI) (deo) | | 50 |
| tools, exploration, colors |
| Background Pattern Generator (Patternify) (sac) | | 49 |
| tools, exploration, backgrounds |
| Background Pattern Generator (fffuel) (fff) | | 48 |
| tools, exploration, backgrounds |
| Background Pattern Generator (DOODAD) | | 47 |
| tools, exploration, backgrounds |
| Background Image Generator (qro) | | 46 |
| tools, exploration, backgrounds |
| AVIF and WebP Settings Comparer (cra) | | 45 |
| tools, exploration, avif, webp, comparisons |
| Aspect Ratio Calculator (seg) | | 44 |
| tools, exploration, math |
| Image Accessibility Analyzer (gez) | | 43 |
| tools, analysis, accessibility |
| Wave-Style SVG Generator (zcr) | | 42 |
| tools, exploration, svg, effects, code-generation |
| Tilt-Shift Photo Generator (til) | | 41 |
| tools, exploration, effects |
| SVG URL Encoder (yok) | | 40 |
| tools, exploration, svg, urls, code-generation |
| SVG Shape Generator (fff) | | 39 |
| tools, exploration, svg |
| SVG Optimizer (Jake Archibald) (jaf) | | 38 |
| tools, exploration, svg, optimization |
| SVG Optimizer (Daryll Doyle) (ens) | | 37 |
| tools, exploration, svg, optimization |
| SVG Editor (ben) | | 36 |
| tools, exploration, svg |
| Random Favicon Generator (to) | | 35 |
| tools, exploration, favicons, randomness |
| Progressive JPEG Generator | | 34 |
| tools, exploration, jpeg, pjpeg |
| Profile Picture Generator (pfp) | | 33 |
| tools, exploration, social-media |
| Placeholder Generator (pla) | | 32 |
| tools, exploration, placeholders |
| Photo Enlarger (Zygomatic) (zyg) | | 31 |
| tools, exploration |
| Photo Enlarger (Ojoy) | | 30 |
| tools, exploration |
| Photo Editor (can) | | 29 |
| tools, exploration |
| Photo Data Remover | | 28 |
| tools, exploration, metadata |
| Image Resizer and Editor (resizemyimg.com) | | 27 |
| tools, exploration, effects, resizing |
| Image Resizer and Editor (PicResize) (pic) | | 26 |
| tools, exploration, effects, resizing |
| Image Compressors (mcs) | | 25 |
| tools, exploration, compression, performance |
| Image Compressor (WebUtils) | | 24 |
| tools, exploration, compression, performance |
| Image Compressor (Compressor.io) (com) | | 23 |
| tools, exploration, compression, performance |
| Image Cleaner | | 22 |
| tools, exploration |
| Image Background Remover (remove.bg) (rem) | | 21 |
| tools, exploration, backgrounds |
| Image Background Remover (PhotoRoom) (pho) | | 20 |
| tools, exploration, backgrounds |
| Image Art Generator (hug) | | 19 |
| tools, exploration, art |
| Icon Generator (cod) | | 18 |
| tools, exploration, icons |
| Icon Font, SVG, PDF, and PNG Generator | | 17 |
| tools, exploration, code-generation, fonts, icon-fonts, svg, pdf, png |
| GIF Text Editor (ezg) | | 16 |
| tools, exploration, gif |
| GIF Splitter (ezg) | | 15 |
| tools, exploration, gif |
| GIF Resizer (ezg) | | 14 |
| tools, exploration, gif, resizing |
| Flat Design Icon Generator (rub) | | 13 |
| tools, exploration, icons, flat-design |
| Animated GIF Generator (img) | | 12 |
| tools, exploration, gif |
| Raster to Vector Image Converter | | 11 |
| tools, exploration, conversion |
| Raster Image to SVG Converter (tom/dev) | | 10 |
| tools, exploration, conversion, svg |
| Image to Text Converter (gra) | | 9 |
| tools, exploration, conversion |
| Image Converters (onl) | | 8 |
| tools, exploration, conversion |
| Image Converter (FreeConvert.com) | | 7 |
| tools, exploration, conversion |
| Image Color Determiner (app) | | 6 |
| tools, exploration, colors |
| Progressive JPEG Checker | | 5 |
| tools, analysis, jpeg, pjpeg |
| Favicon Checker (Favicon Kit) (and) | | 4 |
| tools, analysis, favicons |
| Favicon Checker (Favicon Generator) (rea) | | 3 |
| tools, analysis, favicons |
| Image Performance Analyzer (clo) | | 2 |
| tools, analysis, performance |
| Link and Image Checker (nin) | | 1 |
| tools, analysis, links, link-rot, user-experience |
