Image optimization in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add image alt text in WordPress.

Wordpress

add_image_size( 'custom-size', 800, 600, [1] );

Drag options to blanks, or click blank then click option'

Anull

Bfalse

Ctrue

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using false disables cropping and may cause unexpected image sizes.

Using 'auto' or null is invalid here.

The third parameter controls cropping. Setting it to true crops the image to exact dimensions.

2fill in blank

medium

Complete the code to enable lazy loading for images in WordPress.

Wordpress

add_filter( 'wp_lazy_loading_enabled', [1] );

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cnull

D'lazy'

Attempts:

3 left

💡 Hint

Common Mistakes

Using false disables lazy loading.

Passing a string like 'lazy' is incorrect.

Setting the filter to true enables lazy loading for images.

3fill in blank

hard

Fix the error in the code to resize an image on upload.

Wordpress

function resize_uploaded_image( $image ) {
  $resized = wp_get_image_editor( $image[ 'file' ] );
  if ( ! [1] ) {
    return $image;
  }
  $resized->resize( 1024, 768, true );
  $resized->save( $image[ 'file' ] );
  return $image;
}

Drag options to blanks, or click blank then click option'

A$resized === true

B$resized == null

C!$resized

D$resized === false

Attempts:

3 left

💡 Hint

Common Mistakes

Using loose comparison may cause unexpected behavior.

Checking for true instead of false is incorrect.

The wp_get_image_editor returns false on failure, so check explicitly for === false.

4fill in blank

hard

Fill both blanks to create a filter that compresses JPEG images on upload.

Wordpress

add_filter( 'jpeg_quality', function( $quality ) {
  return [1];
} , [2] );

Drag options to blanks, or click blank then click option'

A75

B90

C10

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using too low quality causes poor image appearance.

Using too high priority number may delay filter application.

JPEG quality is set to 75 for good compression. The priority 90 ensures the filter runs late.

5fill in blank

hard

Fill all three blanks to create a shortcode that outputs an optimized image with alt text.

Wordpress

function optimized_image_shortcode( $atts ) {
  $atts = shortcode_atts( [
    'src' => '',
    'alt' => '',
    'size' => 'medium'
  ], $atts );
  return wp_get_attachment_image( [1], [2], false, [ 'alt' => [3] ] );
}
add_shortcode( 'opt_image', 'optimized_image_shortcode' );

Drag options to blanks, or click blank then click option'

A$atts['src']

B$atts['size']

C$atts['alt']

D$atts['title']

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong attribute keys causes missing images or alt text.

Passing title instead of alt text breaks accessibility.

The shortcode uses src for the image ID, size for image size, and alt for alt text.