PUBLIC MARKS from eledo34 with tags web & images

Lors de ma formation “Responsive Web Design”, j’ai une partie de cours concernant la performance web pour mobiles. Durant cette partie, j’évoque et je teste en direct des outils de compressions d’images et mon préféré a toujours été Smushit.com pour les raisons suivantes très pratiques en formation : en ligne, pas besoin d’installation quelconque gratuit, sans inscription tous formats de fichiers acceptés traitement par lots accepté (fichiers multiples) Cependant, il se trouve que depuis quelques mois, les résultats de compression de Smushit se sont radicalement dégradés sur mes fichiers habituels d’exercices : autrefois de l’ordre de 30% à 50% de compression, on atteint actuellement péniblement 10%. Je me suis donc décidé à chercher d’autres outils du même acabit, et Twitter m’a bien aidé !

Vous connaissez peut être Masonry ou Isotope dans le même genre de plugin, voici le dernier venu Freetile.js. Ce plugin permet d'agencer un layout composé de blocks, images etc. et d'optimiser l'espacement et alignement des blocs pour perdre le moins d'espace. Dès que le navigateur est redimensionné, les blocs de repositionnent avec un effet de transition. Quelques points le différencie des autres plugins du même type: Pas besoin de créer des colonnes pour gérer les blocs, ni leur spécifier de taille L'algorithme de positionnement des blocs est facilement personnalisable, il sera ainsi possible de le modifier pour aligner plutôt sur la droite par exemple. Vous connaissez peut être Masonry ou Isotope dans le même genre de plugin, voici le dernier venu Freetile.js. Ce plugin permet d'agencer un layout composé de blocks, images etc. et d'optimiser l'espacement et alignement des blocs pour perdre le moins d'espace. Dès que le navigateur est redimensionné, les blocs de repositionnent avec un effet de transition. Quelques points le différencie des autres plugins du même type: Pas besoin de créer des colonnes pour gérer les blocs, ni leur spécifier de taille L'algorithme de positionnement des blocs est facilement personnalisable, il sera ainsi possible de le modifier pour aligner plutôt sur la droite par exemple.

Adipoli est un plugin jQuery permettant de créer des effets de hover sur vos images bien réussis. Adipoli est un plugin jQuery permettant de créer des effets de hover sur vos images bien réussis. Il est courant d'assombrir ou transformer en noir et blanc ses images pour créer un effet d'apparition au passage de la souris. Adipoli est un plugin jQuery qui vous permettra en quelques lignes de code JS d'ajouter un filtre pour nuancer votre image et ajouter une transition d'affichage originale. Deux options principales permettent de définir le style de votre hover: startEffect: Pour l'effet sur l'image à la base (transparent, normal ou overlay) hoverEffect: Pour l'effet d'apparition de l'image au survol de cette dernière (16 effets disponibles !) Bien sûr vous pourrez aussi contrôler d'autres options comme l'opacité de l'image à la base, la vitesse de l'effet de hover, les nombre de carrés/colonnes pour les animations spécifiques... Très simple à mettre en place:

FlickrBomb est une librairie jQuery permettant d'afficher des images pertinentes en provenance de Flickr pour ses maquettes HTML/CSS.

Ce site vous offre plus de 900 images et graphiques gratuits de 800 par 200 pixels prêts à être intégrés sur votre blogue.