Quelle est la meilleure façon d'utiliser l'image sélectionnée pour une conception Web réactive?

J'ai une idée géniale et puisque WordPress s'occupe déjà d'une partie du travail, j'ai juste besoin de trouver une bonne méthode pour que cela fonctionne.

Je travaille sur un projet qui doit être réactif à tous les appareils, qu'il s'agisse d'un PC de bureau ou d'un gadget mobile. Ainsi, je veux que les images soient également réactives, ce qui signifie que les appareils mobiles ne devraient pas charger des images de 50 Ko +.

Pour chaque page ou publication, je peux ajouter une image sélectionnée à l'aide de miniatures de publication qui, en taille réelle, l'image est d'environ 950 x 250 à ~ 60 Ko. Si je charge le site Web sur un iPhone / Android, je ne voudrais pas que l'image de ~ 60 Ko se charge, mais je voudrais plutôt que la petite vignette se charge à sa place.

La méthode par défaut pour les images réactives est de rendre la largeur de l'image à 100% du conteneur parent, ainsi elle se redimensionnera automatiquement si le conteneur parent est également redimensionné. Pas la meilleure méthode pour des images plus grandes.

J'ai pensé à essayer le script d'image réactif de Filament Group , mais je l'ai essayé et cela n'a pas fonctionné correctement. Un moyen d'y parvenir consiste à détecter les agents utilisateurs, mais je préfère ne pas utiliser cette méthode non plus, car les agents utilisateurs peuvent être usurpés.

Voici une autre méthode pour redimensionner des images à la volée , mais cela semble reproduire ce que WordPress a déjà fait.

S'il y a un moyen de le faire avec les images de la galerie multimédia que WordPress a par défaut, avec toutes les vignettes redimensionnées déjà créées, ce serait préférable.

Étape 1:

Définissez deux tailles d'image personnalisées, par exemple:

<?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
?>

Étape 2:

Mettez en œuvre vos moyens choisis pour déterminer le client. Il existe plusieurs façons et la méthode que vous utilisez sort du cadre de cette question. Mais, en supposant que vous disposez d'une méthode qui fonctionne pour vous, affichez le résultat dans une variable, telle que$mobile_device = true;

Étape 3:

Dans vos fichiers de modèle, sortez l'image sous condition, en fonction du client.

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

Remarque: vous pouvez répéter if/else(ou faire a switch) pour plusieurs facteurs de forme (c.-à-d. Tailles d'écran). Ajoutez simplement plusieurs tailles d'image personnalisées et testez conditionnellement pour chaque taille d'écran que vous souhaitez prendre en charge.

La meilleure façon est d'utiliser une grille fluide pour créer le thème WordPress et de supprimer les valeurs de largeur et de hauteur des images sélectionnées via une fonction de mise à l'échelle proportionnelle. Un tutoriel pour rendre les images WordPress réactives :

Méthode 1: le CSS

Ajoutez le code suivant à votre fichier CSS. Cela rendra les images évolutives en fonction de la taille de l'écran.

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

Suppression de la hauteur et de la largeur automatiques dans les <img>balises WordPress

Faites maintenant glisser la fenêtre pour voir la mise à l'échelle de l'image en action. Vous remarquerez que les images de votre blog WordPress évoluent étrangement. Leur mise à l'échelle horizontale fine mais la mise à l'échelle verticale dans les images WordPress sont toutes fausses.

Pour rendre les images redimensionnables proportionnellement dans WordPress, nous devons supprimer les valeurs automatiques de largeur et de hauteur que WordPress ajoute pour les < img >balises.

Par exemple, nous devons changer cela:

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

Pour ça:

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

Pour les images qui se trouvent dans un article ou une page / page de modèle statique, tout ce que vous avez à faire est d'ajouter le CSS ci-dessus au style.cssfichier, puis de supprimer les propriétés ‘width’et ‘height’de la < img >balise dans votre éditeur WordPress. C'est ça!

Mais pour l'image qui est affichée dynamiquement par WordPress, comme les vignettes de publication, la largeur et la hauteur doivent être supprimées dynamiquement à l'aide d'une fonction.

Ajoutez la fonction suivante à votre functions.phpfichier.

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

Ensuite, lorsque vous appelez pour ces images de miniatures dans votre page template.php, remplacez:

the_post_thumbnail();

Avec ça:

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

C'est ça. Faites glisser et redimensionnez le navigateur pour voir vos images WordPress réactives en action!

---

Méthode 2:

Ce qui précède ne fonctionnera pas pour certains thèmes.

Si vous êtes l'un des rares à ne pas fonctionner, vous pouvez toujours résoudre votre problème d'image en utilisant la fonction ci-dessous.

Ajoutez la fonction suivante à votre functions.phpfichier.

Cela supprime les attributs de largeur et de hauteur en ligne des images récupérées avec the_post_thumbnail()et empêche ces attributs d'être ajoutés aux nouvelles images ajoutées à l'éditeur.

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; 
}

