Qual è il modo migliore per utilizzare l'immagine in primo piano per un web design reattivo?

Ho un'idea geniale e poiché WordPress si occupa già di alcuni lavori, ho solo bisogno di trovare un buon metodo per farlo funzionare.

Sto lavorando a un progetto che deve rispondere a tutti i dispositivi, sia che si tratti di un PC desktop o di un dispositivo mobile. Pertanto, voglio che anche le immagini siano reattive, il che significa che i dispositivi mobili non dovrebbero caricare immagini da 50 KB +.

Per ogni pagina o post, posso aggiungere un'immagine in primo piano usando le miniature dei post che, a grandezza naturale, l'immagine è di circa 950x250 a ~ 60 KB. Se carico il sito Web su un iPhone / Android, non vorrei caricare l'immagine di ~ 60 KB, ma preferirei caricare la piccola miniatura al suo posto.

Il metodo predefinito per le immagini reattive è di rendere la larghezza dell'immagine al 100% del contenitore principale, quindi ridimensionerà automaticamente se viene ridimensionato anche il contenitore principale. Non è il metodo migliore per immagini più grandi.

Ho pensato di provare lo script di immagini responsive del Filament Group , ma l'ho provato e non ha funzionato bene. Un modo per raggiungere questo obiettivo è attraverso il rilevamento di user-agent, ma preferirei non utilizzare questo metodo poiché gli user-agent possono essere falsificati.

Ecco un altro metodo per ridimensionare le immagini al volo , ma questo sembra duplicare ciò che WordPress ha già fatto.

Se esiste un modo per farlo con le immagini della Galleria multimediale che WordPress è predefinito, con tutte le miniature ridimensionate già create, sarebbe preferibile.

Passo 1:

Definire due dimensioni di immagine personalizzate, ad esempio:

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Passo 2:

Implementare i mezzi scelti per determinare il cliente. Esistono diversi modi e il metodo utilizzato non rientra nell'ambito di questa domanda. Ma, supponendo che tu abbia un metodo che funzioni per te, genera il risultato in alcune variabili, come$mobile_device = true;

Passaggio 3:

Nei tuoi file modello, visualizza l'immagine in modo condizionale, in base al client.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Nota: è possibile ripetere if/else(o eseguire una switch) per più fattori di forma (ad esempio dimensioni dello schermo). Basta aggiungere più dimensioni di immagine personalizzate e testare condizionatamente per ogni dimensione di schermo che si desidera supportare.

Il modo migliore è utilizzare una griglia fluida per creare il tema WordPress e rimuovere i valori di larghezza e altezza delle immagini in primo piano tramite una funzione per il ridimensionamento proporzionale. Un tutorial su come rendere reattive le immagini di WordPress :

Metodo 1: CSS

Aggiungi il seguente codice al tuo file CSS. Ciò renderà le immagini scalabili in base alle dimensioni dello schermo.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Rimozione automatica di altezza e larghezza nei <img>tag WordPress

Ora trascina la finestra per vedere il ridimensionamento dell'immagine in azione. Noterai che le immagini nel tuo blog WordPress si ridimensionano in modo strano. Il ridimensionamento orizzontale va bene, ma il ridimensionamento verticale nelle immagini di WordPress è tutto sbagliato.

Per rendere le immagini ridimensionabili in modo proporzionale in WordPress, dobbiamo rimuovere i valori di larghezza e altezza automatici che WordPress aggiunge per i < img >tag.

Ad esempio, dobbiamo cambiare questo:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

A questo:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

Per le immagini che si trovano in un post o in una pagina / pagina modello statica, tutto ciò che devi fare è aggiungere il CSS sopra al style.cssfile, quindi rimuovere le proprietà ‘width’e ‘height’dal < img >tag nell'editor di WordPress. Questo è tutto!

Ma per l'immagine che viene visualizzata in modo dinamico da WordPress, come ad esempio le anteprime dei post, la larghezza e l'altezza devono essere rimosse in modo dinamico usando una funzione.

Aggiungi la seguente funzione al tuo functions.phpfile.

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

Quindi quando chiedi quelle immagini in miniatura nella tua pagina template.php, sostituisci:

the_post_thumbnail();

Con questo:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

Questo è tutto. Trascina e ridimensiona il browser per vedere le tue immagini WordPress reattive in azione!

