Que celui ou celle qui n’a jamais cherché·e : des images libres et gratuites en Creative Common ; un framework basé sur le Material Design de Google ; à traduire un thème WordPress avec Poedit ; une extension WordPress pour créer des formulaires ; à tout savoir sur le développement mobile ; un fichier .htaccess pour optimiser les performances de son site ; à faire des grilles à la Flexbox, sans flexbox ; à savoir si les règles de l’ergonomie web du XXe siècles sont toujours respectables ; à connaitre le classement des projets Javascript les plus populaires sur GitHub me jette la première souris sans fil ! →
Archives des tags : Images
Optimiser WordPress avec des extensions et un fichier .htaccess
Depuis que j’ai redonné une seconde vie à ce blog qui vient de fêter neuf années d’existence, j’essaie d’optimiser les performances web en jouant sur un maximum de leviers. J’ai d’abord opté pour un système de cache ; j’ai ensuite cherché à diminuer le nombre de requêtes et à compresser les fichiers HTML, CSS et Javascript. Pour les images, il était important de les compresser un peu plus et de les charger uniquement lorsqu’elles apparaissaient dans le champ de vision du visiteur. Pour finir, j’ai regardé du côté du fichier .htaccess proposé par HTML5 Boilerplate pour gagner encore en efficacité. →
Optimiser les images dans WordPress avec EWWW Image Optimizer
Les images sont aux performances web ce qu’un match de foot au stade de Gerland est à la circulation : un goulot d’étranglement. Avec Javascript, les images sont en effet un tue-l’amour pour la bande passante. En attendant de servir des tailles d’images adaptées aux périphériques, on peut commencer par optimiser le poids des Jpeg, Gif et autres PNG grâce à EWWW Image Optimizer. →
a3 Lazy Load : chargement des images à volée pour WordPress
Comme le rappelle l’article Des pages web de plus de 2 mo, à qui la faute ? les images représentent en moyenne 56 des requêtes et 62% du poids total d’une page web. Et ces chiffres sont en augmentation constante. Pour améliorer les performances de votre site, outre un système de cache et d’optimisation des fichiers HTML, CSS et Javascript, il est important de penser à différer l’affichage des images jusqu’à ce qu’elles sautent aux yeux de l’utilisateur.
→
Des pages web de plus de 2 Mo, à qui la faute ?
On aurait pu croire que 2015 serait l’année de la performance web, mais on s’est trompé. Le poids moyen d’une page web a augmenté de 7,5% en 5 mois pour dépasser les 2 Mo. C’est en tout cas ce que nous rapporte Craig Buckler dans l’article 2Mb Web Pages: Who’s to Blame? qui cite le rapport publié dernièrement par http archive. Ce dernier a rassemblé les chiffres de près de 500 000 pages, et les nouvelles ne sont pas très bonnes : →
fullsizable — Diaporamas plein écran avec jQuery
fullsizable est un plugin jQuery qui permet de profiter de tout l’espace disponible à l’écran pour visualiser vos images sous forme de diaporama. Utilise l’API HTML5 fullscreen dans les navigateurs qui le prennent en charge. Voir la démo.
jQuery List — 600 plugins jQuery qui n’attendent que vous
jQuery List est une liste de près de 600 plugins et exemples de code jQuery répartis dans plus de 30 rubriques. Nous y trouvons à peu près tout ce qui est nécessaire pour faire des sites web interactifs : Ajax, animation, effet, graphiques, DOM, CSS, Flash, formulaires, jeux, tableaux, calendriers, sélecteurs de couleurs, etc. →
Optimiser les images PNG, JPG, GIF
Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site : →
Moodular — Fabrique de Carousel avec jQuery
Moodular — Ce plugin jQuery créé par @GouZ permet de créer des carousels (aussi appelés : diaporama ou slider) très facilement. Le nom du script est la contraction de mood (humeur, ambiance) et de modular (modulaire) : tout un programme ! Moodular est composé de nombreuses options que vous pouvez activer depuis la page du site via un formulaire. Il est également possible de créer vos propres effets. →
WordPress de A à Z — M comme Multisite
Un nom de domaine pour les rassembler tous ? Depuis la sortie de WordPress 3 et des fonctions multi-sites issues de WordPress Mu, j’envisage de mettre en place un réseau de sites pour regrouper css4design, wp4design et js4design en tant que sous-domaines de 4design pour obtenir css.4design.tl, wp.4design.tl et js.4design.tl. L’objectif est multiple : mettre en place ces nouvelles fonctions en situation réelle pour apprendre sur le tas ; pouvoir créer des nouveaux projets sans multiplier les noms de domaines ; me faciliter la vie et gagner du temps lors des mises à jour. Voici le sommaire complet des 26 articles de WordPress de A à Z →