Archives des tags : PNG

Pas encore de description pour le tag PNG. Suggérez à l'administrateur du site de d'y remédier.
Extension WordPress

Optimiser WordPress avec des extensions et un fichier .htaccess

Image flou

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é.  →

Extension WordPress

Optimiser les images dans WordPress avec EWWW Image Optimizer

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.  →

HTML & CSS

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 : →

Le petit journal du web

31 outils en ligne simples et efficaces pour les travailleurs du web

Ce billet est une sorte de «Note pour plus tard» pour garder sous le coude quelques outils en ligne que j’utilise régulièrement ou que j’ai redécouverts dernièrement. Ils vous permettront de partager des bouts de code, prendre des notes, créer des penses-bêtes, sauvegarder vos bookmarks, partager des textes, valider votre prose (CSS, HTML, XML, RDF), placer du faux-texte et des fausses images (placeholders) dans vos pages web. Vous (re)découvrirez également des dictionnaires, des correcteurs orthographiques  et des ressources web à garder sous la souris. Le tout réparti entre développement web, édition & travail collaboratif et dictionnaires et ressources. →

Design & Graphisme

Gridulator calcule la grille de votre design web

Gridulator — Cet outil en ligne créé par David Sleight permet de faciliter les calculs de votre grille de mise en page. Il suffit de spécifier la largeur de votre design, le nombre de colonnes que vous voulez et Gridulator vous donnera tous les résultats présentant des valeurs entières (difficile de diviser un pixel, n’est-ce pas ?). L’application est pilotable au clavier, ce qui facilite les tâtonnements pour trouver le meilleur rapport entre la largeur des colonnes et des gouttières. →

Intégration web

TweakPNG 1.3.0

Une nouvelle version de TweakPNG vient de sortir. La dernière datait de 2004 ! Parmis les nouveautés :

* Prise en charge du chunk iTXt,
* Utilisation des dernières version de zlib et libpng.
* Le code binaire est désormais une application Unicode,
* Le logiciel n’est pas compatible avec Window 95/98/ME,
* Beaucoup de ménage dans le code source,
* Quelques bugs réparés, mais d’autres bugs sont sûrement apparus qu’il faudra réparer à leur tour !
* Passe de la licence GPLv2 à GPLv3.

Ce petit utilitaire est très pratique pour modifier la couleur par défaut des PNG transparents pour éviter le *background* disgrâcieux sous IE6 😉

HTML & CSS

IE6 — Gérer la transparence du format PNG 24 bits

Le format PNG autorise jusqu’à 256 niveaux de transparence qui ne sont pas pris en charge par Internet Explorer 6. La dégradation grâcieuse n’étant pas toujours possible, je me suis rafraichis la mémoire sur les différentes manières d’utiliser le filtre *AlphaImageLoader*. J’ai fini par tomber sur une solution globale pour gérer cette transparence même en présence d’un *background-repeat* ou d’un *background-position* ! (Cet article est en quelque sorte la suite de Opacité CSS et effet de trame avec GIF/PNG transparent.) →