---

Metodo 2:

Quanto sopra non funzionerà per alcuni temi.

Se sei uno dei pochi che non ha funzionato, puoi comunque risolvere il problema dell'immagine usando la funzione seguente.

Aggiungi la seguente funzione al tuo functions.phpfile.

Ciò rimuove gli attributi di larghezza e altezza incorporati dalle immagini recuperate con the_post_thumbnail()e impedisce che tali attributi vengano aggiunti a nuove immagini aggiunte all'editor.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}

Un modo per raggiungere questo obiettivo è attraverso il rilevamento di user-agent, ma preferirei non utilizzare questo metodo poiché gli user-agent possono essere falsificati.

Questo non è un cattivo metodo ed è in realtà lo standard del settore, un buon WURFL ha un punteggio di precisione molto elevato, quelli che ho usato e testato hanno sempre restituito risultati solidi e test indipendenti (al di sopra di quello che mi preoccuperei fare) sembrano averli in l'intervallo del 98% +. Chi se ne frega se qualche bot zoppo sta falsificando un user-agent, non sono comunque lì per una buona ragione.

Per il passaggio 2 penso che uno dei due metodi scenda a quello che è in realtà più veloce, una query media WURFL o CSS supportata da PHP.

Per prima cosa devi definire il "migliore". La mia definizione sarebbe: Rende l'immagine con l'effetto previsto dal progettista su qualsiasi dispositivo o schermo Rende l'immagine con la stessa qualità dell'originale Consuma la quantità minima assoluta di sistema e risorse umane (ovvero larghezza di banda, CPU, tempo di progettazione / programmazione)

Ecco gli approcci che ho visto finora:

1. Carica l'immagine a schermo intero e fai ridimensionare il browser per adattarlo al layout. Definisci la larghezza massima dell'immagine come 100% e ridimensionala in base alla larghezza del suo contenitore.

Pro: non richiede quasi alcuno sforzo per implementare, compatibile con più browser e supportato da browser meno recenti.

Contro: spesso scaricare più dati del necessario e quindi spendere i cicli della CPU sul client ridimensionandoli (lentamente). Potresti ritrovarti con immagini di qualità molto scadente a seconda dell'algoritmo di ridimensionamento del browser. Nessuna possibilità di direzione artistica e impossibile adattare l'immagine per display di tipo retina.

2. Utilizzare le query multimediali per leggere le proprietà del client e recuperare una delle numerose immagini personalizzate per diversi punti di interruzione nel progetto. (The propone l' estensione HTML delle immagini reattive e i tag degli attributi srcset stanno lavorando per integrare questo approccio nelle specifiche HTML).

Pro: download più veloce su dispositivi mobili. Può gestire display di tipo retina. Miglioramento della qualità delle immagini poiché si spera che le immagini siano state elaborate utilizzando un metodo di alta qualità. La direzione artistica diventa possibile.

Contro: qualcuno deve dedicare tempo all'elaborazione, al ritaglio e alla gestione di più versioni della stessa immagine. Più codice: ora devi precisare ogni versione dell'immagine in qualche modo e creare media query per tutti i layout desiderati. Ripeti quanto sopra per ogni immagine che servi. Funzionerà solo per i browser che supportano Media Query CSS3 o i nuovi tag.

3. Crea il back-end Ottimizza le immagini per qualsiasi schermo o layout utilizzando una singola immagine sorgente al volo. Secondo me, questo equivale a trattare le immagini reattive come un'attività di negoziazione dei contenuti molto simile a HTTP.

Pro: Designer non deve perdere tempo a elaborare immagini e gestire più versioni. L'immagine di dimensioni ottimali viene inviata ogni volta. Può gestire display di tipo retina e adattarsi dinamicamente alla direzione artistica (anche se con qualche sforzo in più - deve sapere dove mettere a fuoco). Nessun markup speciale o extra richiesto (avvertenza di seguito). Compatibile con più browser e funzionerà con browser meno recenti.

Contro: devono acquisire e trasmettere informazioni sul browser del client e le proprietà dello schermo. La prima volta che un'immagine viene caricata potrebbe essere più lenta rispetto a qualsiasi altro approccio poiché l'immagine deve essere elaborata (in genere viene memorizzata nella cache per richieste successive).