Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<img src="https://picsum.photos/seed/picsum/400/250" alt="A random scenic image from Picsum Photos" />
It requires at least two attributes: src to specify the image source and alt for alternative text.
Specifies the path to the image. It can be an absolute URL to another website or a relative path to a file on your own server.
Provides a text description of the image. This is crucial for accessibility (for screen readers) and is displayed if the image fails to load.
<img src="https://picsum.photos/seed/road/400/250" alt="A winding road through a forest" width="400" height="250" />
See how images work with sizing, lazy loading, links, and captions
Simple image with alt text for accessibility
<img
src="https://picsum.photos/seed/nature/400/250"
alt="A scenic nature view"
/>
<p class="note">📝 Always include <strong>alt text</strong> for accessibility and SEO</p>Loading preview...
Specifying dimensions prevents layout shift during page load
<img
src="https://picsum.photos/seed/city/350/200"
alt="A modern cityscape"
width="350"
height="200"
/>
<p class="note">📐 Specifying <strong>width</strong> and <strong>height</strong> helps browsers reserve space before the image loads</p>Loading preview...
Wrap images in anchor tags to make them clickable links
<a href="https://picsum.photos" target="_blank" rel="noopener noreferrer">
<img
src="https://picsum.photos/seed/mountains/350/200"
alt="Click to visit Picsum Photos - Mountain landscape"
width="350"
height="200"
class="clickable"
/>
</a>
<p class="note">🔗 Click the image above to visit Picsum Photos</p>Loading preview...
Use figure and figcaption for semantic image captions
<figure>
<img
src="https://picsum.photos/seed/beach/350/200"
alt="A pristine beach at sunset"
width="350"
height="200"
/>
<figcaption>Fig. 1 - A beautiful beach at golden hour</figcaption>
</figure>
<p class="note">📝 Use <code><figure></code> and <code><figcaption></code> for semantic captions</p>Loading preview...
Images load only when scrolled into view - great for performance
<h2 class="title">⚡ Lazy Loading Demo</h2>
<p class="scroll-hint">Scroll down to see images load on demand ⬇️</p>
<div class="spacer">
📜 Scroll down to see lazy loading in action
</div>
<img
src="https://picsum.photos/seed/lazy1/350/200"
alt="Lazy loaded image 1"
width="350"
height="200"
loading="lazy"
class="lazy-img"
/>
<p class="label">Image 1 - Loaded when visible</p>
<img
src="https://picsum.photos/seed/lazy2/350/200"
alt="Lazy loaded image 2"
width="350"
height="200"
loading="lazy"
class="lazy-img"
/>
<p class="label">Image 2 - Loaded when visible</p>
<p class="note">🚀 The <code>loading="lazy"</code> attribute defers image loading until needed</p>Loading preview...
Images that adapt to their container width using CSS
<h2 class="title">📱 Responsive Image</h2>
<img
src="https://picsum.photos/seed/responsive/600/300"
alt="Responsive image that adapts to container"
class="responsive-img"
/>
<p class="note">📦 Try resizing your browser - the image adapts! <code>max-width: 100%</code> makes it responsive</p>Loading preview...
This simple attribute can significantly speed up your initial page load time and save data for users on slow connections, especially on pages with many images below the fold.
<img src="https://picsum.photos/seed/lazy/400/250" alt="This image will only load when you scroll near it." width="400" height="250" loading="lazy" />
Note: The effect is best observed on a long page. Use your browser's developer tools (Network tab) to see images loading as you scroll.
<a href="https://picsum.photos/" target="_blank">
<img
src="https://picsum.photos/seed/mountains/400/250"
alt="Click to visit Picsum Photos"
width="400"
height="250"
/>
</a><figure>
<img
src="https://picsum.photos/seed/city/400/250"
alt="A bustling city street at night"
width="400"
height="250"
/>
<figcaption>Fig.1 - A city skyline at night, showcasing modern architecture.</figcaption>
</figure>Explore basic images, sizing, lazy loading, linked images, and semantic captions