Learn to add images, videos, and audio to your webpages with proper optimization and accessibility
Media elements transform static web pages into engaging, visual experiences. Images, videos, and audio content help communicate your message more effectively than text alone, but they must be implemented thoughtfully.
When adding media to your website, you're not just decorating - you're enhancing communication, improving user engagement, and creating memorable experiences. However, with great visual power comes great responsibility: you need to ensure your media is accessible, optimized, and adds real value to your content.
The <img> element is self-closing and requires specific attributes:
Required Attributes:
Optional but Important Attributes:
Example:
<img src="photo.jpg" alt="Sunset over mountains" width="400" height="300" loading="lazy">
The alt attribute is crucial - it describes the image for screen readers and appears when images fail to load.
Modern websites need images that work well on all screen sizes:
The srcset Attribute:
The sizes Attribute:
Picture Element:
Responsive images ensure fast loading and crisp display across all devices.
HTML5 provides native multimedia support:
Video Element:
Audio Element:
Source Element:
Always provide multiple formats and consider user preferences for autoplay.
Build a professional photography portfolio with optimized images, responsive design, and multimedia content.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Sarah Chen Photography - Professional Portfolio</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Georgia', serif;
16 line-height: 1.6;
17 color: #333;
18 background-color: #fafafa;
19 }
20
21 /* Header */
22 header {
23 background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
24 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%23c8d6e5" width="1200" height="400"/><text x="600" y="200" text-anchor="middle" fill="%23333" font-size="24" font-family="serif">Hero Background Image</text></svg>');
25 background-size: cover;
26 background-position: center;
27 color: white;
28 text-align: center;
29 padding: 100px 20px;
30 position: relative;
31 }
32
33 .hero-content h1 {
34 font-size: 3.5rem;
35 margin-bottom: 20px;
36 text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
37 }
38
39 .hero-content p {
40 font-size: 1.3rem;
41 margin-bottom: 30px;
42 text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
43 }
44
45 /* Container */
46 .container {
47 max-width: 1200px;
48 margin: 0 auto;
49 padding: 0 20px;
50 }
51
52 /* Main Content */
53 main {
54 padding: 60px 0;
55 }
56
57 section {
58 margin-bottom: 80px;
59 }
60
61 h2 {
62 font-size: 2.5rem;
63 text-align: center;
64 margin-bottom: 50px;
65 color: #2c3e50;
66 position: relative;
67 }
68
69 h2::after {
70 content: '';
71 display: block;
72 width: 100px;
73 height: 3px;
74 background: linear-gradient(135deg, #3498db, #2980b9);
75 margin: 20px auto;
76 border-radius: 2px;
77 }
78
79 /* Portrait Section */
80 .portrait-section {
81 display: grid;
82 grid-template-columns: 1fr 2fr;
83 gap: 50px;
84 align-items: center;
85 margin-bottom: 60px;
86 }
87
88 .portrait-image {
89 width: 100%;
90 height: 400px;
91 object-fit: cover;
92 border-radius: 12px;
93 box-shadow: 0 15px 35px rgba(0,0,0,0.1);
94 transition: transform 0.3s ease;
95 }
96
97 .portrait-image:hover {
98 transform: scale(1.02);
99 }
100
101 .portrait-text {
102 font-size: 1.1rem;
103 line-height: 1.8;
104 }
105
106 /* Gallery Grid */
107 .gallery-grid {
108 display: grid;
109 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
110 gap: 30px;
111 margin-bottom: 50px;
112 }
113
114 .gallery-item {
115 position: relative;
116 overflow: hidden;
117 border-radius: 12px;
118 box-shadow: 0 8px 25px rgba(0,0,0,0.1);
119 transition: transform 0.3s ease, box-shadow 0.3s ease;
120 }
121
122 .gallery-item:hover {
123 transform: translateY(-10px);
124 box-shadow: 0 20px 40px rgba(0,0,0,0.15);
125 }
126
127 .gallery-image {
128 width: 100%;
129 height: 250px;
130 object-fit: cover;
131 transition: transform 0.5s ease;
132 }
133
134 .gallery-item:hover .gallery-image {
135 transform: scale(1.1);
136 }
137
138 .gallery-overlay {
139 position: absolute;
140 bottom: 0;
141 left: 0;
142 right: 0;
143 background: linear-gradient(transparent, rgba(0,0,0,0.8));
144 color: white;
145 padding: 30px 20px 20px;
146 transform: translateY(100%);
147 transition: transform 0.3s ease;
148 }
149
150 .gallery-item:hover .gallery-overlay {
151 transform: translateY(0);
152 }
153
154 .gallery-overlay h3 {
155 margin-bottom: 10px;
156 font-size: 1.3rem;
157 }
158
159 .gallery-overlay p {
160 font-size: 0.9rem;
161 opacity: 0.9;
162 }
163
164 /* Responsive Images Section */
165 .responsive-showcase {
166 background: white;
167 padding: 50px;
168 border-radius: 12px;
169 box-shadow: 0 8px 25px rgba(0,0,0,0.05);
170 text-align: center;
171 }
172
173 .responsive-image {
174 width: 100%;
175 max-width: 800px;
176 height: auto;
177 border-radius: 12px;
178 box-shadow: 0 10px 30px rgba(0,0,0,0.1);
179 }
180
181 /* Video Section */
182 .video-section {
183 text-align: center;
184 }
185
186 .video-container {
187 position: relative;
188 max-width: 800px;
189 margin: 0 auto;
190 border-radius: 12px;
191 overflow: hidden;
192 box-shadow: 0 15px 40px rgba(0,0,0,0.1);
193 }
194
195 .video-player {
196 width: 100%;
197 height: auto;
198 display: block;
199 }
200
201 .video-description {
202 margin-top: 30px;
203 font-size: 1.1rem;
204 color: #555;
205 max-width: 600px;
206 margin-left: auto;
207 margin-right: auto;
208 }
209
210 /* Audio Section */
211 .audio-section {
212 background: #f8f9fa;
213 padding: 50px;
214 border-radius: 12px;
215 text-align: center;
216 }
217
218 .audio-player {
219 width: 100%;
220 max-width: 500px;
221 margin: 30px auto;
222 border-radius: 8px;
223 }
224
225 .audio-player::-webkit-media-controls-panel {
226 background-color: #2c3e50;
227 }
228
229 /* Download Section */
230 .download-section {
231 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
232 color: white;
233 padding: 50px;
234 border-radius: 12px;
235 text-align: center;
236 }
237
238 .download-grid {
239 display: grid;
240 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
241 gap: 30px;
242 margin-top: 40px;
243 }
244
245 .download-item {
246 background: rgba(255,255,255,0.1);
247 padding: 30px;
248 border-radius: 12px;
249 backdrop-filter: blur(10px);
250 transition: transform 0.3s ease;
251 }
252
253 .download-item:hover {
254 transform: translateY(-5px);
255 }
256
257 .download-link {
258 display: inline-block;
259 background: white;
260 color: #667eea;
261 padding: 12px 25px;
262 text-decoration: none;
263 border-radius: 8px;
264 font-weight: 600;
265 margin-top: 20px;
266 transition: all 0.3s ease;
267 }
268
269 .download-link:hover {
270 background: #f1f3f4;
271 transform: translateY(-2px);
272 box-shadow: 0 5px 15px rgba(0,0,0,0.2);
273 }
274
275 /* Figure and Figcaption */
276 figure {
277 margin: 40px 0;
278 text-align: center;
279 }
280
281 figcaption {
282 font-style: italic;
283 color: #666;
284 margin-top: 15px;
285 font-size: 0.95rem;
286 }
287
288 /* Lazy Loading Placeholder */
289 .lazy-placeholder {
290 background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
291 background-size: 400% 100%;
292 animation: shimmer 1.5s ease-in-out infinite;
293 }
294
295 @keyframes shimmer {
296 0% { background-position: 100% 0; }
297 100% { background-position: -100% 0; }
298 }
299
300 /* Responsive Design */
301 @media (max-width: 768px) {
302 .hero-content h1 {
303 font-size: 2.5rem;
304 }
305
306 .portrait-section {
307 grid-template-columns: 1fr;
308 text-align: center;
309 }
310
311 .gallery-grid {
312 grid-template-columns: 1fr;
313 }
314
315 .responsive-showcase,
316 .audio-section,
317 .download-section {
318 padding: 30px 20px;
319 }
320
321 .download-grid {
322 grid-template-columns: 1fr;
323 }
324 }
325
326 @media (max-width: 480px) {
327 .hero-content h1 {
328 font-size: 2rem;
329 }
330
331 .hero-content p {
332 font-size: 1.1rem;
333 }
334
335 h2 {
336 font-size: 2rem;
337 }
338 }
339 </style>
340</head>
341<body>
342 <!-- Header with Hero Image -->
343 <header>
344 <div class="hero-content">
345 <h1>Sarah Chen Photography</h1>
346 <p>Capturing Life's Beautiful Moments Through the Lens</p>
347 </div>
348 </header>
349
350 <main class="container">
351 <!-- About Section with Portrait -->
352 <section>
353 <h2>About the Artist</h2>
354 <div class="portrait-section">
355 <!-- Portrait Image with Proper Attributes -->
356 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><rect fill='%23e8f4f8' width='400' height='400'/><circle cx='200' cy='180' r='80' fill='%23d1ecf1'/><rect x='120' y='280' width='160' height='100' rx='80' fill='%23d1ecf1'/><text x='200' y='350' text-anchor='middle' fill='%23555' font-size='14'>Portrait Photo</text></svg>"
357 alt="Sarah Chen, professional photographer, smiling at camera in her studio"
358 class="portrait-image"
359 width="400"
360 height="400"
361 loading="eager">
362
363 <div class="portrait-text">
364 <p>
365 Welcome to my photography world! I'm <strong>Sarah Chen</strong>, a passionate
366 photographer specializing in <em>landscape</em>, <em>portrait</em>, and
367 <em>street photography</em>. With over 8 years of experience, I strive to
368 capture the essence of every moment.
369 </p>
370 <p>
371 My work has been featured in various exhibitions and publications. I believe
372 that photography is not just about capturing images—it's about telling stories,
373 preserving memories, and sharing perspectives that inspire others.
374 </p>
375 </div>
376 </div>
377 </section>
378
379 <!-- Gallery Section -->
380 <section>
381 <h2>Featured Gallery</h2>
382 <div class="gallery-grid">
383 <!-- Gallery Item 1 -->
384 <div class="gallery-item">
385 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'><defs><linearGradient id='sunset' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='%23ff9a9e'/><stop offset='50%' stop-color='%23fad0c4'/><stop offset='100%' stop-color='%23a8edea'/></linearGradient></defs><rect fill='url(%23sunset)' width='400' height='250'/><circle cx='100' cy='80' r='30' fill='%23fff' opacity='0.8'/><polygon points='0,200 100,150 200,180 300,140 400,160 400,250 0,250' fill='%232c3e50' opacity='0.7'/><text x='200' y='230' text-anchor='middle' fill='%23fff' font-size='16'>Mountain Sunset</text></svg>"
386 alt="Breathtaking sunset over mountain peaks with golden hour lighting"
387 class="gallery-image"
388 width="400"
389 height="250"
390 loading="lazy">
391 <div class="gallery-overlay">
392 <h3>Mountain Sunset</h3>
393 <p>Captured during a hiking expedition in the Rocky Mountains. The golden hour light creates a magical atmosphere.</p>
394 </div>
395 </div>
396
397 <!-- Gallery Item 2 -->
398 <div class="gallery-item">
399 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'><rect fill='%23e3f2fd' width='400' height='250'/><rect x='50' y='50' width='300' height='150' fill='%23bbdefb' stroke='%232196f3' stroke-width='2'/><rect x='80' y='80' width='60' height='80' fill='%23ffeb3b'/><rect x='160' y='90' width='60' height='70' fill='%23ffeb3b'/><rect x='240' y='85' width='60' height='75' fill='%23ffeb3b'/><rect x='320' y='95' width='20' height='65' fill='%238bc34a'/><text x='200' y='230' text-anchor='middle' fill='%23333' font-size='14'>Urban Architecture</text></svg>"
400 alt="Modern urban architecture with geometric patterns and vibrant colors"
401 class="gallery-image"
402 width="400"
403 height="250"
404 loading="lazy">
405 <div class="gallery-overlay">
406 <h3>Urban Geometry</h3>
407 <p>Street photography showcasing the geometric beauty of modern urban architecture.</p>
408 </div>
409 </div>
410
411 <!-- Gallery Item 3 -->
412 <div class="gallery-item">
413 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250'><rect fill='%23e8f5e8' width='400' height='250'/><circle cx='200' cy='125' r='80' fill='%23c8e6c9' stroke='%234caf50' stroke-width='3'/><path d='M 160 105 Q 200 85 240 105 Q 220 125 200 115 Q 180 125 160 105' fill='%2381c784'/><circle cx='180' cy='110' r='3' fill='%23333'/><circle cx='220' cy='110' r='3' fill='%23333'/><path d='M 185 130 Q 200 140 215 130' stroke='%23333' stroke-width='2' fill='none'/><text x='200' y='230' text-anchor='middle' fill='%23333' font-size='14'>Portrait Session</text></svg>"
414 alt="Professional portrait of a young woman with natural lighting and soft expression"
415 class="gallery-image"
416 width="400"
417 height="250"
418 loading="lazy">
419 <div class="gallery-overlay">
420 <h3>Natural Light Portrait</h3>
421 <p>A portrait session utilizing natural window light to create soft, flattering illumination.</p>
422 </div>
423 </div>
424 </div>
425 </section>
426
427 <!-- Responsive Image Showcase -->
428 <section>
429 <h2>Responsive Photography</h2>
430 <div class="responsive-showcase">
431 <figure>
432 <!-- Responsive Image with srcset and sizes -->
433 <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Crect fill='%2387ceeb' width='800' height='400'/%3E%3Ctext x='400' y='200' text-anchor='middle' fill='%23fff' font-size='18'%3EPanoramic Landscape%3C/text%3E%3C/svg%3E"
434 srcset="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200'%3E%3Crect fill='%2387ceeb' width='400' height='200'/%3E%3Ctext x='200' y='100' text-anchor='middle' fill='%23fff'%3ESmall 400w%3C/text%3E%3C/svg%3E 400w,
435 data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Crect fill='%2387ceeb' width='800' height='400'/%3E%3Ctext x='400' y='200' text-anchor='middle' fill='%23fff'%3EMedium 800w%3C/text%3E%3C/svg%3E 800w,
436 data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect fill='%2387ceeb' width='1200' height='600'/%3E%3Ctext x='600' y='300' text-anchor='middle' fill='%23fff'%3ELarge 1200w%3C/text%3E%3C/svg%3E 1200w"
437 sizes="(max-width: 600px) 100vw, (max-width: 900px) 80vw, 70vw"
438 alt="Panoramic landscape photograph showing rolling hills, blue sky, and dramatic clouds at golden hour"
439 class="responsive-image"
440 width="800"
441 height="400"
442 loading="lazy">
443 <figcaption>
444 This responsive image adapts to your screen size. The browser automatically selects
445 the best resolution for optimal loading speed and visual quality.
446 </figcaption>
447 </figure>
448
449 <p style="margin-top: 30px; font-size: 1.1rem; color: #555;">
450 Resize your browser window to see how the image adapts! Modern responsive images
451 ensure fast loading times while maintaining visual quality across all devices.
452 </p>
453 </div>
454 </section>
455
456 <!-- Video Section -->
457 <section class="video-section">
458 <h2>Behind the Scenes</h2>
459
460 <div class="video-container">
461 <!-- HTML5 Video with Multiple Sources -->
462 <video class="video-player"
463 controls
464 preload="metadata"
465 poster="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'><rect fill='%23000' width='800' height='450'/><polygon points='300,150 300,300 500,225' fill='%23fff'/><text x='400' y='350' text-anchor='middle' fill='%23fff' font-size='16'>Photography Workshop Video</text></svg>">
466
467 <!-- Multiple video formats for browser compatibility -->
468 <source src="data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAACKBtZGF0AAAC" type="video/mp4">
469 <source src="data:video/webm;base64,GkXfowEAAAAAAAAfQoaBAUL3gQFC8oEEQvOBCEKChHdlYm1Ch4EEQoWBAhhTgGcBAAAAAA" type="video/webm">
470
471 <!-- Fallback content for browsers that don't support HTML5 video -->
472 <p>
473 Your browser doesn't support HTML5 video.
474 <a href="video-fallback.mp4" download>Download the video</a> instead.
475 </p>
476 </video>
477 </div>
478
479 <div class="video-description">
480 <p>
481 Watch this behind-the-scenes look at my photography workshop where I share techniques
482 for capturing stunning landscape photos during the golden hour. Learn about composition,
483 lighting, and equipment setup.
484 </p>
485 </div>
486 </section>
487
488 <!-- Audio Section -->
489 <section class="audio-section">
490 <h2>Photography Podcast</h2>
491
492 <p style="margin-bottom: 30px; font-size: 1.1rem;">
493 Listen to my latest podcast episode where I discuss the creative process behind
494 my favorite photographs and share tips for aspiring photographers.
495 </p>
496
497 <!-- HTML5 Audio with Multiple Sources -->
498 <audio class="audio-player" controls preload="metadata">
499 <!-- Multiple audio formats for compatibility -->
500 <source src="data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA" type="audio/mpeg">
501 <source src="data:audio/ogg;base64,T2dnUwACAAAAAAAAAADqnjMlAAAAAXDvs=" type="audio/ogg">
502 <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJuF" type="audio/wav">
503
504 <!-- Fallback content -->
505 <p>
506 Your browser doesn't support HTML5 audio.
507 <a href="podcast-episode.mp3" download>Download the podcast</a> to listen offline.
508 </p>
509 </audio>
510
511 <p style="margin-top: 20px; color: #666; font-style: italic;">
512 Episode 15: "Finding Your Unique Photography Style" - Duration: 32 minutes
513 </p>
514 </section>
515
516 <!-- Download Section -->
517 <section class="download-section">
518 <h2 style="color: white; margin-bottom: 30px;">Download Resources</h2>
519
520 <p style="font-size: 1.2rem; margin-bottom: 40px; opacity: 0.9;">
521 Access high-resolution versions of my photographs and helpful photography guides.
522 </p>
523
524 <div class="download-grid">
525 <div class="download-item">
526 <h3>Photography Guide</h3>
527 <p>Complete beginner's guide to landscape photography with tips and techniques.</p>
528 <a href="data:application/pdf;base64,JVBERi0xLjQKJcfsj6IKNSAwIG9iago8PAovVHlwZSAvUGFnZQovUGFyZW50IDQgMCBSCi9SZXNvdXJjZXMgPDwKL0ZvbnQgPDwKL0YxIDggMCBSCj4+Cj4+Ci9NZWRpYUJveCBbMCAwIDYxMiA3OTJdCi9Db250ZW50cyAzIDAgUgo+PgplbmRvYmoK"
529 download="photography-guide.pdf"
530 class="download-link">
531 Download PDF Guide
532 </a>
533 </div>
534
535 <div class="download-item">
536 <h3>Hi-Res Portfolio</h3>
537 <p>Collection of my best photographs in high resolution for print use.</p>
538 <a href="portfolio-images.zip"
539 download
540 class="download-link">
541 Download Portfolio ZIP
542 </a>
543 </div>
544
545 <div class="download-item">
546 <h3>Lightroom Presets</h3>
547 <p>Professional Lightroom presets I use for landscape and portrait editing.</p>
548 <a href="lightroom-presets.zip"
549 download="sarah-chen-presets.zip"
550 class="download-link">
551 Download Presets
552 </a>
553 </div>
554 </div>
555 </section>
556
557 <!-- Picture Element Example -->
558 <section>
559 <h2>Adaptive Images</h2>
560
561 <figure>
562 <!-- Picture element for art direction -->
563 <picture>
564 <!-- Mobile version (portrait orientation) -->
565 <source media="(max-width: 600px)"
566 srcset="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Crect fill='%23c8d6e5' width='300' height='400'/%3E%3Ctext x='150' y='200' text-anchor='middle' fill='%23333' font-size='16'%3EMobile Portrait%3C/text%3E%3C/svg%3E">
567
568 <!-- Tablet version (landscape orientation) -->
569 <source media="(max-width: 1000px)"
570 srcset="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Crect fill='%23d4e6f1' width='600' height='300'/%3E%3Ctext x='300' y='150' text-anchor='middle' fill='%23333' font-size='18'%3ETablet Landscape%3C/text%3E%3C/svg%3E">
571
572 <!-- Desktop version (wide landscape) -->
573 <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 300'%3E%3Crect fill='%23e8f6f3' width='900' height='300'/%3E%3Ctext x='450' y='150' text-anchor='middle' fill='%23333' font-size='20'%3EDesktop Wide%3C/text%3E%3C/svg%3E"
574 alt="Adaptive landscape photograph that changes composition based on screen size"
575 style="width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
576 </picture>
577
578 <figcaption style="margin-top: 20px; font-style: italic; color: #666;">
579 This image uses the <picture> element to display different compositions
580 based on your screen size - perfect for responsive design that adapts content,
581 not just size.
582 </figcaption>
583 </figure>
584 </section>
585 </main>
586</body>
587</html>This comprehensive media gallery demonstrates all aspects of HTML images, video, and audio. It includes responsive images with srcset, the picture element for art direction, HTML5 video and audio with multiple format support, download links, proper alt text, and performance optimizations like lazy loading. Notice how each media element serves a specific purpose and enhances the user experience.
Excellent work mastering HTML media elements! You now know how to add images, videos, and audio content that enhances user experience while maintaining performance and accessibility. Next, we'll explore lists and organization to learn how to structure and present information clearly.
Your progress is saved in this browser, on this device only.