A better img reset for CSS

better-img-tag-reset.css

/* 

References for this reset

Video explanation:
https://youtu.be/345V2MU3E_w?si=DCYNR9sQjp-cirs9

The Ultimate Low-Quality Image Placeholder Technique:
https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/

*/

img {
  /* Overall note: ensure your img has a defined height and width */
  /* Max width ensures your images don't overflow their parent element */
  max-width:100%;
  /* height auto maintains the image aspect ratio */
  height: auto;
  /* hard to describe, but gives more consistent spacing around your image */
  vertical-align: middle;
  /* italic differenciates your alt text from body text for a user when an image doesn't load as expected */
  font-style: italic;
  /* on your img tag, set a style="background-image: url(lo-res.jpg)" */
  background-repeat: no-repeat;
  background-size: cover;
  /* change the shape-margin to what works for your project - useful for floated images */
  shape-margin: 0.75rem; 
}