Image alt text and optimization in SEO Fundamentals - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of alt text

What is the main purpose of using alt text for images on a website?

A To provide a description of the image for screen readers and improve accessibility

B To increase the file size of the image for better quality

C To hide the image from search engines

D To add decorative effects to the image

💡 Hint

Think about users who cannot see images and how they understand the content.

Alt text describes images for people using screen readers and helps search engines understand image content, improving accessibility and SEO.

📋 Factual

intermediate

Best practice for writing alt text

Which of the following is the best practice when writing alt text for an image?

A Repeat the image filename as the alt text

B Write a short, clear description that conveys the image’s purpose or content

C Use a detailed description including every color and shape in the image

D Leave the alt text empty for all images

💡 Hint

Think about what helps users understand the image quickly and clearly.

Good alt text is concise and meaningful, describing the image’s purpose without unnecessary detail.

🔍 Analysis

advanced

Impact of missing alt text on SEO and accessibility

What is the likely impact if images on a website do not have alt text?

A The images will be hidden from all users

B The website will load faster because alt text is not needed

C Images will automatically be described by the browser, so no impact occurs

D Search engines may not understand the image content, and users with screen readers will miss important information

💡 Hint

Consider how search engines and assistive technologies use alt text.

Without alt text, images are invisible to screen readers and search engines, reducing accessibility and SEO effectiveness.

🚀 Application

advanced

Optimizing image file size for web performance

Which method is best to optimize images for faster website loading without losing noticeable quality?

A Compress images using appropriate formats like JPEG or WebP and resize them to needed dimensions

B Use images with transparent backgrounds only

C Convert all images to BMP format for better quality

D Use large, high-resolution images without compression

💡 Hint

Think about balancing image quality and file size for quick loading.

Compressing and resizing images reduces file size, improving load times while maintaining good visual quality.

❓ Reasoning

expert

Choosing alt text for decorative images

When should an image have an empty alt attribute (alt="") instead of descriptive alt text?

A When the image is a logo that links to the homepage

B When the image contains important information that users must understand

C When the image is purely decorative and does not add meaningful content to the page

D When the image is broken and does not load

💡 Hint

Consider how screen readers treat images with empty alt attributes.

Empty alt attributes tell screen readers to skip decorative images, avoiding unnecessary noise for users.

Practice

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