WordPress Custom Image Sizes

WordPress Custom Image Sizes

Create custom image sizes for your WordPress theme and make them available in the media uploader and featured image selector.

// Add custom image sizes
function add_custom_image_sizes() {
    // Hero image
    add_image_size('hero-large', 1920, 800, true); // Hard crop

    // Featured images
    add_image_size('featured-large', 1200, 600, true);
    add_image_size('featured-medium', 800, 400, true);
    add_image_size('featured-small', 400, 200, true);

    // Blog grid
    add_image_size('blog-grid', 600, 400, true);

    // Portfolio
    add_image_size('portfolio-large', 1000, 800, false); // Soft crop
    add_image_size('portfolio-thumbnail', 400, 300, true);

    // Widgets
    add_image_size('widget-thumb', 150, 150, true);

    // Square images for social sharing
    add_image_size('square', 1200, 1200, true);

    // Mobile hero
    add_image_size('hero-mobile', 800, 600, true);
}
add_action('after_setup_theme', 'add_custom_image_sizes');

// Add custom sizes to media uploader
function custom_image_size_names($sizes) {
    return array_merge($sizes, array(
        'hero-large'          => __('Hero Image (1920x800)'),
        'featured-large'      => __('Featured Large (1200x600)'),
        'featured-medium'     => __('Featured Medium (800x400)'),
        'featured-small'      => __('Featured Small (400x200)'),
        'blog-grid'           => __('Blog Grid (600x400)'),
        'portfolio-large'     => __('Portfolio Large'),
        'portfolio-thumbnail' => __('Portfolio Thumbnail'),
        'widget-thumb'        => __('Widget Thumbnail'),
        'square'              => __('Square (1200x1200)'),
        'hero-mobile'         => __('Mobile Hero'),
    ));
}
add_filter('image_size_names_choose', 'custom_image_size_names');

Display Custom Image Size

// In your theme templates
<?php
if (has_post_thumbnail()) {
    the_post_thumbnail('featured-large', array('class' => 'featured-image'));
}
?>

// Get image URL
<?php
$image_url = get_the_post_thumbnail_url(get_the_ID(), 'hero-large');
echo '<img src="' . esc_url($image_url) . '" alt="' . get_the_title() . '">';
?>

// Get image with attributes
<?php
$image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'blog-grid');
if ($image) {
    echo '<img src="' . $image[0] . '" width="' . $image[1] . '" height="' . $image[2] . '">';
}
?>

Responsive Images with Srcset

// Add custom sizes to srcset
function custom_image_srcset_sizes($sizes, $size) {
    if ($size === 'featured-large') {
        return '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px';
    }
    return $sizes;
}
add_filter('wp_calculate_image_sizes', 'custom_image_srcset_sizes', 10, 2);

// Custom responsive image function
function get_responsive_image($attachment_id, $size = 'large', $class = '') {
    $image_src = wp_get_attachment_image_src($attachment_id, $size);
    $image_srcset = wp_get_attachment_image_srcset($attachment_id, $size);
    $image_sizes = wp_get_attachment_image_sizes($attachment_id, $size);
    $image_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);

    if (!$image_src) {
        return '';
    }

    $html = sprintf(
        '<img src="%s" srcset="%s" sizes="%s" alt="%s" class="%s">',
        esc_url($image_src[0]),
        esc_attr($image_srcset),
        esc_attr($image_sizes),
        esc_attr($image_alt),
        esc_attr($class)
    );

    return $html;
}

Regenerate Thumbnails Function

// Regenerate image sizes for a specific attachment
function regenerate_image_sizes($attachment_id) {
    $file = get_attached_file($attachment_id);

    if (!file_exists($file)) {
        return false;
    }

    require_once(ABSPATH . 'wp-admin/includes/image.php');

    $metadata = wp_generate_attachment_metadata($attachment_id, $file);

    if (is_wp_error($metadata)) {
        return false;
    }

    wp_update_attachment_metadata($attachment_id, $metadata);

    return true;
}

// Bulk regenerate for all images
function bulk_regenerate_thumbnails() {
    $images = get_posts(array(
        'post_type'      => 'attachment',
        'post_mime_type' => 'image',
        'post_status'    => 'inherit',
        'posts_per_page' => -1,
    ));

    foreach ($images as $image) {
        regenerate_image_sizes($image->ID);
    }
}

// Run once with: bulk_regenerate_thumbnails();

Disable Default Image Sizes

// Disable default WordPress image sizes
function disable_default_image_sizes($sizes) {
    unset($sizes['thumbnail']);    // 150px
    unset($sizes['medium']);       // 300px
    unset($sizes['medium_large']); // 768px
    unset($sizes['large']);        // 1024px
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_default_image_sizes');

// Disable other default sizes
function disable_other_image_sizes() {
    remove_image_size('1536x1536'); // 2x medium_large
    remove_image_size('2048x2048'); // 2x large
}
add_action('init', 'disable_other_image_sizes');

Lazy Load Images

// Add lazy loading to images
function add_lazy_loading_to_images($attr, $attachment) {
    $attr['loading'] = 'lazy';
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'add_lazy_loading_to_images', 10, 2);

Set Max Image Upload Size

// Limit image upload dimensions
function limit_image_upload_size($file) {
    $max_width = 2400;
    $max_height = 2400;

    if ($file['type'] == 'image/jpeg' || $file['type'] == 'image/png') {
        list($width, $height) = getimagesize($file['tmp_name']);

        if ($width > $max_width || $height > $max_height) {
            $file['error'] = sprintf(
                'Image dimensions too large. Maximum allowed: %dx%d pixels.',
                $max_width,
                $max_height
            );
        }
    }

    return $file;
}
add_filter('wp_handle_upload_prefilter', 'limit_image_upload_size');

Features

• Custom Sizes: Create unlimited image sizes
• Media Library: Sizes appear in media uploader
• Responsive: Built-in srcset support
• Performance: Optimized images for different contexts
• Flexible Cropping: Hard or soft crop options
• Regeneration: Rebuild thumbnails when needed