Une façon d'y parvenir est de détecter les agents utilisateurs, mais je préfère ne pas utiliser cette méthode non plus, car les agents utilisateurs peuvent être usurpés.

Ce n'est pas une mauvaise méthode et est en fait la norme de l'industrie, un bon WURFL a une cote de très haute précision, ceux que j'ai utilisés et testés ont toujours donné des résultats solides et des tests indépendants (au-dessus de ce que je prendrais la peine de faire) semblent les avoir dans la gamme 98% +. Peu importe si un bot boiteux usurpe un agent utilisateur, il n'est de toute façon pas là pour une bonne raison.

Pour l'étape 2, je pense que l'une ou l'autre méthode se résume à laquelle est en fait plus rapide, une requête multimédia WURFL ou CSS soutenue par PHP.

Vous devez d'abord définir «le meilleur». Ma définition serait la suivante: restitue l'image avec l'effet prévu par le concepteur sur n'importe quel appareil ou écran restitue l'image avec la même qualité que l'original consomme le minimum absolu de ressources système et humaines (c.-à-d. Bande passante, CPU, temps concepteur / programmeur)

Voici les approches que j'ai vues jusqu'à présent:

1. Chargez l'image en taille réelle et demandez au navigateur de la réduire pour l'adapter à la mise en page. Définissez la largeur maximale de l'image à 100% et réduisez-la en fonction de la largeur de son conteneur.

Avantages: ne nécessite pratiquement aucun effort de mise en œuvre, compatible avec tous les navigateurs et pris en charge par les anciens navigateurs.

Inconvénients: télécharge souvent plus de données que nécessaire, puis passe des cycles CPU sur le client à les réduire (lent). Vous pouvez vous retrouver avec des images de très mauvaise qualité en fonction de l'algorithme de mise à l'échelle du navigateur. Aucune possibilité de direction artistique et impossible d'adapter l'image pour les affichages de type rétine.

2. Utilisez les requêtes multimédias pour lire les propriétés du client et récupérer l'une des nombreuses images personnalisées pour différents points d'arrêt dans votre conception. (Le propose HTML Responsive Images Extension et les balises d'attribut srcset travaillent sur l'intégration de cette approche dans la spécification HTML).

Avantages: téléchargement plus rapide sur les appareils mobiles. Peut gérer les écrans de type rétine. Amélioration de la qualité de l'image car les images ont, espérons-le, été traitées à l'aide d'une méthode de haute qualité. La direction artistique devient possible.

Inconvénients: quelqu'un doit passer du temps à traiter, recadrer et gérer plusieurs versions de la même image. Plus de codage: vous devez maintenant épeler chaque version de l'image d'une certaine manière et créer des requêtes multimédias pour toutes les mises en page souhaitées. Répétez ce qui précède pour chaque image que vous servez. Ne fonctionnera que pour les navigateurs prenant en charge CSS3 Media Queries ou les nouvelles balises.

3. Faire le backend Optimiser les images pour n'importe quel écran ou disposition en utilisant une seule image source à la volée. À mon avis, cela équivaut à traiter les images réactives comme une tâche de négociation de contenu un peu comme HTTP.

Avantages: Designer n'a pas à passer de temps à traiter des images et à gérer plusieurs versions. L'image à la taille optimale est envoyée à chaque fois. Peut gérer les affichages de type rétine et s'adapter dynamiquement à la direction artistique (bien qu'avec un effort supplémentaire - il faut savoir où se concentrer). Aucun balisage spécial ou supplémentaire requis (mise en garde ci-dessous). Compatible avec plusieurs navigateurs et fonctionnera pour les navigateurs plus anciens.

Inconvénients: devez capturer et transmettre des informations sur le navigateur du client et les propriétés de l'écran. La première fois qu'une image se charge peut être plus lente que dans toute autre approche car l'image doit être traitée (elle est généralement mise en cache pour les demandes ultérieures).