Images
The Language Beyond Words
There are times when even the most poetic tales can’t convey the majesty of snow-covered peaks, the glimmer of turquoise oceans, or the spark of a sly smile. That’s when images, like quiet sorcerers, step forward to bring your adventures to life.
As you craft your travel journal, images weave richness into your words, transforming simple descriptions into vibrant scenes. They are the enchanted allies of your story, effortlessly understood at a glance. Anyone who’s marveled at a glowing horizon or felt the softness of a meadow knows—no words can match their magic. And with the right touch, they can transform your page into a portal to another world.
Images
Linked, labeled, styled – here’s how to use images effectively!
Adding an Image
Breathe Visual Life Into Your Page
The <img> element is like the loyal companion of a wanderlust-driven adventurer, proudly showcasing their finest photographs. With this little helper, you bring images to your page that brim with life and vibrancy. It closes itself, like a courteous guest who quietly pulls the door shut behind them—truly a self-closing element.
<img>
Images & Attributes
Make Your Image Shine Bright
To make your image dazzle as it should, you’ll need the right spells—better known as attributes.
- src: The magical path to your image, whether from distant server realms or your trusty local folder.
- alt: Your invisible narrator that steps in when the image is lost. Essential for search engines and screen readers.
- width & height: The dimensions of your image, best controlled with CSS for maximum flexibility.
- class and id: The secret categorization talents that allow you to enchant your image with targeted magic later.
<img src="img/unicorn.jpg" alt="A Majestic Unicorn in the Forest" class="img-fluid">
Image Caption
The Words Behind the Image
With <figure> and <figcaption>, you give your image the royal treatment it deserves. The <figure> element acts as a frame, holding your image in place, while <figcaption> adds the perfect tale to accompany it. Ideal for the adventurer who loves to pair every snapshot with a charming anecdote or a sprinkle of context, making the visual story complete.
<figure>
<img src="img/blackbird.jpg" alt="Blackbird sings softly" width="300">
<figcaption>A Blackbird</figcaption>
</figure>
The <picture> Element
Flexibility for Your Visual Adventures
The <picture> element is like a magical multitool for handling varying image sizes. Depending on the screen size and resolution, it displays the image that fits best. Your website remains crystal clear—whether viewed on a smartphone or a dragon flight simulator.
<picture>
<source srcset="img/fly-agaric.jpg" media="(min-width: 800px)">
<source srcset="img/fly-agaric-small.jpg" media="(max-width: 799px)">
<img src="img/fly-agaric-normal.jpg" alt="An illustration of a fly agaric mushroom">
</picture>The Art of Image Optimization
JPEG: Ideal for photos of landscapes, portraits, and epic adventures; highly compressible!
PNG: Perfect for graphics requiring transparency, like the invisible cloak of a wizard.
SVG: Your tireless hero for logos and vector graphics, staying sharp and flawless no matter how large you scale it.
WebP: The speedy and space-saving challenger to JPEG, always ready for the next adventure.
Tips for Naming Images
- Keep file sizes small to ensure your site loads as swiftly as a cheetah.
- Use descriptive file names, as clear as “unicorn-in-forest.jpg.”
- Avoid spaces and special characters—they’re like trip hazards in your magic flow. Use hyphens (-) for separation.
- Stick to lowercase letters to honor the universal laws of the internet.
In this lesson, you have learned…
- How to embed images into your website using the
<img>element by setting the src attribute for the image path and alt for an alternative description. - Why
<figure>and<figcaption>are useful for stylishly presenting images with matching captions. - How to use
<picture>andsrcsetto deliver responsive images that adapt optimally to different screen sizes. - Which image formats are ideal for different purposes, such as JPEG for photos, PNG for transparency, SVG for vector graphics, and WebP for optimized loading times.
- Why thoughtful image naming is important, by using clear, descriptive filenames without spaces or special characters to ensure structure and search engine friendliness.
Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!
The Images of the Past
It is said that the magical tablets of the forest reveal glimpses of the past – but only when they feel like it. Sometimes, they showcase grand scenes of old, and other times, they capture a squirrel shamelessly stealing nuts. To make these mischievous memories visible, you must master the art of embedding images. With HTML, you’ll summon these images to the page and pair them with fitting descriptions, ensuring no one mistakes the squirrel for the story’s hero. So, grab your magical attributes and show those images who’s in charge!
Your Task: Apply HTML Image Elements
- Simple Image (<img>)
Insert a simple image using the <img> element and use the alt attribute to add a description.
Use this image: assets/img/unicorn-large.jpg
Add the class: img-fluid
Set the image width to 400px. - Image with Caption (<figure> and <figcaption>)
Create a caption for an image using the <figure> and <figcaption> elements.
Use the same image as in point 1. - Responsive Images (<picture> and <source>)
Use the <picture> element with multiple <source> elements to provide different image resources for various screen sizes.
Use the following images:
assets/img/unicorn-large.jpg (for screens 800px and wider)
assets/img/unicorn-small.jpg (for screens up to 799px wide)
assets/img/unicorn-default.jpg (as fallback)
<img src="assets/img/unicorn-large.jpg" alt="Majestic unicorn in the forest" class="img-fluid" width="400">
<figure>
<img src="assets/img/unicorn-small.jpg" alt="Majestic unicorn in the forest" width="300">
<figcaption>A majestic unicorn in the forest</figcaption>
</figure>
<picture>
<source srcset="assets/img/unicorn-large.jpg" media="(min-width: 800px)">
<source srcset="assets/img/unicorn-small.jpg" media="(max-width: 799px)">
<img src="assets/img/unicorn-default.jpg" alt="Majestic unicorn in the forest">
</picture>