Image optimization in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding WordPress Image Sizes

In WordPress, what is the purpose of the add_image_size() function?

A It registers a new custom image size to be generated when images are uploaded.

B It compresses existing images in the media library to reduce file size.

C It deletes unused images from the media library to save space.

D It converts images to WebP format automatically on upload.

💡 Hint

Think about how WordPress creates different image versions for different uses.

The add_image_size() function lets you define new image sizes that WordPress will create when you upload images. This helps serve optimized images for different parts of your site.

❓ component_behavior

intermediate

Behavior of Lazy Loading in WordPress

What happens when you enable native lazy loading for images in WordPress?

A Images are converted to SVG format for faster rendering.

B All images load immediately but at a lower resolution to save bandwidth.

C Images load only when they are about to enter the browser viewport, improving page speed.

D Images are preloaded before the page content to avoid delays.

💡 Hint

Lazy loading delays image loading until needed.

Native lazy loading delays loading images until they are near the visible part of the page, which reduces initial page load time and saves bandwidth.

📝 Syntax

advanced

Correct Syntax for WebP Support in WordPress

Which code snippet correctly enables WebP image support in WordPress by adding WebP to allowed mime types?

A add_filter('mime_types', function($mimes) { $mimes['webp'] = 'image/webp'; return $mimes; });

B add_filter('mime_types', function($mimes) { $mimes['webp'] = 'image/jpeg'; return $mimes; });

C add_action('mime_types', function($mimes) { $mimes['webp'] = 'image/webp'; });

D add_filter('upload_mimes', function($mimes) { $mimes['webp'] = 'image/png'; return $mimes; });

💡 Hint

Check the correct hook and mime type for WebP.

The mime_types filter is used to add new mime types. The correct mime type for WebP is image/webp. The function must return the modified array.

🔧 Debug

advanced

Debugging Image Compression Plugin Conflict

A WordPress site uses two image compression plugins. After activating both, images are not compressed properly. What is the most likely cause?

A The server does not have enough storage space for compressed images.

B WordPress does not support image compression plugins.

C The images are already compressed and cannot be compressed further.

D The plugins conflict because both try to compress images on upload, causing errors.

💡 Hint

Think about how plugins might interfere with each other.

When two plugins try to compress images on upload, they can conflict and prevent proper compression. It's best to use only one compression plugin at a time.

❓ state_output

expert

Result of Custom Image Size Usage in Theme

Given this code in a WordPress theme's functions.php:

add_image_size('custom-thumb', 300, 200, true);
the_post_thumbnail('custom-thumb');

What will be the output behavior when displaying the post thumbnail?

Wordpress

add_image_size('custom-thumb', 300, 200, true);
the_post_thumbnail('custom-thumb');

A The post thumbnail is displayed at original size ignoring the custom size.

B The post thumbnail is displayed cropped to exactly 300x200 pixels.

C The post thumbnail is displayed stretched to 300x200 without cropping.

D The_post_thumbnail function throws an error because 'custom-thumb' is not a default size.

💡 Hint

Check the meaning of the last parameter in add_image_size.

The last parameter true enables hard cropping, so the image is cropped to exactly 300x200 pixels when displayed.

Practice

1. What is the main benefit of image optimization in WordPress websites?

easy

A. It makes the website load faster by reducing image file sizes.

B. It increases the image resolution for better quality.

C. It adds watermarks to images automatically.

D. It changes image colors to grayscale.

Solution

1. Step 1: Understand image optimization purpose

   Image optimization reduces file sizes to improve loading speed.

2. Step 2: Compare options

   Only It makes the website load faster by reducing image file sizes. mentions faster loading by reducing file size, which is correct.

3. Final Answer:

   It makes the website load faster by reducing image file sizes. -> Option A

4. Quick Check:

   Image optimization = faster loading [OK]

Hint: Think about website speed and image file size relation [OK]

Common Mistakes:

