Cómo servir diferentes imágenes según el tamaño de pantalla en WordPress

add_image_size sí cambia el tamaño real del archivo de la imagen.

Lo que he intentado:

function odevice_image_sizes() {
    add_image_size( 'iphone-size', 300, 100, true ); // Por supuesto, las dimensiones no son correctas...
    add_image_size( 'tablet-size', 600, 300, true );
}


function show_odevice_at_img_select($sizes) {
    $sizes['iphone-size'] = __( 'Tamaño de imagen para iPhone' );
    $sizes['tablet-size'] = __( 'Tamaño de imagen para tablet' );

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

Cuando verifiques el tipo de dispositivo (iPhone o tablet), puedes usar las imágenes personalizadas así:

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

No puedo enviarte una captura de pantalla ya que no tengo la reputación necesaria. Pero puedes ver en la carpeta de uploads que las imágenes subidas con tus dimensiones personalizadas tendrán un tamaño diferente (en el disco), por lo que consumirán un ancho de banda diferente. Cuanto más pequeñas sean las dimensiones, menor será el ancho de banda.

panos lo entendió correctamente. Puedes usar add_image_size para crear imágenes de diferentes tamaños para diferentes propósitos. Para continuar un poco más con tu pregunta, quiero agregar:

Una vez que hayas creado diferentes tamaños de imágenes con add_image_size, puedes servirlas para diferentes dispositivos usando el plugin de Wordpress Mobble (o cualquier otro reconocimiento de dispositivos basado en php) http://wordpress.org/plugins/mobble

Simplemente haz una declaración if else como esta:

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

La forma más fácil es usando css

Yo uso el siguiente código en mi sitio.

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

Espero que el código css anterior pueda ayudarte.