Optimiser les images pour les e-mails et le web

1. Bienvenue au cours: Bonjour, je suis Vanessa Bias. Je possède et exploite Bias Creative Company, un studio de design à service complet qui sera bientôt basé à Los Angeles, en Californie. Dans cette classe, nous aborderons différentes méthodes optimisation de vos photos et graphiques pour le Web afin de vous aider à charger plus rapidement les conceptions de sites Web ou de courriels sans sacrifier trop de qualité. Commençons. 2. Pourquoi optimiser ?: Si vous êtes comme moi, vous vivez dans une région métropolitaine où Internet haut débit illimité est une réalité pour la plupart de notre communauté. Cependant, il y a beaucoup d'endroits dans le monde où simple fait d'avoir une connexion Internet est un luxe. Même aux États-Unis, il y a des communautés où l'Internet haute vitesse est rare. En tant que concepteur web, il est de votre responsabilité d'assurer une bonne expérience à vos utilisateurs et cela inclut l'audience mondiale sans cesse croissante qui peut arriver sur votre site Web. Rasage de quelques secondes de votre temps de chargement de page Web pourrait faire toute la différence dans l'expérience de votre visiteur et sur votre taux de rebond. 3. Numériser le temps de chargement de page de votre site Web: Pour votre projet de classe, nous utiliserons un outil gratuit de poids de page d'imgix. Cela nous montrera les images les plus lourdes sur votre site Web et vous dira ce que vous pouvez faire pour optimiser. Donc, pour commencer, nous allons simplement taper l'URL ici pour le site Web. C' est mon site web. Vous pouvez utiliser le vôtre et il va optimiser ou analyser en arrière-plan plutôt, cela prendra juste moins d'une minute. Donc, pour le rapport de poids de la page de bureau, vous pouvez effectivement voir que le poids de la page de mon site Web ou de la page d'accueil au moins est assez léger. Cependant, il y a des économies potentielles de 91 %. Si vous faites défiler vers le bas, vous pouvez voir où il se trouve actuellement et où il peut être jusqu'à kilo-octets aller. Vous verrez également la différence entre le poids du code sur la page et le poids des images sur la page. L' image la plus performante sur mon site Web est l'image du héros en haut de la page. Donc, il semble que ce que nous pouvons faire est que nous pouvons réellement le redimensionner plus petit pour s'adapter au conteneur et nous pouvons changer le format de sortie. Si vous faites défiler vers le bas, vous pouvez effectivement voir trois images qui sont commandées par gain de poids d'image. Utilisez donc cet outil pour numériser votre site Web, puis suivez avec moi que j' optimise certaines des images sur mon propre site dans les prochaines vidéos. 4. Optimisation des PNGs: Pour commencer, nous allons optimiser l'image du héros qui a été le plus coupable du poids de la page pendant la numérisation de l'image. Ici, j'ai Adobe Photoshop ouvert. C' est le PSD original que j'utilise pour construire cette image. Nous allons dire pour le web et sur un Mac c'est Shift, Command, Option S. Ensuite, il va ouvrir votre fenêtre Web plus sûre. Si vous savez quoi que ce soit sur les différents formats d'image, vous le savez, si c'est une photo, vous voudrez utiliser un PNG-24 ou un JPEG. S' il est très limité dans sa palette de couleurs, vous voudrez utiliser un GIF ou un PNG. Je vais aller avec PNG-8 parce que cela n'a pas autant de couleurs dedans. Nous sommes à 256 couleurs par défaut. Je vais cliquer sur « Enregistrer » et nous allons le sauvegarder. Vous pouvez voir ici l'image enregistrée à environ 43 kilo-octets. Si nous allons sur tinypng.com, c'est en fait un excellent outil pour optimiser vos JPEG et vos PNG. Nous allons juste faire glisser cette image ici. Comme vous pouvez le voir, il est passé de 42,6 kilo-octets à 35,2 kilo-octets. Une autre chose à noter est que la taille du fichier de l'image est en fait la taille correcte qui est nécessaire. Le scan original montrait que l'image était d'environ 2 000 pixels, et nous n'avions pas besoin d'une image aussi grande. 5. Optimiser les GIFs statiques: D' accord. Maintenant, je vais optimiser. Ce n'était pas une image qui a été incluse comme l'une des images les plus lourdes de la page. Mais je pense que ce sera un excellent exemple pour montrer bonne utilisation pour les GIF, quoi que vous vouliez l'appeler. Je vais optimiser cette image ici. Il y a un logo noir et blanc. Cette image est réellement enregistrée en ce moment en tant que JPEG, que j'ai ouvert ici dans Photoshop. J' économise pour le web. Vous pouvez réellement voir si c'est un JPEG à une qualité à 100 pour cent, il est d'environ 34,96 kilo-octets. Ce que je vais utiliser, je vais l'enregistrer comme GIF. Vous pouvez jouer avec les couleurs ici, 256 couleurs vous obtiendrez 22 kilo-octets, ce qui est plus petit, mais nous n'avons pas besoin de 256 couleurs pour une image qui ne fait que deux couleurs. Ce que je vais faire, c'est que je vais ramener ça à 100. Vous pouvez voir même zoomer, la qualité est toujours bonne. Il y a une raison pour laquelle tu ne veux pas faire deux couleurs. C' est parce que cela va diminuer une partie de cette netteté et vous allez commencer à obtenir ces lignes bitmap déchiquetées. Je pense que 100, c'est plutôt bon. Ou le briser, le ramener à 75, et c'est toujours assez bon. C' est maintenant à 18,85 kilo-octets, ce qui représente environ la moitié de la taille de l'image originale. 6. Optimisation des JPEGs: Maintenant, je vais vous montrer comment optimiser un JPEG. Cette image ici est enregistrée en tant que JPEG, et elle devrait en fait être parce qu'elle inclut des photographies dans des images très complexes. Il y a beaucoup de couleurs ici. Donc, vous voulez le garder comme un JPEG ou un PNG 24. Mais voyons ce qu'un JPEG fait maintenant. Si nous utilisons un raccourci libre en toute sécurité, peut voir qu'il remonte à l'original ou le dernier format enregistré, qui est un cadeau, et il ne semble pas vraiment très bon. Vous voyez beaucoup de pixilation ici, parce qu'il essaie de créer une photo avec des couleurs très limitées. Nous allons le changer en JPEG. En ce moment, à la qualité maximale est de 122,8 kilo-octets. Il y a ce bouton ici où il est optimisé. Vous pouvez voir qu'il mâche environ 5 kilo-octets pour que ça soit coché. Ce qu'on va faire, c'est qu'on peut faire tomber certaines de ces couleurs juste un peu. Si vous voulez les voir côte à côte, vous cliquez sur deux vers le haut. Vous pouvez voir l'image originale par rapport au fait que vous modifiez les paramètres sur le côté ici, vous voyez si elle va jusqu'au bas, vous pouvez voir tout ce truc d'artefact qui se passe, toute cette pixilation. On ne veut pas ça. Nous allons juste commencer à partir de zéro, augmenter lentement la qualité jusqu'à ce qu'il arrive à un point que nous sommes d'accord avec son apparence. Je ne veux pas dire qu'environ 65 % en ce moment est bon pour moi. L' original étant 469 kilo-octets à la taille d'origine, enregistré à 48,62 sous forme de JPEG optimisé. Vous pouvez utiliser de minuscules PNG sur JPEG. Quand il a fini d'économiser, il a économisé environ 51 kilo-octets. Nous allons faire, c'est que nous allons juste prendre ça et le traîner, et comme vous pouvez le voir, il est passé de 50 kilo-octets à 44 kilo-octets, économisé 14 %. Nous voyons ce qu'il a téléchargé. Vous pouvez voir, il y a un peu plus d'artefacts là-bas qu'à l'origine, c'est l'une des raisons pour lesquelles j'aime utiliser le petit PNG pour les PNG, ou PNG 24 est si vous pouvez enregistrer comme ça, plutôt que d'enregistrer comme un JPEG, mais quand même plus petit qu'il ne l'était à l'origine. 7. Qu'est-un WEBP ?: Autre chose qui est intéressant à partager en ce moment est un nouveau format d'image qui tourne autour appelé WebP. Ceci est considéré comme supérieur aux PNG parce que la taille du fichier est environ 26 % plus petite et 25 à 34 % plus petite que les JPEG. Le seul problème avec WebPs en ce moment est qu'il n'est pas entièrement compatible avec la plupart des navigateurs populaires. Comme vous pouvez le voir, il est entièrement compatible avec Chrome, entièrement compatible avec Chrome pour Android, UC Browser pour Android, Opera Mini et Samsung Internet, mais il n'est pas compatible avec Safari, Firefox, Internet Explorer, ou Bord. Espérons que ce nouveau format d'image gagne en traction et devient facilement disponible et que tout le monde peut l'utiliser, mais pour le moment, il n'est pas entièrement fonctionnel pour tous les utilisateurs. 8. Projet final: Maintenant que vous avez les bases de l'optimisation de vos images pour le web, il est temps de travailler sur votre projet. abord, utilisez la page [inaudible] pour examiner les zones à améliorer de votre page Web. Prenez une capture d'écran de vos résultats à ajouter à votre projet. Ensuite, utilisez ce que vous avez appris pour optimiser vos images. Notez avant et après les tailles d'image, et notez tout ce que vous avez pu changer, comme le format du fichier image. Ensuite, téléchargez à nouveau toutes vos images sur votre site Web, remplaçant les fichiers d'origine. Enfin, réexécutez l'outil de pondération de page pour voir à quel point la vitesse de votre site Web s'est améliorée, ou il y a peut-être eu quelque chose que vous avez négligé. Prenez une capture d'écran pour présenter les améliorations avant et après de vos pages Web. Je vais poster mon projet à titre d'exemple. J' espère que vous avez apprécié cette classe couvrant les bases de l' optimisation de vos graphismes et photos pour le web.