Cum pot servi imagini diferite în funcție de dimensiunea ecranului în WordPress

add_image_size modifică dimensiunea reală a fișierului imagine.

Ceea ce am încercat:

function odevice_image_sizes() {
    add_image_size( 'iphone-size', 300, 100, true );//Bineînțeles că dimensiunile nu sunt corecte...
    add_image_size( 'tablet-size', 600, 300, true );
}


function show_odevice_at_img_select($sizes) {
    $sizes['iphone-size'] = __( 'Dimensiune imagine pentru iPhone' );
    $sizes['tablet-size'] = __( 'Dimensiune imagine pentru tabletă' );

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

Când verifici tipul dispozitivului (iPhone sau tabletă), poți folosi imaginile personalizate astfel:

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

Nu pot să vă trimit o captură de ecran deoarece nu am reputația necesară. Dar puteți vedea în folderul uploads că imaginile încărcate cu dimensiunile personalizate vor avea dimensiuni diferite (pe disc), deci vor consuma lățime de bandă diferită. Cu cât dimensiunile sunt mai mici, cu atât consumul de lățime de bandă este mai mic.

panos a avut dreptate. Poți utiliza funcția add_image_size pentru a crea imagini de diferite dimensiuni pentru diferite scopuri. Pentru a continua puțin mai departe cu întrebarea ta, vreau să adaug:

Odată ce ai creat dimensiuni diferite de imagini cu add_image_size, le poți servi pentru diferite dispozitive folosind pluginul Wordpress Mobble (sau orice altă recunoaștere a dispozitivului bazată pe php) http://wordpress.org/plugins/mobble

Pur și simplu folosește o instrucțiune if-else simplă, cam așa:

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

Cea mai ușoară metodă este utilizarea css

Eu folosesc următorul cod pe site-ul meu.

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

Sper că codul css de mai sus vă poate ajuta.