Frontend Dogma

“images” Archive

  1. The Picture-Superiority Effect: Harness the Power of Visuals · · ,
  2. Images as the First Thing in a Button or Link · · , , ,
  3. Sliding 3D Image Frames in CSS · · ,
  4. Faster Websites With the “picture” Element · · ,
  5. How to Think About HTML Responsive Images · · ,
  6. “aspect-ratio” Gotcha · ·
  7. Thoughts on Embedding Alternative Text Metadata into Images · · ,
  8. AVIF Is the Future of Web Images · · , ,
  9. The 88×31 Archive · · ,
  10. Everything You Need to Know About Image Formats in 2024 · · , , , , ,
  11. How to Favicon in 2024: Six Files That Fit Most Needs · · ,
  12. The World’s Smallest PNG · · ,
  13. AI Art Is the New Stock Image · · ,
  14. Everything You Need to Know About Responsive Logo Design · · , ,
  15. Border Images in CSS: A Key Focus Area for Interop 2023 · · , , , ,
  16. Practical “img” Element Defaults · · ,
  17. AI for Web Devs: AI Image Generation · · , ,
  18. “sizes="auto"” Pretty Much Requires “width” and “height” Attributes · · ,
  19. Text With Media Background: Practical Solutions · · , ,
  20. Stop Using AI-Generated Images · ·
  21. image-dimensions · · ,
  22. Some Sensible Defaults for Your “img” Elements · ·
  23. Which Is the Best Image Format for Your Website? · · , , , , ,
  24. The Ultimate Low-Quality Image Placeholder Technique · · ,
  25. How Mastodon Handles Images and Web Previews · · , , , ,
  26. Stop Lazy Loading Product and Hero Images · · ,
  27. How to Make Charts and Graphs More Accessible · · , ,
  28. Designing Accessible Text over Images: Best Practices, Techniques, and Resources II · · , , ,
  29. Designing Accessible Text over Images: Best Practices, Techniques, and Resources · · , , ,
  30. Using Imagery in Visual Design · · ,
  31. How to Use CSS “object-fit” and “object-position” · · ,
  32. JPEG XL: How It Started, How It’s Going · · ,
  33. Shines, Perspective, and Rotations: Fancy CSS 3D Effects for Images · · ,
  34. What Does the Image “decoding” Attribute Actually Do? · · ,
  35. How to Add a CSS Reveal Animation to Your Images · · , ,
  36. Is There a Viable Animated GIF Alternative Yet or What? · ·
  37. Deploying AVIF for More Responsive Websites · · ,
  38. Dithering · ·
  39. The Image Sorting Experiment · · , ,
  40. What Makes a Good Screenshot? · ·
  41. The Ultimate Guide to Image Optimisation · · , , ,
  42. Change Favicon on Switching Browser Tabs in JavaScript · · ,
  43. On Container Queries, Responsive Images, and JPEG-XL · · , , ,
  44. Dithering Images With React/JavaScript · · , ,
  45. Using Focal Points, Aspect Ratio, and Object-Fit to Crop Images Correctly · ·
  46. You Kinda Want an Orange Favicon · · , ,
  47. How to Favicon in 2023: Six Files That Fit Most Needs · · ,
  48. Learn Images · · , , , , , ,
  49. The Modern Way of Serving Images · · ,
  50. Optimizing the Image Element LCP · · ,
  51. Stock Photos of People With Disabilities · · ,
  52. Mini-Guide to Add an Image · ·
  53. CSS Infinite Slider Flipping Through Polaroid Images · · ,
  54. Enough With the Pointless Images · · ,
  55. Reduce Image Sizes by Removing Metadata · · , ,
  56. CSS Infinite and Circular Rotating Image Slider · · ,
  57. Handling Images With Inconsistent Height in CSS · ·
  58. What Image Format Should You Use in Your Next Project? ·
  59. A Guide to Image Optimization on Jamstack Sites · · , , , , ,
  60. 6 Steps to Improve HTML Images for Users and Developers · · , ,
  61. GIFs Without the .gif: The Most Performant Image and Video Options Right Now · · , , ,
  62. Media · · , ,
  63. Converting PNG Images to WebP Using PHP · · , , ,
  64. How Your Favourite UI Libraries Manage Their Icons · · ,
  65. Research Insight: Accessibility of Images · · , ,
  66. Powerful Image Optimization Tools · · , , ,
  67. Imagemin Guard · · , , , , , , , ,
  68. Best Practices for Images · · ,
  69. Icon-Only Links Fail WCAG · · , , ,
  70. Magical SVG Techniques · · ,
  71. Image Borders in CSS · · ,
  72. Picture Perfect Images With the Modern “<img>” Element · · , ,
  73. 15 Useful Placeholder Tools for Designers and Developers · · , , , ,
  74. Favi-Gone: 6 Reasons Why Your Favicon Disappeared from the Google Search Results · · , ,
  75. Building an Adaptive Favicon · ·
  76. How to Favicon in 2022: Six Files That Fit Most Needs · · ,
  77. Optimize Your PNGs With Oxipng and pre-commit · · , , ,
  78. Big Images, Blazingly Fast · · ,
  79. Create an Open Graph Image Generator With Node.js · · ,
  80. Social Media Image Sizes 2022: Cheat Sheet for Every Network · · ,
  81. Alt Tag Emptiness · · , , ,
  82. Responsive Image Gallery With Animated Captions · · , , ,
  83. Image Magnifier Using Only One Line of CSS · ·
  84. The Many Methods for Using SVG Icons · · ,
  85. Image Display Elements · · ,
  86. Why Your Website Should Not Use Dithered Images · · , ,
  87. We Analyzed 425,909 Favicons · ·
  88. Beginner’s Guide to Responsive Images: How to Get Them Right · · , ,
  89. Optimizing Images on the Web · ·
  90. Blowing Up HTML Size With Responsive Images · · , ,
  91. One Favicon to Rule Them All · · ,
  92. Decoding AVIF: Deep Dive With Cats and imgproxy · ·
  93. Exploring the CSS Paint API: Image Fragmentation Effect · · , ,
  94. Pixelart and the “image-rendering” Paradox · · ,
  95. Image Descriptions: A Human Technique That Robots Can’t Grasp · ·
  96. A Framework for Building Open Graph Images · ·
  97. OMG, SVG Favicons FTW! · · , ,
  98. Serving Sharp Images to High Density Screens · ·
  99. Half the Size of Images by Optimising for High Density Displays · · ,
  100. Using AVIF to Compress Images on Your Site · · , ,
  101. How to Build an Image Comparison Slider · · ,
  102. Content-Aware Image Resizing in JavaScript · ·
  103. Web Developer’s Guide to AVIF Images · · ,
  104. Content Credentials Checker · , , , ,
  105. Link and Image Checker · , , , ,
  106. Progressive JPEG Generator · , ,
  107. JPEG Distorter · , , ,
  108. Confetti Generator · , , , , , ,
  109. JPEG to SVG Converter · , , , ,
  110. Progressive JPEG Checker · , ,
  111. Dither Effect Generator · , , ,
  112. Image Converter (Canva) · , ,
  113. Image Converter (FreeConvert.com) · , ,
  114. Favicon Checker (Favicon Kit) · , ,
  115. Favicon Checker (Favicon Generator) · , ,
  116. SVG URL Encoder · , , , ,
  117. Image Compressors · , , ,
  118. Image Compressor (WebUtils) · , , ,
  119. Image Compressor (Compressor.io) · , , ,
  120. Placeholder Generator · , ,
  121. Random Favicon Generator · , , ,
  122. Background Pattern Generator (Patternify) · , ,
  123. Animated GIF Generator · , ,
  124. Favicon Generators · , ,
  125. Favicon Generator · , ,
  126. Raster Image to SVG Converter · , , ,
  127. SVG Shape Generator · , ,
  128. Background Pattern Generator (fffuel) · , ,
  129. SVG Optimizer (Jake Archibald) · , , ,
  130. Code Screenshot Generator (Chalk.ist) · , ,
  131. Code Screenshot Generator (Carbon) · , ,
  132. Photo Editor · ,
  133. Photo Data Remover · , ,
  134. Image Resizer and Editor (resizemyimg.com) · , ,
  135. Image Resizer and Editor (PicResize) · , ,
  136. Image Color Determiner · , ,
  137. Image Converters · , ,
  138. Wave-Style SVG Generator · , , , ,
  139. Tilt-Shift Photo Generator · , ,
  140. SVG Optimizer (Daryll Doyle) · , , ,
  141. SVG Editor · , ,
  142. Profile Picture Generator · , ,
  143. Photo Enlarger (Zygomatic) · ,
  144. Photo Enlarger (Ojoy) · ,
  145. Logo Generator (Squarespace) · ,
  146. Logo Generator (Looka) · ,
  147. Line Drawing Generator · , ,
  148. Image Rasterizer · , ,
  149. Image Quality Enhancer · , ,
  150. Image Cropper · ,
  151. Image Cleaner · ,
  152. Image Background Remover (remove.bg) · , ,
  153. Image Background Remover (PhotoRoom) · , ,
  154. Image Art Generator · , ,
  155. Icon Generator · ,
  156. Icon Font, SVG, PDF, and PNG Generator · , ,
  157. Gradient Image Maker · , ,
  158. GIF Text Editor · , ,
  159. GIF Splitter · , ,
  160. GIF Resizer · , ,
  161. Flat Design Icon Generator · ,
  162. Dummy Image Generator · , ,
  163. Decorative Image Generator · , ,
  164. C64-Style Logo Generator · ,
  165. Brilliant Button Maker · ,
  166. Black and White Photo Colorizer (ImageColorizer) · , ,
  167. Black and White Photo Colorizer (DeepAI) · , ,
  168. Background Pattern Generator (DOODAD) · , ,
  169. Background Image Generator · , ,
  170. AVIF and WebP Settings Comparer · , , , ,
  171. Aspect Ratio Calculator · , ,
  172. Raster to Vector Image Converter · , ,
  173. Image to Text Converter · , ,
  174. C64-Style Image Converter · , ,
  175. Image Performance Analyzer · , ,
  176. Image Accessibility Analyzer · , ,
  177. Bitmaps and Vectors: Web Graphics Evolve · · , , ,
  178. The Single Pixel GIF · · , ,
  179. Basic Image Insertion · ·