CodeCraftsWorld.dev | Images & Media Mastery

🎨 Images & Media · Module 4

codecratsworl.dev — visual storytelling

A picture is worth a thousand words.
Add motion, sound & magic with the right formats, attributes, and style.

📸 image file format© copyright🔒 license 🎞️ gif / jpeg / png📐 resolution🖼️ foreground 📏 height & width🔖 alternate text💬 title 🔗 link images📝 caption🎨 border / padding / margin ✨ background🌀 transparency📀 animation 🗜️ compression

🖼️ Formats & Attributes

Mountain landscape with reflection
📌 JPEG · PNG · GIF
alt="Mountain landscape" + title="tooltip"
Explicit width="320" height="180" prevents layout shift. 
<img src="landscape.jpg" alt="mountain lake" 
  title="JPEG with good compression"
  width="320" height="180">

🎨 Styling Foreground

Sunset over sea
border:3px solid #2c7da0 | padding:5px | margin:0.5rem

✨ background-color on wrapper + transparent PNG effect
Use object-fit: cover to preserve aspect ratio. 

.styled-img {
  border: 3px solid #2c7da0;
  padding: 5px;
  margin: 0.5rem;
  background: #f0f6fa;
}

🔗 Linked Images & Captions

Dog with flower
🐾 Figure 1: Creative Commons licensed — click image to view original
documentation icon License info animated coding gif GIF animation 
<figure>
  <a href="high-res.jpg"><img src="thumb.jpg" alt="..."></a>
  <figcaption>Caption with credit</figcaption>
</figure>

✨ Transparency & Background

PNG with transparency (logo example)

🧩 PNG transparency overlay + compression

✅ Transparency: PNG vs JPEG. Use PNG for logos & icons.
✅ Compression: JPEG for photos, WebP for modern sites.

🎬 Motion, Sound & Magic

✨ background-image + magic overlay
animated code typing

📀 Animated GIF — lightweight motion, no video tag needed.
Use with care for performance. Pair with alt text for accessibility.

<img src="animation.gif" alt="demo animation">

📐 Height, Width & Caption

Macro photography of leaf
🍃 Figure caption: "Leaf macro — resolution responsive + height hints"
🧠 Best practice: Always specify width and height attributes to avoid Cumulative Layout Shift (CLS).
Combine with CSS max-width: 100%; height: auto; for responsiveness.

📚 Copyright, Licenses & File Format Guide

🔏 Image Licensing

  • Creative Commons (CC0, BY, SA)
  • Royalty-free vs Rights-managed
  • Public domain & free stock sites
  • Always attribute when required

🎞️ Format Specs

  • JPEG: Photographs, millions of colors, lossy compression.
  • PNG: Transparency, sharp edges, lossless, larger file size.
  • GIF: Animation, limited 256 colors, supports transparency.
  • WebP/AVIF: Modern compression + transparency.

🖌️ Resolution & Compression

Display resolution (72-96 DPI for web) vs print. Use tools to compress JPEG/PNG without quality loss. Optimize for speed + user experience.

🖌️ Foreground Image: Border · Padding · Margin In Action

old camera
border:5px + padding:8px
landscape
margin:20px + border-radius:50%
bird
dashed border + padding:4px
img {
  border: 5px solid #ffae5a;
  padding: 8px;
  margin: 0.5rem;
  background: #fff3e0;
  border-radius: 16px;
}
🌍 Web superpower: “Motion, Sound & Magic — virtually unlimited availability of content.” Use audio, video, and animated images ethically, respect copyright, and provide accessible alternatives.