Tag : Image

Optimiser facilement la version mobile de son blog

Aujourd’hui avoir une version mobile de son site internet est crucial, Google y attache d’ailleurs maintenant beaucoup d’importance, alors si vous n’avez pas encore de version mobile ou responsive vous savez sur quoi travailler dans les prochains jours. Le soucis avec les sites avec des versions responsive c’est le poids des images et donc a fortiori le poids total de la page et donc le temps de chargement des pages.

Avoir une version responsive est essentielle mais avoir une solution optimisée pour proposer des images adaptées à cette version est aussi très important. Le problème avec WordPress c’est que l’outil n’est pas forcément conçu pour répondre à cette problématique. En effet, lors de l’édition d’un article vous allez choisir des images et donc des tailles et formats adaptés à la taille de votre article pour un affichage sur un ordinateur de bureau. L’inconvénient c’est que votre version responsive « servira » des images trop grandes même si dans les faits elles seront redimensionnées automatiquement, l’utilisateur n’y verra que du feu mais il attendra que tout se charge… Et cela peut être long.

Sur Blog Deco Design j’avais un gros soucis sur la version mobile car ce blog présente beaucoup d’images par article et cela faisait au final quelques Mb d’images à télécharger. Je me suis dit qu’il devait bien y avoir une solution pour « servir » des tailles d’images adaptées au format utilisé par le visiteur (desktop, tablette ou smartphone), après quelques recherches j’ai trouvé un plugin pour wordpress qui est basé sur SLIR (Smart Lencioni Image Resizer). Cette technologie permet de créer des formats d’images correspondant à vos paramètres de media query, le tout à la volée et optimisée. Il suffit de renseigner vos paramètres media query dans les réglages du plugin :

Donc au final vous proposez à vos visiteurs des medias au bonne taille et optimisés en compression. L’usage du plugin « PB Responsive Images » est très simple et ne demande pas de compétences spécifiques pour la mise en place sur votre blog wordpress. De plus son usage est réversible, ce qui fait que si vous décidez de ne plus l’utiliser vous n’aurez pas à tout changer, et çà c’est bien pratique.

Pour télécharger PB Responsive Images c’est ici.

Notez que pour les blogs où les images sont hébergées sur un CDN (un sous domaine par exemple) je n’ai pas réussi à faire fonctionner le plugin.

23-3-2015 | Commentaires fermés

Quelques solutions pour optimiser les images de votre site

Le temps de chargement d’une page est de plus en plus un critère important pour Google mais aussi pour les internautes qui aiment quand cela s’affiche vite. Les outils de création d’images n’optimisent pas très bien les fichiers il faut donc utiliser d’autres logiciels pour gagner quelques ko.

Pour les utilisateurs sous mac, l’outil ImageOptim qui est open source est le logiciel à utiliser. Hier j’ai pris quelques images d’un thème wordpress pour voir quelle pourrait être le gain et ce dernier se situe entre 5 et 80% du poids initial de l’image.

Certes vous pouvez aussi faire cette optimisation en ligne avec Smush.it l’outil de Yahoo qui fonctionne parfaitement!

Les utilisateurs de wordpress pourront installer un plugin Smush.it. J’ai pour ma part désinstallé ce plugin car avec les mises à jours fréquentes de wordpress je finissais par avoir des problèmes de compatibilité!

Au final mon choix s’est porté sur le logiciel sur mac, ImageOptim, qui fonctionne simplement et obtient des résultats d’optimisation très intéressant.

07-7-2011 | 7

Ajouter des images pour les articles relatifs

Certains sites ou blogs proposent des contenus fortement axés sur le visuel, c’est le cas de mon blog déco ou encore du blog auto, ces deux supports mettent en avant des produits et donc des images. Les articles relatifs qui étaient proposés à la fin de chaque article étaient uniquement sous un format texte (comme sur 2803.fr), malheureusement ce format peu visuel n’incitait pas les visiteurs à poursuivre plus loin.

En septembre 2008, papygeek m’avait fourni son code pour intégrer ces vignettes des articles relatifs. Depuis plusieurs plugins pour les blogs WordPress proposent cette navigation visuelle.

Le premier est un vieux de la vieille qui permet d’afficher les articles relatifs sur 2803.fr : WordPress Related Posts qui fonctionne avec les tags, ce dernier permet d’afficher les vignettes mais il faut lui donner un champs personnalisé, il n’est pas suffisamment malin pour trouver cette vignette ou encore pour la générer au cas par cas. Il est donc fonctionnel mais pas tellement pratique pour l’affichage de ces thumbnails.

