KandZ – Tuts

We like to help…!

HTML 7 🏛️ How to Images (img)

7. How-to Images (img)

🔹 1. How to Add an Image to Your HTML Page

Explanation:
Use the <img> tag with src and alt attributes to display an image.

Example:

<img src="images/photo.jpg" alt="A beautiful sunset">

🔹 2. How to Make Images Accessible with Alt Text

Explanation:
Always include descriptive alt text so screen readers can understand what the image shows.

Example:

<img src="chart.png" alt="Sales growth chart showing 25% increase from Q1 to Q4">

🔹 3. How to Use Relative and Absolute Image Paths

Explanation:
Use relative paths for images inside your project folder; use absolute URLs for external images.

Example:

<!-- Relative path -->
<img src="assets/logo.png" alt="Company Logo">

<!-- Absolute URL -->
<img src="https://example.com/images/banner.jpg" alt="Banner Image">

🔹 4. How to Set Image Dimensions Without Distorting It

Explanation:
Use the width and height attributes to reserve space for images, preventing layout shifts.

Example:

<img src="portrait.jpg" alt="Portrait photo" width="300" height="200">

🔹 5. How to Add a Tooltip on Hover Using the Title Attribute

Explanation:
Use the title attribute to show extra info when users hover over an image.

Example:

<img src="home-icon.png" alt="Home icon" title="Go to homepage">

🔹 6. How to Implement Lazy Loading for Better Performance

Explanation:
Add loading="lazy" to delay loading images until they’re near the viewport.

Example:

<img src="large-image.jpg" alt="Large landscape" loading="lazy">

🔹 7. How to Make Responsive Images with srcset and Sizes

Explanation:
Provide multiple image sources and define sizes for different screen widths using srcset and sizes.

Example:

<img srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 1200w"
     sizes="(max-width: 300px) 100vw,
            (max-width: 600px) 50vw,
            33vw"
     src="medium.jpg" 
     alt="Responsive image">

🔹 8. How to Use Modern Image Formats Like WebP or AVIF

Explanation:
Use formats such as WebP or AVIF for better compression and performance.

Example:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Modern image format example">
</picture>

🔹 9. How to Handle Decorative Images in HTML

Explanation:
Use empty alt="" for decorative images that don’t add meaning.

Example:

<img src="decoration.png" alt="">

🔹 10. How to Optimize Images for SEO with Proper Alt Text and File Names

Explanation:
Use meaningful file names and descriptive alt text to help search engines understand image content.

Example:

<img src="seo-best-practices.jpg" alt="Guide to SEO best practices">

🔹 11. How to Prevent Layout Shifts by Setting Image Dimensions

Explanation:
Set fixed width and height to prevent layout shifts before images load.

Example:

<img src="profile-pic.jpg" alt="User profile picture" width="150" height="150">

🔹 12. How to Add Cross-Origin Handling for Images from Other Domains

Explanation:
Use crossorigin="anonymous" to handle CORS when loading images from external domains.

Example:

<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="External image">

🔹 13. How to Improve Page Speed with Lazy Loading

Explanation:
Enable lazy loading to defer non-critical images until needed, improving load time.

Example:

<img src="hero-banner.jpg" alt="Hero banner image" loading="lazy">

🔹 14. How to Add a Description of Complex Images for Screen Readers

Explanation:
For complex images like charts or diagrams, provide detailed alt text that describes the data.

Example:

<img src="sales-chart.png" alt="Bar chart showing monthly sales from Jan to Dec">

🔹 15. How to Use Data URIs for Inline Images

Explanation:
Embed small images directly into HTML using base64-encoded data URIs.

Example:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="Small inline image">

Check out tools.kandz.me — the ultimate minimalist hub for all your daily online tools. 🚀

✅ Fast & Secure
✅ 100% Free
✅ Works on any device

From Scrabble cheats and percentage calculators to IP lookups and text formatters, we’ve got everything you need in one clean place. No bloat, just tools.

🔗 Visit now: tools.kandz.me
🔖 Bookmark it for later!

Leave a Reply