background preloader

Images adaptatives

Facebook Twitter

Introduction aux images responsives, 1 : définitions. Notre série de l'été 2015 est consacrée aux images responsives, présentées par le grand Jason Grigsby.

Introduction aux images responsives, 1 : définitions

Pour ne plus rien ignorer sur le pourquoi et le comment, suivez le guide! Par Jason Grigsby Ces dernières années, j’ai écrit pas mal d’articles sur les images responsives. Maintenant qu’elles sont arrivées dans nos navigateurs, je me suis dit que c’était le moment de prendre un peu de recul et de revenir aux bases pour ceux qui commencent tout juste à s’y intéresser. Donc, voici une nouvelle série intitulée Responsive Images 101 ( NdT : le titre original) qui couvrira tout ce qu’il faut savoir, depuis les raisons pour lesquelles nous avons besoin des images responsives jusqu’à la façon de choisir la bonne solution pour notre site web adaptif.

Making SVGs Responsive - Demo 5. Du Retina et HD pour votre site web : image-set, picture et srcset. Retina, ou la haute définition de manière plus générale pour les images de nos sites web pose un problème relatif.

Du Retina et HD pour votre site web : image-set, picture et srcset

En effet depuis la sortie du premier Mac Book Pro à écran Retina (et avant pour certain), la question qui revient le plus souvent est : doit-on boycotter Retina, ou au contraire y accorder de l’importance ? Je fais partie des gens indécis sur la question, et du coup cette position me va très bien pour écrire cet article, car j’en attends vos réactions. Pour moi la HD, comme la 3D, fait partie de l’avenir de l’image, que ce soit au ciné, la télévision ou un écran d’ordinateur. C’est comme le son multicanal (plus connu sous le nom de son surround), aujourd’hui ça vous ferait bizarre d’aller au cinéma avec un son mono. Et bien pour la HD c’est pareil, dans quelques années nous ne pourrons plus nous en passer.

Voici les problèmes que j’ai pu relever, a priori, en pensant à l’intégration d’images HD : Je ne dis pas que cette liste est exhaustive. Un design nickel chrome Mais encore… Open Iconic, a free and open icon set. Displaying Open Iconic's SVGs are a snap.

Open Iconic, a free and open icon set

Just treat them like your typical image and away you go! Pro tip: Don't forget the alt attribute. SVG Sprite Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag. <head> ... Sizing icons only needs basic CSS.

Coloring icons is even easier. Retina Images. Retina graphics for your website. How it works There are now 4 ways to use retina.js: Automatically swapping out "src" paths on "img" tags.

Retina graphics for your website

Automatically swapping out background image URLs in inline styles. Manually specifying the location of a high-res image variant. Automatically creating media queries for CSS background images. In the most common case, you might have an image on your page that looks like this: <img src="/images/my_image.png" data-rjs="3" /> By using the "data-rjs" attribute, you're telling retina.js that this image would like to opt in. By giving the "data-rjs" attribute a value of "3", you're telling retina.js that you have created high-res image variants for all environments up through 3 times traditional pixel density (meaning both 2x images and 3x images).

When a page loads, the script will check the user's environment to see what its display capabilities are. In this case, the script won't try to dynamically serve up variants based on the user's environment. We'll get to these in a moment. Foundation Icon Fonts 3. Use 283 icons with 1 font A custom collection of 283 icons that are stored in a handy web font.

Foundation Icon Fonts 3

View All Icons » Style 'em with CSS A couple lines of CSS and the right markup will get you going in no time. How to Use Them » Create infinite variations Easily customize these icons to be any size, color and style in CSS. How these were built Here at ZURB, we created these icons with specific standards which gives a cohesive voice and style to develop an amazing font set for everyone to love, enjoy and use on their website. Geometric All icons are made with basic shapes like triangles, squares, rectangles and circles. After converting these vector icons into a font, we’ve given you the ability to have an endless number of sizes, colors and styles for the icons that you need which could be customized and stylized via CSS.

How to use them We've made it super easy for you to get going with these icons! Merge in the styles Write your markup. App - Icon Font & SVG Generator. Pictos.