Un nouveau livre fracassant par Addy Osmani —

juin 8, 2021

Découvrez notre nouveau livre, "Image Optimization", un guide détaillé pour comprendre comment fournir rapidement des images de haute qualité sur le Web. 528 pages. Des formats et de la compression à la livraison et à la maintenance. Accédez aux détails et obtenez le livre immédiatement.

Les images sont un élément clé du Web depuis des décennies. Nous interprétons les images beaucoup plus rapidement que le texte, c'est pourquoi les visuels de haute qualité stimulent les conversions et l'engagement des utilisateurs. Pour être efficaces, toutes ces images doivent être soigneusement orchestrées pour apparaître rapidement à l'écran, mais il s'avère que le chargement efficace d'images à grande échelle n'est pas un projet pour un après-midi tranquille.

Optimisation de l'imagechargement le comportement et le rendu dans le navigateur nécessitent une compréhension des formats d'image et des techniques de compression d'image, du décodage d'image et du rendu du navigateur, des CDN d'image et du chargement adaptatif des médias, sans oublier la mise en cache et le préchargement efficaces. Voyons tout.

Pour un guide complet sur l'optimisation des images, nous nous sommes associés à Addy Osmaniun ingénieur responsable travaillant sur Google Chrome qui a travaillé sur les performances Web pendant des décennies. Le résultat est un livre avec tout ce dont vous avez besoin pour optimiser vos images et les afficher rapidement, sans être ralenti en cours de route.

Imprimer + eBook

$
44.00

Couverture rigide de qualité. Livraison gratuite dans le monde entier. Garantie de remboursement de 100 jours.

Livre électronique

$
19.00

Gratuit !

Sans DRM, bien sûr.
ePUB, Kindle, PDF.
Inclus avec Smashing Membership.

À propos du livre

À côté des vidéos, les images sont les éléments les plus lourds et les plus demandés sur le Web. Certaines des plus grandes économies de taille et améliorations des performances peuvent provenir d'une meilleure stratégie d'optimisation d'image. Alors, comment encoder, déployer, servir et maintenir les images au fil du temps ? Notre nouveau livre explore exactement cela. Consultez l'aperçu PDF gratuit (3 Mo).

Découvrez notre nouveau livre « Image Optimization » avec tout ce que vous devez savoir pour obtenir des images sur le Web correctement.

Le nouveau livre d'Addy se concentre sur ce qui compte : les approches modernes de la compression et de la diffusion d'images, des outils et des techniques pratiques pour automatiser l'optimisationles images réactives, les formats d'image actuels et les navigateurs chargent, décodent et restituent les images, les CDN, le lazy-loading, le chargement adaptatif des médias et comment optimiser pour Core Web Vitals. Le tout dans un seul et même livre de 528 pages.

Image Optimization vous aidera à fournir des images réactives de haute qualité dans le meilleur format et la meilleure taille, et au moment où vos utilisateurs en ont le plus besoin. Rempli de conseils et techniques utilesle livre met l'accent sur l'application pratique et la longévité de vos stratégies d'optimisation d'image. Aller à la table des matières ↓

Nous sommes si heureux, excités, humiliés et honorés de publier le nouveau livre d'Addy Osmani. Quelques mots d'Addy lui-même à propos du livre.

Vous apprendrez :

les formats d'image,
la compression d'image,
améliorer le rendu des images,
préparer des images pour une variété de résolutions ,
automatiser l'optimisation d'image,
maintenance d'image,
lazy-loading et des techniques comme SQIP,
images CDN, et comment en configurer un,
AVIF, JPEG XL et HEIFleurs avantages et inconvénients,
Core Web Vitals et comment les optimiser,
livraison d'images adaptative aux conditions du réseau.

Un aperçu- jetez un œil à l'intérieur du livre, avec 528 pages sur tout l'optimisation de l'image. Large view.

Les images nous aident à raconter une histoire et à mieux interagir avec nos clients. Les photos de haute qualité ne manquent pas autour de nous, mais comment les encoder, les déployer, les servir et les maintenir ?

Les 23 chapitres de notre tout nouveau livre explorent exactement cela.