• Confusing optimization with increasing image quality
• Thinking optimization changes image colors
• Assuming optimization adds watermarks

2. Which WordPress function is used to resize images for optimization?

easy

A. wp_get_image_editor()

B. wp_enqueue_script()

C. get_post_meta()

D. add_theme_support()

Solution

1. Step 1: Identify image resizing function

   wp_get_image_editor() provides tools to resize and edit images.

2. Step 2: Eliminate unrelated functions

   Other options relate to scripts, metadata, or theme features, not image resizing.

3. Final Answer:

   wp_get_image_editor() -> Option A

4. Quick Check:

   Image resizing = wp_get_image_editor() [OK]

Hint: Look for functions with 'image' and 'editor' in the name [OK]

Common Mistakes:

• Choosing functions unrelated to images
• Confusing script or theme functions with image functions
• Not knowing WordPress image API

3. What will this WordPress code snippet do?

add_filter('wp_generate_attachment_metadata', function($metadata) {
  $metadata['sizes']['thumbnail']['width'] = 150;
  return $metadata;
});

medium

A. Prevent images from being uploaded.

B. Change the thumbnail image width to 150 pixels during upload.

C. Add a new image size called 'thumbnail' with width 150.

D. Delete all image thumbnails from the media library.

Solution

1. Step 1: Understand the filter used

   'wp_generate_attachment_metadata' modifies image metadata after upload.

2. Step 2: Analyze code effect

   The code sets the 'thumbnail' size width to 150 pixels in metadata, changing thumbnail size.

3. Final Answer:

   Change the thumbnail image width to 150 pixels during upload. -> Option B

4. Quick Check:

   Filter modifies thumbnail width = 150 [OK]

Hint: Filters modify data; here it changes thumbnail width [OK]

Common Mistakes:

• Thinking it deletes thumbnails
• Assuming it adds new image sizes
• Believing it blocks uploads

4. You added this code to optimize images but thumbnails are not resizing:

add_filter('wp_generate_attachment_metadata', function($metadata) {
  $metadata['sizes']['thumbnail']['width'] = 150;
  return $metadata;
});

What is the likely problem?

medium

A. You must use 'wp_enqueue_scripts' instead of this filter.

B. The filter name is incorrect and never runs.

C. The code changes metadata but does not regenerate thumbnails.

D. Thumbnails cannot be resized in WordPress.

Solution

1. Step 1: Understand what the code does

   The code changes metadata but does not recreate image files.

2. Step 2: Identify missing step

   Thumbnails must be regenerated to apply new sizes; metadata alone is not enough.

3. Final Answer:

   The code changes metadata but does not regenerate thumbnails. -> Option C

4. Quick Check:

   Metadata change ≠ thumbnail regeneration [OK]

Hint: Changing metadata needs regeneration to update images [OK]

Common Mistakes:

• Assuming filter runs incorrectly
• Confusing script enqueue with image filters
• Believing thumbnails cannot be resized

5. You want to serve WebP images in WordPress for better performance but keep JPEG fallback. Which approach is best?

hard

A. Convert images to PNG format for better compression.

B. Rename all JPEG files to .webp manually and upload them.

C. Disable JPEG uploads and only allow WebP images.

D. Use a plugin that generates WebP versions and serves them with fallback support.

Solution

1. Step 1: Understand WebP and fallback needs

   WebP is modern and efficient but not supported by all browsers, so fallback is needed.

2. Step 2: Evaluate options

   Only Use a plugin that generates WebP versions and serves them with fallback support. uses a plugin to generate WebP and fallback automatically, which is best practice.

3. Final Answer:

   Use a plugin that generates WebP versions and serves them with fallback support. -> Option D

4. Quick Check:

   WebP + fallback = plugin solution [OK]

Hint: Use plugins for WebP with fallback, not manual renaming [OK]

Common Mistakes:

• Manually renaming files breaks compatibility
• Disabling JPEGs removes fallback
• Using PNG instead of WebP for compression