Le second, Wp-Thumbie, est installé sur Blog Deco Design et Blog 4 Auto. Il est beaucoup plus simple à utiliser et à configurer. En 30 secondes vous aurez des petites images sous vos articles. L’inconvénient de ce dernier est qu’il n’utilise pas les tags des articles pour trouver les articles similaires mais les titres (donc moins performant à mon avis), les vignettes sont générées à la volée par TimThumb. L’exclusion de certaines catégories ne fonctionne pas chez moi vous me direz si vous y arrivez… Globalement c’est un excellent choix pour les blogs avec du visuel, vous allez augmenter votre nombre de pages vues et peut être diminuer le bounce rate!

27-5-2010 | 8

Smush.it tes images pour gagner de la vitesse sur ton blog

On le sait tous le web de demain sera rapide et ceux qui n’afficheront pas assez vite leurs pages ne seront plus sur des tops positions dans les moteurs de recherche (dont Google). Afin d’optimiser vos temps de chargement il y a plein de méthodes mais la plus simple pour les néophytes de la configuration d’un serveur apache est d’optimiser les images affichées dans le blog.

Le moyen le plus simple est d’utiliser un optimiseur d’images comme celui de Smush.it qui est l’un des plus efficace à mon avis, mais bon envoyer son image sur Smush.it puis la copier et enfin la remettre sur dans son article n’est pas le moyen le plus rapide et ne vous fera pas gagner du temps. Heureusement si votre blog fonctionne avec WordPress il faut savoir qu’il existe un plugin qui permet de faire tout cela automatiquement et sans que vous le voyez, il suffit d’installer WP Smush.it et le tour est joué.

L’utilisation de ce plugin n’est pas rétroactive donc vous n’allez optimiser que les images des nouveaux articles, mais si vous le désirez vous pourrez aussi réduire le poids des images déjà sur le serveur en vous rendant dans la Media Library de WordPress et en cliquant sur Smush.it now! Sur certaines images j’arrive à avoir un gain de 50%, alors n’hésitez plus smushitez vos images surtout si vous êtes sous WordPress.

Sinon pour les plus geek et ceux qui maitrisent les commandes serveurs vous pouvez utiliser pngcrush, pngout, optipng ou encore pngrewritte.

03-2-2010 | 6

Améliorer l’intégration des images dans vos articles de blog

Illustrer ses articles avec des images est certainement un point à ne pas négliger car les images captent l’attention et participent à la rétention des visiteurs. Sur WordPress le module d’upload d’images est efficace mais peut devenir vite pénible si vous avez beaucoup d’images à insérer (sans pour antant vouloir le faire via une galerie). Le plugin Fast Insert comme son nom l’indique va vous permettre de gagner un temps précieux (vous allez éviter de cliquer 15 fois pour insérer 15 images).

Le plugin va intégrer le module d’upload directement sous la zone d’édition de l’article et vous allez aussi avoir la possibilité d’insérer toutes les images d’un seul coup.

Un plugin pratique qui sera vite inutile lorsque WordPress aura intégré cette option « Insert All Images ».

21-8-2009 | 5

Life.com, 7 millions de photos en ligne

Life.com vient de mettre en ligne sa nouvelle version qui intègre des photos issues de Getty suite au partenariat entre Getty et Time (le propriétaire de Life.com). A ce jour il a dans la version beta plus de 7 millions de photos réparties dans 1000 galeries sur le site.

La navigation sur le site se fait en fonction de la thématique des photos : News, Celebrity, Travel, Animals, Sports. Actuellement pour le premier mois le site est sponsorisé entièrement par la marque de montres Rolex.

Un beau site agréable pour rechercher des photos ou tout simplement pour perdre quelques minutes.

Via paidcontent

01-4-2009 | Commentaires fermés

Modifier le style du shortcode de la galerie de WordPress

Depuis quelques versions, WordPress propose un shortcode (code réduit) permettant d’afficher les images que vous avez associé à votre article en insérant simplement le code [ gallery ]. Malheureusement ce code est associé à un style CSS directement depuis votre installation de wordpress et non pas depuis la feuille de style de votre thème.

Pour résoudre ce petit problème et ainsi gérer la mise en page de cette galerie d’image il suffit d’intégrer ces quelques lignes dans le fichier functions.php de votre thème (wp-content/themes/mythemes/functions.php):


function remove_gallery_style() {return "";}
add_filter('gallery_style', 'remove_gallery_style');

Et ensuite d’ajouter ces lignes dans le fichier CSS de votre thème (wp-content/themes/mythemes/style.css) :


/*Gallery Shorcode*/
.gallery {margin: auto;}
.gallery-item {float: left;margin-top: 10px;text-align: center;width:25%}
.gallery img {border: 2px solid #cfcfcf;}
.gallery-caption {display:none}

Dans l’exemple ci-dessus, le « caption » ne sera pas affiché!

Via Zeo

10-3-2009 | 2

Redimensionner une image en ligne

Parfois un petit outil en ligne comme resizeimage peut être bien utile, car pourquoi ouvrir photoshop pour redimensionner une image alors que l’on peut le faire facilement en ligne?

07-1-2009 | 4