Images might seem like a pretty straightforward topic, but there’s a lot to learn and a lot to know. And it’s one of the areas where I see tons of mistakes that dramatically impact essential things like SEO, accessibility, performance, and more.
In this lesson, you’ll learn the fundamentals of working with images in web design. We’ll cover:
✅ Basic image formats (jpg, png, SVG)
✅ Next-gen image formats (webp, avif)
✅ Real images (HTML) vs background images (CSS)
✅ Figure tags
✅ Alt tags
✅ SRCSET responsive images
✅ Pre-optimizing images
✅ Plugin-based image optimization
✅ Image organization in WordPress
✅ Generating multiple image sizes
✅ Making real images behave like background images
✅ Text overlays on real images
✅ Common mistakes with images
More details on how to configure Shortpixel settings are found in my Plugin Blueprint video here: https://youtu.be/hbwO0J9OPZs
*** RECOMMENDED TOOLS IN THIS LESSON ***
🔥 Shortpixel – https://geni.us/goJD
🔥 HappyFiles Pro – https://geni.us/ZGQiCjc
🔥 Inner Circle – https://geary.co/inner-circle/
*** MY TOOLS ***
🔥 AutomaticCSS (ACSS) – https://automaticcss.com
🔥 Frames – https://getframes.io
See all my recommended tools here: https://geary.co/tools/
*** INNER CIRCLE ***
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don’t hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ …and much more!
Learn more and join here: https://geary.co/inner-circle/
*** SOCIAL ***
👉 FB – https://www.facebook.com/marketingkev/
👉 LinkedIn – https://www.linkedin.com/in/kevingeary/
*** CHAPTERS ***