ImageOptim — make websites and apps load faster (Mac app) PNG and JPG Optimizers Using CSS Sprites to optimize your website for Retina Displays — miekd CSS Sprites have been around for a while now. Matter of fact, they have been around for over eight years. They allow for some great monetary and bandwidth optimizations for medium and large websites, and they allow for a better experience on the user’s side, since there is a reduction in load time. For a lot of small websites, the extra layer of complexity that CSS Sprites brings to your assets was not always worth it. But with high-resolution screens, such as Retina Displays, becoming more and more prevalent, there is a new big reason to use them. Optimizing for High-Resolution Screens To optimize for high-resolution screens, you have to add a reference to a larger image asset within a specific media query. Yes, there are ways to take this on with Javascript, but I honestly don’t see depending on another external piece of code as a forwards-looking solution. In the next case we have four selectors with image assets. In short: Mind you, this is just an example of three image assets.
La tête dans le Flux ! Regrouper les images en sprites — Compass, sauvez l'intégrateur ! — Introduction à Compass — piouPiouM’s dev Compass rend bien des services dans un domaine habituellement long, rébarbatif et — il faut le dire — prise de tête à gérer manuellement : la génération d’images en sprite. Regrouper ses images en une seule est une bonne pratique lorsque l’on vise à améliorer les performances Web d’un site. Les sprites permettent en effet de réduire le nombre de connexions HTTP ouvertes par le navigateur, ce qui contribue à réduire les temps de latence lors de l’attente des réponses du serveur et, de ce fait, à réduire le temps de chargement de la page web. Usage basique Basiquement, un sprite se génère en 2 étapes : on importe toutes les images (au format PNG obligatoirement) d’un répertoire puis on inclut les autant de classes CSS qu’il y a d’images. Dans l’exemple qui suit, on considère le dossier icon. @import "icon/*.png";@include all-icon-sprites; Notez que le nom icon du répertoire des images est repris dans le nom du mixin en charge d’inclure les classes CSS automatiquement générées par Compass.
Concevoir un système de LazyLoading en jQuery » Shakup Le principe du « lazy loading » est simple : faire en sorte que votre navigateur charge uniquement les images qui sont visibles par l’internaute. Il est, en effet, inutile de charger l’ensemble de votre page si votre visiteur ne compte pas parcourir l’intégralité de celle-ci. Et cela est d’autant plus valable si votre page fait 3 kilomètres de long et possède des dizaines d’images. En mettant en place ce système, vous augmenterez à la fois l’expérience utilisateur (page chargée plus vite) mais vous économiserez également votre bande passante. Le concept Pour mettre en place notre système de « lazy loading », nous allons jouer sur les balises <img>. Par défaut, les images seront des pixels transparent de 1×1 pixel.Ces images possèderont la classe lazyL’adresse de l’image réelle sera stockée dans un attribut data-src Voilà donc à quoi devront ressembler les images de nos pages : Le Javascript La fonction principale de notre plugin se nommera lazyload(). $(window).scroll(lazyload); lazyload();
pngquant — lossy PNG compressor