1/8
REC
1
8

HTML Images Visual Content Web Graphics

Part 8: Mastering Image Implementation

Instructor

Simegnew Destew

Senior Full-Stack Developer

Part 8: HTML Images

The <img> Tag

Adding Visual Content to Web Pages
IMG

What is <img>?

The image embedding element

The <img> tag is used to embed images in web pages. It's an empty element (no closing tag) that creates a holding space for referenced images.

<!-- Basic image syntax -->
<img src="image.jpg" alt="Description">
IMG

Image placeholder - actual image would display here

🚀

Key Characteristics

Understanding image behavior

Inline Element

Images flow with text content

Replaced Element

Content is replaced by external source

Empty Element

No content between opening and closing tags

Self-contained

Doesn't affect surrounding content structure

<!-- Images in context -->
<p>
  This is text with an <img src="icon.png" alt="icon"> image inline.
</p>

Basic Image Syntax Rules:

  • Always include the src attribute - specifies the image path
  • Always include the alt attribute - provides alternative text
  • No closing tag needed - it's a void element
  • Self-contained - doesn't wrap other content
  • Supports multiple attributes - for styling and behavior
Part 8: HTML Images

Image Attributes

Controlling Image Behavior & Appearance
📍

src (Source)

Specifies the image file path

<img src="images/photo.jpg">
<img src="../assets/icon.png">
<img src="https://example.com/image.jpg">
SRC

Path Types:

  • Relative: images/photo.jpg
  • Absolute: /images/photo.jpg
  • URL: https://example.com/image.jpg
📝

alt (Alternative Text)

Text description for accessibility

<img src="cat.jpg" alt="Fluffy orange cat sleeping">
<img src="logo.png" alt="Company logo">
<img src="decorative.jpg" alt="">
ALT

Screen readers read the alt text

When to Use:

  • Descriptive: For meaningful images
  • Empty: For decorative images
  • Required: Always include alt attribute
📐

width & height

Sets image dimensions

<img src="photo.jpg" width="300" height="200">
<img src="icon.png" width="50">
<img src="banner.jpg" height="150">
150×100

Best Practices:

  • Use for layout stability
  • Maintain aspect ratio
  • Use CSS for responsive design
🎯

title (Tooltip)

Additional information on hover

<img src="product.jpg" title="Click to enlarge">
<img src="map.jpg" title="Interactive map - click areas">
TITLE

Hover over the image to see tooltip

Usage Notes:

  • Not a replacement for alt text
  • Provides supplementary info
  • Shown on mouse hover

Additional Attributes:

🖼️

loading

Controls lazy loading behavior

<img src="large.jpg" loading="lazy">
<img src="hero.jpg" loading="eager">
  • lazy: Load when near viewport
  • eager: Load immediately
  • Improves page performance
🎨

style

Inline CSS styling

<img src="photo.jpg" style="border: 2px solid blue;">
<img src="icon.png" style="border-radius: 50%;">
  • Quick styling without external CSS
  • Use sparingly for maintainability
  • Good for one-off styles
🔗

usemap

Creates image maps with clickable areas

<img src="map.jpg" usemap="#imageMap">
<map name="imageMap">
  <area shape="rect" coords="0,0,50,50" href="link1.html">
</map>
  • Defines clickable regions
  • Use with <map> element
  • Great for interactive images
Part 8: HTML Images

Interactive Image Builder

Create and Customize Images in Real-Time
Image Configuration
<!-- Configure your image here --> <img src="https://picsum.photos/400/300" alt="Sample image from picsum" width="400" height="300">
Live Preview
400px
300px
0px

How to Use:

  1. Select an image source or use the placeholder
  2. Add descriptive alt text for accessibility
  3. Adjust width and height using sliders
  4. Add borders with custom colors
  5. Click "Update Image" to see changes
  6. Copy the generated HTML code for your projects
Part 8: HTML Images

Image Alignment

Positioning Images with Text

Left Alignment

LEFT

This image is aligned to the left. Text flows around it on the right side. This is commonly used for profile pictures or illustrations that complement the text content.

<img src="image.jpg" style="float: left; margin: 0 1rem 1rem 0;">

Right Alignment

RIGHT

This image is aligned to the right. Text flows around it on the left side. This alignment works well for pull quotes, side notes, or decorative elements.

<img src="image.jpg" style="float: right; margin: 0 0 1rem 1rem;">

Center Alignment

CENTER

This image is centered on the page. Centered images work well for hero images, logos, or any content that should be the main focus of attention.

<div style="text-align: center;">
  <img src="image.jpg">
</div>

Inline Alignment

This text contains an

INL
inline image. Inline images flow with the text and are useful for icons, emojis, or small decorative elements within sentences.

<img src="icon.png" style="vertical-align: middle;">

Alignment Methods:

🎯

Float Property

Traditional method for text wrapping

<img src="photo.jpg" style="float: left;">
<img src="photo.jpg" style="float: right;">
  • Text flows around the image
  • Requires clearing after floated elements
  • Classic web design technique
