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.