Come servire immagini diverse in base alla dimensione dello schermo con WordPress

add_image_size modifica effettivamente la dimensione del file dell'immagine.

Quello che ho provato:

function odevice_image_sizes() {
    add_image_size( 'iphone-size', 300, 100, true ); //Ovviamente le dimensioni non sono corrette...
    add_image_size( 'tablet-size', 600, 300, true );
}


function show_odevice_at_img_select($sizes) {
    $sizes['iphone-size'] = __( 'Dimensione immagine per iPhone' );
    $sizes['tablet-size'] = __( 'Dimensione immagine per tablet' );

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

Quando controlli il tipo di dispositivo (iPhone o tablet), puoi usare le immagini personalizzate in questo modo

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

Non posso inviarti uno screenshot poiché non ho la reputazione necessaria. Ma puoi verificare nella cartella uploads che le immagini caricate con le tue dimensioni personalizzate avranno dimensioni diverse (sul disco), quindi consumeranno una banda differente. Minori sono le dimensioni, minore sarà la banda utilizzata.

panos ha centrato il punto. Puoi usare add_image_size per creare immagini di dimensioni diverse per scopi differenti. Per approfondire un po' la tua domanda, voglio aggiungere:

Una volta che hai creato diverse dimensioni di immagini con add_image_size, puoi servirle per dispositivi diversi utilizzando il plugin WordPress Mobble (o qualsiasi altro riconoscimento di dispositivo basato su php) http://wordpress.org/plugins/mobble

Basta fare un semplice if else come questo:

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

Il modo più semplice è utilizzare il CSS

Io utilizzo il seguente codice sul mio sito.

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

Spero che il codice CSS sopra riportato possa esserti utile.