background preloader

Fluid Images — Unstoppable Robot Ninja

Fluid Images — Unstoppable Robot Ninja
(Hello! If you think this article’s interesting, you might check out my ALA article on responsive web design.) I’ve always hated publishing. To wit: One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. In Which “Looking Across the Pond for Help” Is a Pretty Decent Answer, As It Turns Out Since I started mucking around with this whole “stylesheets” thing, Richard Rutter has been one of those CSS giants on whose shoulders I frequently stand. A few years back, Richard published a brilliant series of experiments with max-width and images, which I pored over when I was first working on this blog. This solved the problem beautifully. And as it turns out, this works just fine for most embedded videos, too: So while this is shaping up nicely, we’re not quite done. As it turns out, not quite. But first, the bad news: as far as I can tell, we have to write off Firefox 2 and below. Sadly, it also caused another bug.

Compressive Images Revisited - TimKadlec.com 2012 was a dark time for responsive images. Standards work had begun, but there was no consensus and many angry people (myself included). Some remained unconvinced that responsive images were even a problem that needed to be solved. But there was still a glimmer of hope in these dark days. Now, fast forward to today. What are compressive images? The compressive images technique relies on you sizing a JPG image to be larger than the size it ultimately is displayed at and then compressing it to an incredibly low-quality setting. The benefit in weight can be substantial. The trade-off for compressive images is primarily the memory cost (there used to be scaling and decoding risks, but browsers have improved in that area). Let’s consider the Filament Group’s example image again. When a browser stores a decoded image in memory, each pixel is represented by an RGBA value which means that each pixel costs us four bytes (a byte each for the red, green, blue and alpha values). The snippet above:

Le schéma Data-URI Le but de ce tutoriel est de vous permettre de découvrir ce schéma d'URI, de bien comprendre quand il est utile de l'utiliser et quand il faut l'éviter, et au final de vous donner les outils nécessaires à son utilisation dès aujourd'hui. Data-URI est un schéma d'URI (Uniform Resource Identifier) contenant directement les données qu'il identifie, contrairement à la plupart des autres schémas. Data-URI est aujourd'hui utilisable en production, bien souvent appelé pour augmenter légèrement les performances de vos sites web à l'aide de données embarquées via data: et encodées en base64. Ces gains ne seront évidemment perceptibles qu'à condition d'utiliser ce schéma de manière pertinente. Les URI Avant d'entrer dans le vif du sujet, il est bon de se rappeller ce qu'est un URI (abréviation tenant pour "identifiants uniformes de ressources"). Il ne faut pas faire l'amalgame entre URI et URL : un URL (Uniform Resource Locator) est seulement un sous-ensemble d'URI. Format d'un URI Data-URI Exemple

When to base64 encode images (and when not to) | David Calhoun Introduction Ever since Steve Souders started evangelizing web performance, it’s been pounded into our heads that extra HTTP requests add a lot of additional overhead, and that we should combine them if possible to dramatically decrease the load time of our web pages. The practical implication of this has been to combine our JavaScript and CSS files, which is relatively easy and straightforward, but the harder question has been what to do with images. Sprites Image sprites are a concept taken from video games: the idea is to cram a ton of image assets into one file, and rearrange a “viewport” of sorts to view only specific pieces of that file at a time. On the web side of things, this means that those multiple requests have now been combined into one request. But there’s a few drawbacks with using image sprites: Data URIs and Base64 encoding Data URIs (see this, this, and this) and Base64 encoding goes hand-in-hand. Just like sprites, you save HTTP requests, but there’s also some drawbacks:

data:urls – what are they and how to use them If you follow this blog you already know the infamous website performance rule #1 - reduce the number of HTTP requests. Actually, to celebrate Earth Day and to jump the "go-green" wagon/jargon, my favourite performance mantra as of late is "Reduce, Reuse, Recycle" (the Recycle part is a wee fuzzy but, oh well) So to reduce the number of requests for JavaScript files, you combine all .js into one monolithic file. Same for .css For images - use CSS sprites to create one image files that contains all your little icons. Yet another way to minimize the number of HTTP requests is to use data URLs (proper name is data URI scheme). "data... uri? Say you have this minuscule image: which you include like: This way you're actually using the http URI scheme. Same thing using data URI will look like: And the code for it: This way the image in inlined in the HTML and there is no extra HTTP request to retrieve it. data URI syntax Let's take a look again at this img tag and its slightly disturbing syntax:

Encoder ses images en base64 | Bellami L’encodage des images en base64 est une des bonnes pratiques d’optimisation web. Cet encodage transforme un fichier image en suite de caractère. Cela permet de diminuer considérablement le nombre de requêtes envoyées au serveur web par le navigateur. Mais ce principe ne peut pas être généralisé à toutes les images, il faut savoir l’utiliser avec parcimonie. Comment encoder en base64 D’ordinaire, une image qui s’affiche au sein d’une page web est un fichier image extérieur à la page web. Les défauts de l’encodage en base64 Un défaut de l’encodage en base64 est que le poids total de l’image augmente en moyenne de 50%. Limiter l’usage des images encodées en base64 Pour les détails techniques de la base64 je vous invite à lire l’article de Wikipédia concernant la base 64. En résumé, pour améliorer les performances de son site web, il faut encoder en base64 seulement les images de petite taille.

Responsive Images in CSS The term "responsive images" has come to mean "responsive images in HTML", in other words, the srcset and sizes attribute for <img> and the <picture> element. But how do the capabilities that these things provide map to CSS? CSS generally wasn't really involved in the responsive images journey of the last few years. That's for good reason: CSS already has the tools. srcset in CSS In HTML, srcset is like this (taken from the Picturefill site): One image for 1x displays, a larger image for 2x displays. There is a difference here, though. Resolution media queries are fairly well supported: There is another way as well, that is actually closer to how srcset works, and that's using the image-set() function in CSS: It has a little less support than resolution queries: It's much closer to srcset, not only because the syntax is similar, but because it allows for the browser to have a say. There is no perfect 1:1 replacement for srcset in CSS, but this is pretty close. sizes in CSS Sample: An example:

Responsive Images 101, Part 1: Definitions Over the last few years, we’ve written a quite a few articles about responsive images. Now that responsive images have landed in browsers, it seemed like a good time to step back and cover the basics for those who are just starting to tackle responsive images. Ergo, a new series of articles called Responsive Images 101 that will cover everything from why we need responsive images to how to pick the right responsive images solution. Let’s dig in! What are Responsive Images? The idea of having the browser resize images has been a key part of responsive web design from the beginning. However, simply resizing images can mean that users will download images that are far too large. The largest version of that image, used for large, high density displays like the iMac, is 5144×1698 pixels. Delivering an image that large to a device like the Blackberry Curve 9310—with its display resolution of 320×240 pixels—doesn’t make any sense. Understanding your use case Resolution Switching Art Direction

Ajouter des images responsive à une page web - Apprendre le Web Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une part (elles préparent le terrain) dans la conception de sites Web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un futur module au sujet des CSS. Pourquoi des images adaptatives ? Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez voir cet exemple en direct et trouver son code source sur Github). Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 px et se centre dans l'espace disponible. Et c'est tout ! Résumé

Related: