Image optimization in Wordpress - Mini Project: Build & Apply

Image Optimization in WordPress

📖 Scenario: You manage a WordPress website with many images. Large images slow down your site and make visitors wait. Optimizing images helps your site load faster and improves user experience.

🎯 Goal: Learn how to optimize images in WordPress by setting up image sizes, configuring compression, and enabling lazy loading for better performance.

📋 What You'll Learn

Create a function to add custom image sizes

Set a compression quality level for JPEG images

Enable lazy loading for images

Hook these functions properly into WordPress

💡 Why This Matters

🌍 Real World

Optimizing images is essential for fast-loading websites, better user experience, and improved SEO rankings.

💼 Career

Web developers and WordPress site managers often optimize images to enhance site performance and meet client requirements.

1

Add Custom Image Sizes

In your theme's functions.php file, create a function called custom_image_sizes that adds two new image sizes using add_image_size: 'small-thumb' with 150x150 pixels cropped, and 'medium-thumb' with 300x200 pixels cropped.

Wordpress

# Your code here to add custom image sizes

Hint

Use add_image_size inside a function hooked to after_setup_theme.

2

Set JPEG Compression Quality

Create a function called set_jpeg_quality that returns 75 to set JPEG compression quality. Hook it to the jpeg_quality filter.

Wordpress

<?php
function custom_image_sizes() {
    add_image_size('small-thumb', 150, 150, true);
    add_image_size('medium-thumb', 300, 200, true);
}
add_action('after_setup_theme', 'custom_image_sizes');

# Your code here to set JPEG quality

Hint

Use a filter hook jpeg_quality to set compression quality.

3

Enable Lazy Loading for Images

Add a function called enable_lazy_loading that adds the attribute loading="lazy" to images. Hook it to the wp_get_attachment_image_attributes filter with parameters $attr, $attachment, and $size. Add loading => lazy to the $attr array and return it.

Wordpress

<?php
function custom_image_sizes() {
    add_image_size('small-thumb', 150, 150, true);
    add_image_size('medium-thumb', 300, 200, true);
}
add_action('after_setup_theme', 'custom_image_sizes');

function set_jpeg_quality() {
    return 75;
}
add_filter('jpeg_quality', 'set_jpeg_quality');

# Your code here to enable lazy loading

Hint

Use the wp_get_attachment_image_attributes filter to add the loading="lazy" attribute.

4

Complete Image Optimization Setup

Ensure all functions custom_image_sizes, set_jpeg_quality, and enable_lazy_loading are hooked properly in your functions.php file as shown. This completes the image optimization setup.

Wordpress

<?php
function custom_image_sizes() {
    add_image_size('small-thumb', 150, 150, true);
    add_image_size('medium-thumb', 300, 200, true);
}
add_action('after_setup_theme', 'custom_image_sizes');

function set_jpeg_quality() {
    return 75;
}
add_filter('jpeg_quality', 'set_jpeg_quality');

function enable_lazy_loading($attr, $attachment, $size) {
    $attr['loading'] = 'lazy';
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'enable_lazy_loading', 10, 3);

# Review and save your functions.php file

Hint

Make sure all hooks are present and functions are complete.

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