Bonjour. Notre blog a été traduit automatiquement pour votre confort. Veuillez nous excuser pour les erreurs de traduction éventuelles.

L'optimisation des Images pour le Web: Un Guide Pratique

Nov 8, 2016 by Michelle Nickolaisen
A practical guide to optimizing images for the web
Posted Nov 8, 2016 by Michelle Nickolaisen

Les Images sont essentielles à l'exécution d'une boutique e-commerce avec succès — après tout, si vos clients ne peuvent pas voir ce qu'ils achètent, ils ne sont pas très enclins à l'acheter. Les Images peuvent également faire ou défaire votre blog, booster votre RÉFÉRENCEMENT, et plus.

Poursuivez votre lecture pour découvrir comment faire de vos photos et images de travailler pour vous.

Pourquoi l'image d'optimisation de la matière?

L'avantage le plus évident pour l'optimisation de vos images, c'est que c'est mieux pour vous dans le long terme.

Elle rend les utilisateurs veulent rester sur votre site web (parce qu'ils peuvent voir clairement vos images et ils ne sont pas prendre une éternité à charger).

Il rend votre site plus facile à trouver dans les résultats de recherche (car une bonne optimisation de l'image est également moteur de recherche convivial).

Il y a aussi le fait que c'est bon pour vos utilisateurs. Optimisation de l'Image, hormis étant généralement plus convivial, contribue à rendre votre site web plus accessible pour les personnes ayant une déficience visuelle (qui pourrait être en utilisant des lecteurs d'écran qui attirent hors de l'alt-balises pour décrire l'image de l'utilisateur).

Ce qui signifie plus de visiteurs pour vos sites web et potentiellement plus de ventes.

Lire aussi: Des Moyens simples pour Rendre Vos Produits Plus attractifs pour les Consommateurs

Optimisation de l'Image 101

Donc ce qui se passe dans l'optimisation de l'image?

Les noms de fichier et le code

La première et la meilleure chose que vous pouvez faire est de changer votre nom de fichier image à quelque chose de descriptif, plutôt que de 10934.jpg.

Décrire ce que vous voyez sur l'image (“RedCorvette.jpg”) ou ce qui est dans le post, si c'est pour un blog (“MaintainingYourCorvette.jpg”).

Après que, vous pouvez ajouter une touche “alt” de la balise.

C'est une balise qui va dans le code de l'image que donne une brève description de ce que l'image est — que vous voulez pour décrire l'image en quelques mots tout en utilisant des mots-clés pertinents.

Va avec l'exemple ci-dessus, vous pourriez avoir une balise alt de “Rouge 2010 Corvette De Maintenance.”

Mais ne pas les trucs mot clé de la balise alt — vous de ne pas ajouter “la voiture rouge corvette de maintenance 2010 automobile boutique acheter” comme alt-tag, car cela peut déclencher les filtres anti-spam dans les algorithmes des moteurs de recherche, et c'est aussi de ne pas user-friendly pour les spectateurs malvoyants.

La plupart des sites ont un moyen facile de modifier les balises alt, mais si ce n', vous pouvez cliquer sur “afficher la source” ou “voir le HTML” dans l'éditeur de texte pour y accéder et les modifier vous-même.

Alt-Tags_HTML_Image_Code.png

À part de nom de fichier et la balise alt, de nombreux constructeurs de site (comme WordPress) va vous donner un espace pour le titre de l'image, légende, et la description (et sera facilement vous permettre d'éditer la balise alt) lorsque vous téléchargez une image, comme indiqué ci-dessous.

De remplir tous les champs disponibles est la meilleure règle pour l'optimisation. La légende sera indiqué à votre moyenne de téléspectateurs, mais tout le reste sera principalement utilisé par les moteurs de recherche et les lecteurs d'écran (pour les spectateurs malvoyants qui s'appuient sur des descriptions d'images).

 image descriptions

Les descriptions d'images dans WordPress

De taille et de format

Réduire vos tailles de fichier image. Évidemment, vous souhaitez que les images soient assez grand pour voir, mais vous n'avez pas besoin de télécharger des images, des milliers de pixels de large et de haut.

Assurez-vous de ne pas télécharger l'image en taille réelle, puis il suffit de changer les dimensions qu'il apparaisse comme par le code de l'image. Si vous n'avez que, l'ordinateur du visiteur aura à charge l'image plein taille et il va ralentir votre temps de charge vers le bas.

Il n'est pas difficile et rapidement la règle de taille de fichier ou de dimensions, mais le sens général est “la plus petite taille de fichier possible sans l'image trop petite ou illisible.”

Pour en ligne de images de blog, nombreux sont les sites d'aller avec une largeur de 500-800 et d'une hauteur de 300-600. Vous pouvez toujours inclure un lien vers l'image en taille réelle, de sorte que les gens peuvent obtenir une image plus grande quand ils cliquent.

Aussi loin que la taille du fichier va, vos images ne doivent jamais être supérieure à 1 mo, et idéalement, la plupart d'entre eux sera d'environ 100-200 ko.

Vous pouvez également réduire la résolution pour réduire la taille des fichiers, mais avec la hausse de la rétine affiche, vous ne voulez pas réduire la résolution trop ou les images floues sur ces écrans.

Pour modifier la taille du fichier, vous pouvez généralement choisir d'exporter une image à un peu moins de qualité, modifier les dimensions de l'image, ou changer le type de fichier (voir ci-dessous).

Utiliser le bon format de fichier pour le travail. Pour la plupart des utilisations, .jpg va être votre meilleur pari. Il prend en charge la plupart des couleurs avec le moins de la taille possible.

Gifs tendance à être plus grande taille de fichier sage pour les images statiques, mais ils sont parfaits pour les images animées (Giphy, quelqu'un?).

C'est une excellente façon de montrer votre produit à partir de tous les angles ou en mouvement sans faire aux utilisateurs de charger une vidéo complète — Ecwid vous permet d'utiliser des gifs animés pour que.

Pour les images avec du texte, .le png est un bon choix — les images ont tendance à être de plus grande taille de fichier, mais avez-texte plus net (et aussi en faveur de la transparence).

Les meilleures pratiques pour les images

Sur votre site:

  • Assurez-vous d'inclure l'ensemble de la description supplémentaire possible, pour rendre vos pages de produits et de messages de blog moteur de recherche convivial.
  • Inclure plusieurs angles de vos produits.
  • Assurez-vous de définir une image en vedette, comme c'est généralement ce que l'image est tirée de médias sociaux, des aperçus.

Toujours utiliser des images de haute qualité, large de plus de 500 px-1000px pour votre produit pictures. Après leur téléchargement dans votre magasin, Ecwid hôtes images et permet la charge rapide automatiquement. Pour être sûr de votre temps de charge est la meilleure possible, essayez de ne pas télécharger des images très grandes, par exemple, ceux en format 4K.

Il’s préférable d'utiliser des images carrées pour votre produit et de la catégorie d'images, comme des images carrées sont mobile-friendly et toujours bien paraître sur n'importe quel appareil. Découvrez Ecwid boutique de démonstration pour un exemple.

Ecwid prend en charge la rétine-prêt vignettes créées à partir de vos images de produits, alors n'’t vous inquiétez au sujet de votre boutique à la recherche de bonnes sur les écrans de la rétine!

Tout ce que vous avez à faire est de vous connecter à votre Panneau de Contrôle, ensuite, allez à Paramètres, puis “Quoi de neuf” pour activer la fonction.

the Ecwid Control Panel

En savoir plus: Comment Optimiser les Images de Produits: Étape Par Étape les Instructions et Un Aperçu des Services

Sur les médias sociaux:

En général, vous ne voulez pas utiliser la même image sur plusieurs réseaux sociaux — c'est pour mieux ajuster l'image à l'optimiser pour chaque réseau social. Découvrez Hubspot les médias sociaux, l'image de feuille de triche pour obtenir exactement les caractéristiques des images pour tous les réseaux.

Si vous avez d'importantes du texte dans vos images, assurez-vous que c'est facile à lire que quelqu'un passe à travers leur Facebook ou Twitter.

Assurez-vous d'optimiser vos listes pour avoir présenté des images qui semblent bonnes sur des sites comme Facebook et Twitter.

Par exemple, Twitter est auto-généré lien résumés (le Résumé de la Carte ou de la Carte de Résumé de la Grande Image — pour en savoir plus sur Twitter cards, la tête ici) utilisez soit la première image sur la page ou le produit vedette de l'image, comme:

Votre image en vedette doit être optimisé afin de bien regarder sur le lien aperçu

Votre image en vedette doit être optimisé afin de bien regarder sur le lien aperçu

Une partie de l'image des créateurs dans l'application de la section ci-dessous ont pré-faites médias sociaux, l'image de modèles que vous pouvez utiliser pour obtenir un début de saut.

Liées: Les meilleures Applications Gratuites pour Parfaire Vos Médias Sociaux Images

Dans votre newsletter:

Ne comptez pas sur les images pour transmettre des éléments importants de l'e-mail.

De nombreux fournisseurs de messagerie ne pas afficher les images par défaut (et donnera aux utilisateurs la possibilité d'afficher des images), donc, si vous avez d'importantes parties du message dans une image, un utilisateur peut analyser rapidement et de le manquer. Au lieu de cela, utiliser des images comme des accents visuels pour compléter les mots dans l'e-mail.

De plus en plus de gens sont la lecture des emails sur leurs téléphones, donc, assurez-vous de tester la méthode d'e-mails d'affichage sur les petits écrans en envoyant vous-même un test de copie de la lettre d'information et le lire sur votre téléphone.

Cela signifie également que vous souhaitez vous assurer que vos images sont d'une résolution suffisamment élevée pour bien paraître sur les écrans de téléphone — par exemple, l'iPhone 6 a un PPI (pixels par pouce) de 326 et la 6 plus a une IPP de 401.

Lire aussi: Où Trouver Gratuitement des Images sur le Web: Stock Photos, Les bases de données, et les Bulletins d'information

Les applications dont vous avez besoin pour optimiser vos images

Si vous voulez un gratuit Photoshop de remplacement, découvrez GIMP. C'est gratuit, open-source, et fonctionne sur Windows, Mac, ou Linux.

L'inconvénient est qu'il est un peu plus raide de la courbe d'apprentissage de Photoshop, mais il y a beaucoup de tutoriels en ligne pour vous aider à découvrir des choses.

Cela dit, GIMP (ou Photoshop) est probablement l'overkill pour la moyenne de votre blog/image du produit. PicMonkey peut vous aider à faire de base de retouche d'image, avec des collages et de la création d'images pour les médias sociaux.

Si vous souhaitez modifier vos images à la volée, Pixlr a plusieurs options d'application plus une option en ligne. Si vous êtes à la retouche des photos, VSCO est un excellent choix pour les

Dernier point, mais certainement pas moins, il y a Canva, ce qui est moins d'une image ou de la retouche photo app, et plus d'un graphique de l'outil de création d'images en ligne. Vous pouvez facilement ajouter du texte, cadres photo, horizons, et il offre également des médias sociaux prêts modèles d'image.

Toujours dans le besoin de produit des images à modifier? Pour un cours intensif sur la prise de photos des produits, à l'aide de votre smartphone, la tête ici.

Lire aussi: Comment Faire un Bon arrière-plan dans des Photos de Vos Produits Sans l'Aide de Photoshop

N'avez pas configuré votre boutique e-commerce encore? S'inscrire et commencez à utiliser Ecwid aujourd'hui.

A propos de l'auteur
Michelle is a freelance writer living in Richmond, VA, with her Shiba Inu and cat named after the Hulk. When she's not writing about business, she can usually be found working on her novel series or other side projects, or training Brazilian jiu-jitsu.

Stay up to date!

Get free e-commerce tips, news and inspiring ideas delivered directly to your inbox

Lire aussi