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

Need a 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

Need a 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

Need a 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

Need a hint?

Make sure all hooks are present and functions are complete.