Gardez un maître et faites une copie de livraison web
Enregistrer l’image originale avec sa description d’image et son enregistrement d’approbation. Créer des fichiers de livraison séparés pour la zone d'image réelle de la page. Cela vous permet de modifier le cadre d'image ou de compression plus tard sans réviser à plusieurs reprises le seul fichier source.
THE RENDER OFFICE retourne actuellement des images PNG en dimension square, paysage ou portrait. Une grande source peut être utile pour la finition, mais une petite carte de catégorie peut nécessiter moins de pixels. Le paramètre de qualité de la création d'image n'est pas un substitut pour préparer une exportation web appropriée.
Match livré des pixels à la mise en place
Vérifiez la taille affichée de l'image sur les layouts réels et les densités d'appareil que vous soutenez. Préparez des variantes d'image appropriées où le site peut les servir de manière responsive. La réduction de la largeur CSS seule ne réduit pas les bytes du fichier téléchargé.
MDN documentait comment les candidats à la source d'image et les informations de taille aident les navigateurs à choisir une ressource appropriée. Le layout déclaré doit correspondre à la page réelle; les informations de taille incorrectes peuvent faire que le navigateur sélectionne un candidat moins approprié.
Comparer la compression à la taille de la vue finale
Exporter les formats appropriés soutenus par le flux de travail d'édition, puis comparer la taille du fichier et l'apparence. Inspectez les gradients, la texture fine, les bords et tous les détails exacts du produit après la compression. Gardez la transparence uniquement lorsque le layout en a vraiment besoin.
Choisissez le plus petit fichier approprié qui conserve la qualité requise pour la mise. Il n'y a pas d'objectif de taille de fichier universel qui prouve qu'une image est optimisée. Une petite carte décorative et une image détaillée du produit ont des emplois différents et devraient être examinés en conséquence.
| champs | Valeur enregistrée | Questions de révision |
|---|---|---|
| Placement | Page actuelle et zone image | Le cadre d’image sert-il à ce layout ? |
| Source et exportation | Master nom et variante de livraison | Est-ce que l’exportation peut être reproduite ? |
| Dimensions et bytes | Taille des pixels et taille du fichier | Les ressources fournies sont-elles appropriées ? |
| Vue visuelle | Qualité acceptée à la taille prévue | La compression a-t-elle supprimé des informations importantes ? |
Réservez l'espace de layout et la charge par importance
Fournir des informations intrinsèques de largeur et de hauteur afin que le navigateur puisse réserver la proportion d'aspect de l'image avant qu'elle ne arrive. MDN explique comment cela réduit le mouvement de layout. Confirmez que le cadre d'image final et le comportement CSS sont d'accord avec l'espace réservé.
Utilisez un chargement lisse pour les images appropriées qui ne sont pas nécessaires pour la première vue. Ne pas l'appliquer indiscriminément à l'image principale un visiteur devrait voir immédiatement. Vérifiez le comportement réel de la page plutôt que de traiter un attribut de chargement comme une fixation de performance universelle.
Donnez l'image dans un contexte de recherche et de lecteur utile
Placez l'image à côté du texte pertinent et choisissez un nom de fichier courte et décrit. Écrivez le texte alt pour le but de l'image sur cette page, en évitant les listes de mots clés. Google décrit les noms de fichier comme un point de vue léger et utilise le contexte de la page environnante pour comprendre le sujet; un seul nom de fichier ne définit pas la pertinence ou le classement.
Vérifiez les demandes d'image réelles, la disposition, l'accessibilité et la performance de la page publiée avec les outils appropriés. Enregistrez les conditions et les résultats avant de comparer les versions. La livraison plus rapide peut améliorer l'expérience, mais les revenus dépendent toujours de l'offre, du public et de la voie de conversion complète.
Planifier la source avant l’exportation.
Utilisez le guide du flux de travail de campagne pour décider quelle image vous avez besoin, comment elle sera révisée et comment l'actif fini sera livré.
Suivez le flux de travail de l'image de campagne