1. L'élément humble +: L'élément humble a acquis des super-pouvoirs au fil des ans. Étant donné à quel point il est essentiel à l'optimisation d'images sur le Web, voyons ce qu'il peut faire.
2. Optimisation de la qualité d'image +: La plupart des outils d'optimisation vous permettent de définir le niveau de qualité qui vous convient. Une qualité inférieure réduit la taille du fichier mais peut introduire des artefacts, des halos ou une dégradation par blocs.
3. Comparaison des formats d'image +: Chaque nouveau format d'image a une gamme d'efficacité si vous comparez et alignez sur une « qualité » d'expérience cohérente. Dans ce chapitre, nous explorerons le défi de définir la qualité et de définir les attentes lors de la conversion entre les formats.
+: Idéalement, tous les écrans et navigateurs Web du monde afficheraient les couleurs exactement de la même manière. Malheureusement, ils ne le font pas. La gestion des couleurs nous permet d'atteindre un compromis sur l'affichage des couleurs à travers des modèles de couleurs, des espaces et des profils.
5. Performances de décodage d'image +: La rapidité avec laquelle une image peut être décodée détermine la rapidité avec laquelle les navigateurs peuvent la montrer à l'utilisateur. Garder cette efficacité permet de garantir une bonne expérience utilisateur. Approfondissons le décodage des images pour comprendre comment les navigateurs fonctionnent en coulisses et comment vous pouvez contrôler le décodage.
6. Mesurer les performances des images +: Dans ce chapitre, nous verrons comment utiliser Lighthouse pour vérifier les images non optimisées et comment surveiller un budget de performances Web pour les images.
+: Le JPEG pourrait bien être le format d'image le plus utilisé au monde. Examinons les modes de compression JPEG, car ils peuvent avoir un impact significatif sur les performances perçues.
+: Des bases aux modes palette, à la transparence index et alpha et aux astuces de compression, dans ce chapitre, nous prendrons une in- examen approfondi des fichiers PNG.
+: WebP est un format d'image relativement récent développé dans le but d'offrir des tailles de fichier inférieures pour une compression sans perte et avec perte avec une qualité visuelle acceptable. Voyons comment utiliser les images WebP en production aujourd'hui.
+: Il existe plusieurs façons d'implémenter des SVG dans une page Web. Dans ce chapitre, nous examinerons différentes approches et comment garder vos SVG légers et performants.
+: L'utilisation d'images réactives est un élément clé de la conception Web entièrement réactive. Ce chapitre couvre les techniques de définition d'images réactives.
12. Techniques de rendu progressif +: Il existe de nombreuses techniques de chargement progressif de l'image qui peuvent raccourcir le temps de chargement perçu. Dans ce chapitre, nous examinerons différentes manières de charger progressivement des images pour améliorer les performances et l'expérience utilisateur.
13. Optimisation des requêtes réseau avec la mise en cache et le préchargement +: Le téléchargement de fichiers tels que des images ou des vidéos sur le réseau peut être lent et coûteux. La mise en cache HTTP, les techniciens de maintenance, la création d'images et le préchargement permettent d'optimiser les requêtes réseau. Explorons leur fonctionnement.
14. Images hors écran à chargement paresseux +: Les pages Web contiennent souvent un grand nombre d'images, ce qui contribue au gonflement des pages, aux coûts de données et à la vitesse de chargement d'une page. Voyons comment le chargement différé des images hors écran peut aider à améliorer la situation.
15. Remplacement des GIF animés +: Si vous souhaitez améliorer les performances de chargement de vos pages, les GIF animés ne sont pas très compatibles avec cet objectif. Mais il s'agit d'un domaine des performances de chargement où, sans beaucoup de travail, vous pouvez obtenir des gains significatifs sans perte de qualité du contenu.
16. Réseaux de diffusion de contenu d'image +: Pour les sites avec un trafic important et une portée mondiale, les optimisations de base au moment de la création ne suffisent généralement pas. Les CDN aident les équipes à gérer à l'avance les actifs statiques connus ainsi que les actifs dynamiques pour améliorer les temps de chargement et la fiabilité du site. utilisateurs souhaitant travailler avec ce format sur iOS.
+: AVIF vise à produire des images compressées de haute qualité qui perdent le moins de qualité possible lors de la compression. Examinons plus en détail ses fonctionnalités, la prise en charge du navigateur et ses performances.
+: JPEG XL est un format d'image avancé visant à offrir des avantages de compression très importants par rapport au JPEG. Dans ce chapitre, nous examinerons de plus près ce qu'il a à offrir.
20. Comparaison de nouveaux formats de fichiers image +: Bien que les nouveaux formats d'image prennent en charge à peu près les mêmes ensembles de capacités, la force de chacun les différencie. Les tableaux de ce chapitre visent à offrir un résumé de certaines des caractéristiques les plus importantes et à quel point chaque format gère les différents types d'images.
21. Offrir des expériences multimédias légères avec Data Saver +: Les navigateurs dotés de fonctionnalités Data Saver donnent aux utilisateurs la possibilité de nous dire explicitement qu'ils souhaitent utiliser un site sans consommer autant de données. Voyons comment utiliser Data Saver pour offrir des expériences multimédias légères.
22. Optimiser les images pour Core Web Vitals +: Sur quelles mesures devez-vous vous concentrer pour améliorer l'expérience utilisateur ? Core Web Vitals se concentre sur trois aspects clés de l'expérience utilisateur : l'expérience de chargement de la page, la préparation à l'interaction et la stabilité visuelle de la page. Jetons un coup d'œil à chacun d'eux.
23. Le pipeline d'images de Twitter (étude de cas) +: Les tweets sont souvent accompagnés d'images pour illustrer, amuser et accroître l'engagement des utilisateurs. C'est pourquoi Twitter met tant l'accent sur un processus d'optimisation d'image solide. Cette étude de cas se concentre sur les différentes étapes que Twitter a prises pour charger les images plus rapidement tout en s'assurant qu'elles ont l'impact souhaité.

