Как отдавать разные изображения в зависимости от размера экрана в WordPress

add_image_size изменяет фактический размер файла изображения.

Что я пробовал:

function odevice_image_sizes() {
    add_image_size( 'iphone-size', 300, 100, true ); // Конечно, размеры указаны неверно...
    add_image_size( 'tablet-size', 600, 300, true );
}


function show_odevice_at_img_select($sizes) {
    $sizes['iphone-size'] = __( 'Размер изображения для iPhone' );
    $sizes['tablet-size'] = __( 'Размер изображения для планшета' );

    return $sizes;
}
add_action( 'init', 'odevice_image_sizes' );
add_filter('image_size_names_choose', 'show_odevice_at_img_select');

При проверке типа устройства (iPhone или планшет), вы можете использовать пользовательские изображения следующим образом

<?php the_post_thumbnail( 'iphone-size' ); ?>

Я не могу отправить вам скриншот, так как у меня недостаточно репутации. Но вы можете увидеть в папке uploads, что изображения, загруженные с вашими пользовательскими размерами, будут иметь разный размер (на диске), поэтому они будут потреблять разную пропускную способность. Чем меньше размеры, тем меньше пропускная способность.

panos правильно понял. Вы можете использовать функцию add_image_size для создания изображений разных размеров для разных целей. Продолжая немного дальше ваш вопрос, я хочу добавить:

После того как вы создали разные размеры изображений с помощью add_image_size, вы можете отдавать их для разных устройств, используя плагин WordPress Mobble (или любую другую систему распознавания устройств на основе PHP) http://wordpress.org/plugins/mobble

Просто сделайте простое условие if else примерно так:

if ( is_mobile() ) : the_post_thumbnail( 'mobile-size' );
elseif( is_tablet() ) : the_post_thumbnail( 'tablet-size' );
else : the_post_thumbnail( 'full' );
endif;

Самый простой способ - использование CSS

На своем сайте я использую следующий код:

.your_div img {
height:auto;
max-width:100%;
}

Надеюсь, этот CSS-код будет вам полезен.