📐

CSS Flexbox

Modern layout for alignment

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  • Great for centering
  • Responsive and flexible
  • Modern standard
🎨

CSS Grid

Advanced layout control

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
  • Perfect for image galleries
  • Precise control over placement
  • Two-dimensional layouts
Part 8: HTML Images

Image Styling & Borders

Enhancing Visual Appearance

Basic Border

BORDER
border: 2px solid #4a90e2;

Rounded Corners

ROUNDED
border-radius: 15px;

Shadow Effect

SHADOW
box-shadow: 0 4px 8px rgba(0,0,0,0.2);

Circular Image

CIRCLE
border-radius: 50%;

Thick Border

THICK
border: 8px double #4776E6;

Gradient Border

GRADIENT
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;

Image Spacing & Margins:

MARGIN

Margin: Space outside the border (creates separation from other elements)

Padding: Space inside the border (between content and border)

<img src="photo.jpg" style="margin: 20px; padding: 15px; border: 2px solid blue;">

Common CSS Image Styles:

🎭

Filters & Effects

/* Grayscale */
filter: grayscale(100%);

/* Blur */
filter: blur(2px);

/* Brightness */
filter: brightness(150%);

/* Multiple filters */
filter: contrast(120%) saturate(150%);
🔄

Transforms

/* Rotation */
transform: rotate(15deg);

/* Scale */
transform: scale(1.1);

/* Skew */
transform: skewX(10deg);

/* Multiple transforms */
transform: rotate(5deg) scale(1.05);
💫

Transitions

img {
  transition: all 0.3s ease;
}

img:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
Part 8: HTML Images

Best Practices

Creating Effective & Accessible Images
♿

Always Use Alt Text

Essential for screen readers and SEO. Use empty alt="" for decorative images.

⚡

Optimize File Size

Compress images for faster loading. Use modern formats like WebP when possible.

📐

Set Dimensions

Use width/height attributes for layout stability and prevent content layout shift.

🖼️

Choose Right Format

JPEG for photos, PNG for graphics, SVG for icons, WebP for modern browsers.

📱

Responsive Images

Use srcset and sizes attributes for different screen sizes and resolutions.

🎯

Semantic Use

Use images for content, not for layout. Use CSS for decorative elements.

Responsive Images Example:

<img src="image-400.jpg"
     srcset="image-400.jpg 400w,
            image-800.jpg 800w,
            image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
           (max-width: 1200px) 800px,
           1200px"
     alt="Responsive image example">
  • srcset: Provides multiple image sources with their widths
  • sizes: Defines how much space the image will take at different breakpoints
  • Browser: Automatically chooses the best image based on device and screen size
  • Benefits: Faster loading, better user experience, reduced data usage

Accessibility Checklist:

Meaningful Alt Text

Describe the content and function of the image

Empty Alt for Decorative

Use alt="" for images that don't convey meaning

Color Contrast

Ensure text overlays have sufficient contrast

No Text in Images

Avoid putting important text in images

COMPLETE

Images Mastered!

You've Learned HTML Images

What We Covered in Part 8:

🖼️

<img> Tag

Image embedding element

📍

src Attribute

Image source path

📝

alt Attribute

Accessibility text

📐

Dimensions

Width and height attributes

🎯

Alignment

Positioning with text

🎨

Styling

Borders and CSS effects

Practice Exercise:

Create an Image Gallery

Build a responsive image gallery with:

  • Multiple images with proper alt text
  • Different alignment styles (left, right, center)
  • Various border styles and effects
  • Responsive design that works on mobile
  • Hover effects and transitions
  • Accessible markup for screen readers

Key Takeaways:

Accessibility First

Always include meaningful alt text

Performance Matters

Optimize images for fast loading

Responsive Design

Ensure images work on all devices

Semantic Usage

Use images for content, CSS for decoration

Next: Learn about creating hyperlinks, anchor tags, and website navigation

Presenter Notes - Video 8

Intro Slide: Emphasize that images make websites engaging and visual. Proper image implementation is crucial for performance and accessibility.
IMG Tag Overview: Demonstrate the basic img tag structure. Show what happens when src or alt attributes are missing.
Image Attributes: Show practical examples of each attribute. Emphasize the importance of alt text for accessibility.
Interactive Builder: Let students experiment with different image configurations. Show how attributes affect appearance and behavior.
Image Alignment: Demonstrate different alignment techniques. Show how float, flexbox, and grid work with images.
Styling & Borders: Show various CSS effects and borders. Demonstrate how to create visually appealing images.
Best Practices: Emphasize accessibility and performance. Show responsive image techniques and optimization tips.
Recap: Summarize key image concepts. Assign the gallery exercise. Preview links and navigation for next video.
🎓 HTML Images - DevVoltz Academy 🌐 Website: www.devvoltz.com 📱 Telegram: @devvoltz 📸 Instagram: @devvoltz 👥 Facebook: facebook.com/devvoltz 💻 Next: HTML Links & Navigation
//replace