Bird
Raised Fist0
SEO Fundamentalsknowledge~30 mins

Image alt text and optimization in SEO Fundamentals - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepVisualPracticeChallengeProjectRecallTime

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Image alt text and optimization
šŸ“– Scenario: You are creating a simple webpage for a local bakery. The page will show pictures of three popular baked goods. To make the page accessible and optimized for search engines, you need to add descriptive alternative text to each image and ensure the images are properly sized.
šŸŽÆ Goal: Build a basic HTML page with three images of baked goods. Add clear and descriptive alt text to each image. Also, set the image width to 300 pixels to optimize loading and display.
šŸ“‹ What You'll Learn
Create an HTML skeleton with <!DOCTYPE html>, <html>, <head>, and <body> tags
Add three <img> tags with the exact src attributes provided
Add descriptive alt text for each image
Set the width attribute of each image to 300 pixels
šŸ’” Why This Matters
šŸŒ Real World
Adding alt text and optimizing images is essential for making websites accessible to users with disabilities and improving search engine rankings.
šŸ’¼ Career
Web developers and content creators must know how to write good alt text and optimize images to meet accessibility standards and enhance user experience.
Progress0 / 4 steps
1
Create the HTML skeleton and add image tags
Create a basic HTML page structure with <!DOCTYPE html>, <html lang="en">, <head> containing a <title> "Bakery Products", and an empty <body>. Inside the <body>, add three <img> tags with these exact src attributes: "bread.jpg", "cake.jpg", and "cookies.jpg". Do not add alt or width attributes yet.
SEO Fundamentals
Hint

Start by writing the basic HTML page structure. Then add three <img> tags with the exact src values inside the <body>.

2
Add descriptive alt text to each image
Add an alt attribute to each <img> tag with these exact values: for bread.jpg use "Freshly baked bread loaf", for cake.jpg use "Chocolate layered cake", and for cookies.jpg use "Assorted chocolate chip cookies".
SEO Fundamentals
Hint

Use the alt attribute inside each <img> tag with the exact descriptive text given.

3
Set the width of each image to 300 pixels
Add a width attribute with the value "300" to each <img> tag to set the image width to 300 pixels.
SEO Fundamentals
Hint

Add the width="300" attribute inside each <img> tag to control the image size.

4
Add a descriptive <h1> heading and a footer
Add a main heading <h1> with the text "Welcome to Our Bakery" above the images inside the <body>. Then add a <footer> below the images with the text "Ā© 2024 Sweet Treats Bakery".
SEO Fundamentals
Hint

Place the <h1> heading before the images and the <footer> after the images inside the <body>.

Practice

(1/5)
1. What is the primary purpose of alt text in images on a website?
easy
A. To increase the image file size
B. To add decorative effects to the image
C. To change the image color automatically
D. To describe the image for users who cannot see it

Solution

  1. Step 1: Understand the role of alt text

    Alt text provides a description of images for people who use screen readers or when images fail to load.

  2. Step 2: Identify the correct purpose

    It helps accessibility and SEO by describing the image content clearly.

  3. Final Answer:

    To describe the image for users who cannot see it -> Option D

  4. Quick Check:

    Alt text = Image description for accessibility [OK]
Hint: Alt text describes images for accessibility and SEO [OK]
Common Mistakes:
  • Thinking alt text changes image appearance
  • Using alt text for decoration only
  • Ignoring alt text for SEO benefits
2. Which of the following is the correct way to add alt text to an image in HTML?
easy
A. <img alt=A sunny beach src='photo.jpg'>
B. <image src='photo.jpg' alttext='A sunny beach'>
C. <img src='photo.jpg' alt='A sunny beach'>
D. <img src='photo.jpg' description='A sunny beach'>

Solution

  1. Step 1: Review correct HTML syntax for images

    The <img> tag uses the alt attribute to provide alternative text.

  2. Step 2: Identify the valid syntax

    Only <img src='photo.jpg' alt='A sunny beach'> uses the correct img tag, src and alt attributes, and proper quoting for values. The others use wrong tags (image), incorrect attributes (alttext, description), or unquoted values with spaces.

  3. Final Answer:

    <img src='photo.jpg' alt='A sunny beach'> -> Option C

  4. Quick Check:

    Use alt attribute inside <img> tag [OK]
Hint: Use alt attribute inside <img> tag [OK]
Common Mistakes:
  • Using wrong attribute names like alttext or description
  • Using <image> instead of <img>
  • Failing to properly quote attribute values
3. Consider this HTML snippet:
<img src='logo.png' alt='Company logo' width='200' height='100'>
What is the main SEO benefit of including the alt attribute here?
medium
A. It improves page loading speed
B. It helps search engines understand image content
C. It changes the image size automatically
D. It hides the image from users

Solution

  1. Step 1: Analyze the role of alt text in SEO

    Alt text provides a textual description that search engines can read to understand what the image represents.

  2. Step 2: Identify the SEO benefit

    This helps improve the website's relevance and ranking for related searches.

  3. Final Answer:

    It helps search engines understand image content -> Option B

  4. Quick Check:

    Alt text = SEO image description [OK]
Hint: Alt text helps search engines understand images [OK]
Common Mistakes:
  • Confusing alt text with image size or speed
  • Thinking alt text hides images
  • Assuming alt text changes image appearance
4. A website owner notices their images are loading very slowly. Which of the following is the best way to fix this issue while keeping good SEO practices?
medium
A. Compress images before uploading and keep descriptive alt text
B. Remove all alt text to reduce file size
C. Use very large images for better quality
D. Delete images and replace with text only

Solution

  1. Step 1: Identify the cause of slow loading

    Large image files cause slow loading; compressing reduces file size without losing much quality.

  2. Step 2: Maintain SEO best practices

    Keeping descriptive alt text ensures accessibility and SEO benefits remain intact.

  3. Final Answer:

    Compress images before uploading and keep descriptive alt text -> Option A

  4. Quick Check:

    Compress images + keep alt text = faster and SEO-friendly [OK]
Hint: Compress images but keep alt text for SEO [OK]
Common Mistakes:
  • Removing alt text to save size (hurts SEO/accessibility)
  • Uploading large images without compression
  • Removing images entirely reduces user experience
5. You want to optimize a product page with many images for both SEO and user experience. Which combination of actions is best?
hard
A. Use descriptive alt text, compress images, and add captions for clarity
B. Use generic alt text like 'image1', upload large images, and skip captions
C. Remove alt text, use uncompressed images, and add decorative borders
D. Use alt text only on the first image and ignore others

Solution

  1. Step 1: Combine SEO and user experience best practices

    Descriptive alt text improves SEO and accessibility; compressing images speeds up loading; captions help users understand images.

  2. Step 2: Evaluate other options

    Generic alt text or removing alt text harms SEO; large images slow loading; skipping captions reduces clarity.

  3. Final Answer:

    Use descriptive alt text, compress images, and add captions for clarity -> Option A

  4. Quick Check:

    Alt text + compression + captions = best SEO and UX [OK]
Hint: Combine alt text, compression, and captions for best results [OK]
Common Mistakes:
  • Using vague alt text hurting SEO
  • Uploading large images slowing site
  • Ignoring captions reduces user understanding