528 pages. Vous pouvez commencer immédiatement à lire le livre électronique (PDF, ePUB, Amazon Kindle). Les livres imprimés sont expédiés dans le monde entier. Écrit par Addy Osmani. Illustrations d'Espen Brunborg et Nadia Snopek.

Imprimer + eBook

$
44.00

Couverture rigide de qualité. Livraison gratuite dans le monde entier. Garantie de remboursement de 100 jours.

eBook

$
19.00

Gratuit !

Sans DRM, bien sûr.
ePUB, Kindle, PDF.
Inclus avec Smashing Membership.

À propos de l'auteur

Addy Osmani est un directeur technique travaillant sur Google Chrome. Son équipe se concentre sur la vitesse aidant à garder le Web rapide. Consacrée à la communauté open source, les contributions open source passées d'Addy incluent Lighthouse (un outil d'audit pour les performances et les meilleures pratiques Web), Workbox (bibliothèques pour les fichiers de mise en cache hors ligne utilisant le service travailleurs), Yeoman (l'outil d'échafaudage Web), Critical (l'outil d'optimisation CSS du chemin critique) et TodoMVC. Addy est l'auteur du livre Learning JavaScript Design Patterns.

Reviews and Testimonials

« Un aperçu incroyablement complet de l'optimisation d'images. Ce livre vous apprendra tout ce que vous devez savoir pour fournir des images efficaces et performantes sur le Web. "

— Katie HempeniusGoogle

" L'optimisation de la diffusion des images est la clé de la création d'applications Web hautes performances. Ce livre explique tout ce que les développeurs doivent savoir sur le choix du bon format d'image, la compression des éléments d'image, et plus encore !"

— Mathias BynensGoogle

"Les images sont le cœur et l'âme du Web ; ils aident à créer ce lien émotionnel avec les humains. Pourtant, il est vraiment facile de gâcher cette expérience en ralentissant le chargement ou pire, en surquantifiant les pixels et en déformant les images. Comprendre le fonctionnement des images est essentiel pour tout ingénieur ; la dernière chose que nous voulons, c'est traiter les bogues ouverts provenant de mauvaises expériences créatives ou de performances. "

— Colin BendellShopify

Détails techniques

ISBN : 978-3- 945749-94-4 (imprimé)
Couverture rigide de qualitéreliure cousue, marqueur de page à ruban.
Envoi gratuit par avion dans le monde entier depuis l'Allemagne. Vous pouvez commencer à lire le livre électronique immédiatement.
Le livre électronique est également disponible au format PDF, ePUB et Amazon Kindle.
Obtenez le livre immédiatement.

Community Matters ❤️

Produire un livre prend un certain temps, et nous ne pourrions pas le faire sans le soutien de notre merveilleuse communauté. Un grand bravo aux membres Smashing pour leur soutien aimable et continu. Le livre électronique est et sera toujours gratuit pour les Smashing Members. De plus, les membres bénéficient d'un rabais amical lors de l'achat de leur copie imprimée. Je dis juste ! 😉

Restez génial, et merci pour votre soutien continu, tout le monde !

Imprimer + eBook

$
44.00

Couverture rigide de qualité. Livraison gratuite dans le monde entier. Garantie de remboursement de 100 jours.

Livre électronique

$
19.00

Gratuit !

Sans DRM, bien sûr.
ePUB, Kindle, PDF.
Inclus avec Smashing Membership.

Plus de livres et goodies Smashing

Promouvoir les meilleures pratiques et vous fournir des conseils pratiques pour maîtriser vos défis quotidiens de codage et de conception a toujours été (et sera) au cœur de tout ce que nous faisons chez Smashing.

Au cours des dernières années, nous avons eu la chance de travailler avec des personnes talentueuses et attentionnées de la communauté Web pour publient leur riche expérience sous forme de livres imprimés qui résistent à l'épreuve du temps. Paul et Adam font partie de ces personnes. Avez-vous déjà consulté leurs livres ?