Photos pour un site Web: quoi tirer, où les obtenir, comment les accepter

Les photographies se font en dernier et décident d'abord

Sur une page de service, une personne voit l'image avant de lire le titre. La décision est ou non prise avant que le premier mot ne soit lu.

Et pourtant dans les projets la photographie est presque toujours laissée jusqu'à la fin: le design d'abord, puis le texte, puis quelqu'un devrait trouver quelques photos. Il finit par être assemblé dans une soirée à partir de ce qui est arrivé.

La différence apparaît immédiatement. Un site avec huit bonnes photos semble plus sérieux qu'un site avec quarante images de stock, et coûte moins cher.

Ci-dessous : quoi tirer, où l'obtenir, ce que vous ne devez pas utiliser, et comment accepter un tournage fini. Avec nos propres chiffres : dans un travail, nous avons préparé une centaine de photographies pour un catalogue de services et quarante couvertures pour la revue, et deux lots livrés ont dû être rejetés.

Que tirer : le jeu minimum

La liste est plus courte que prévu. Quatre catégories couvrent la plupart des sites.

L'objet ou le résultat. Ce que tu vends, tu tires donc c'est clair ce que c'est. Pour les services qui signifient le résultat: l'installation terminée, avant et après, l'ouvrage terminé.

Le processus. Comment cela se fait : mains, outils, étapes. Ceux-ci convainquent plus que le résultat final, parce qu'ils montrent que le travail est fait par les gens.

Les gens. Pas les portraits d'entreprise sur blanc, mais les gens qui font réellement le travail, dans leur propre environnement. Une photo honnête d'une équipe bat dix sourires.

Et l'endroit. Le bureau, l'atelier, l'entrepôt, le magasin. C'est la preuve de l'existence, et rien ne la remplace.

Capture, stock ou produit

Trois sources, chacune ayant son propre rôle, et la bonne réponse est généralement un mélange.

Votre propre tournage est irremplaçable partout où vous montrez quelque chose spécifiquement le vôtre : le produit, le site, l'équipe, les locaux. Stock ne fonctionne pas du tout ici — un acheteur peut dire à votre atelier de quelqu'un d'autre.

Stock convient aux fonds et à l'abstraction: une couverture d'article, une illustration de section, une image qui ne prétend pas être la vôtre. La seule condition n'est pas de la passer comme la vôtre.

Les images produites conviennent aux mêmes endroits que le stock et donnent plus de contrôle sur le format et le traitement. Nous avons fait cela avec des couvertures de journal: quatre cent soixante-quatre pièces, chacune avec sa propre image à une seule taille.

Une règle pratique : si une personne peut vérifier une revendication de la photographie, tirez-la vous-même. Si la photographie illustre une idée plutôt qu'un fait, quelque chose de prêt à faire.

Ce que vous ne devez pas utiliser, et pourquoi il est cher

Une courte liste de ce qui rejoint régulièrement les sites Web et ne devrait pas.

Photographies tirées des résultats de la recherche. Il semble inoffensif jusqu'à ce qu'un titulaire de droits entre en contact. La vérification est automatisée, effectuée par une recherche d'image inversée, et elle trouve des choses.

Images portant les logos d'autres entreprises. Cela apparaît aussi dans les images générées : le modèle insère des marques reconnaissables parce qu'il les voyait en formation. Un lot qui nous a été livré a dû être entièrement rejeté pour exactement cela — de vrais logos de services bien connus se trouvaient dans les cadres.

Shots où un appareil affiche une interface qui n'existe pas. Le deuxième lot rejeté était que : inventé fenêtres d'application posées sur les écrans. Quelqu'un qui travaille sur l'interface est fictif arrête de croire le reste aussi.

Et des photos de gens qui n'ont jamais été interrogés. C'est son propre sujet, et la loi varie selon le pays, mais la règle quotidienne est simple: si une personne est reconnaissable, vous avez besoin de leur accord.

Cadrage cohérent bat beau cadrage

Un point non évident qui gâche plus de sites que la mauvaise photographie.

Vingt excellentes photographies dans des proportions différentes semblent pires sur une page que vingt moyennes dans la même proportion. L'incohérence des cultures se lit comme une négligence, même lorsque chaque cadre est bon seul.

Donc la première décision n'est pas comment tirer mais à quel rapport d'aspect. Les pages de produit prennent généralement un carré ou un droit; les couvertures et les en-têtes prennent un cadre horizontal large.

Ce ratio est alors maintenu partout. Un cadre carré monté dans une fente large en ajoutant des barres floues sur les côtés n'est pas une solution : il ressemble à une erreur parce qu'il en est une. Un de nos lots rejetés était exactement cela.

Et regarde la lumière. Huit images dans une tonalité lisent comme une série. Huit cadres tournés sous un éclairage différent lisent comme un assortiment aléatoire.

Taille, poids et format

Exigences techniques à noter une fois et à remettre à un photographe avec le mémoire.

Rapport d'aspect et taille du pixel pour chaque emplacement sur le site. Pour les images larges, une largeur d'environ quinze cent à deux mille pixels est généralement suffisante: plus ajoute aucune différence visible et beaucoup de poids.

Poids du fichier. Un guide pour une grande image est un à deux cents kilooctets après compression. Nous avons tenu une centaine de photographies de catalogue à une moyenne de cent quarante-sept kilo-octets; l'ensemble est venu à quatorze méga-octets.

Modèle. Les formats modernes donnent moins de poids à la même qualité, et la plupart des moteurs les servent automatiquement tout en conservant l'original dans un format familier. Les préparer à la main est généralement inutile.

Et toujours les originaux. Demandez des images en taille réelle, pas seulement les versions préparées pour le site. Dans un an, vous aurez besoin d'un format différent, et les coûts de rappel plus.

Images chargées depuis le serveur de quelqu'un d'autre

Une erreur séparée qui ressemble à une sauvegarde et se transforme en trous sur vos pages.

C'est là qu'une image ne se trouve pas sur votre site, mais se charge par lien de quelqu'un d'autre. Il est pratique et libre jusqu'à ce que ce site bouge, ferme ou modifie ses adresses.

Nous avons travaillé à travers cela sur notre propre journal: de quatre cent soixante-quatre pièces, cent quatre-vingt-huit ont tiré leur couverture d'une adresse extérieure, et deux ne s'ouvrent plus. Tous ont été amenés à l'interne.

Il ne s'agit pas seulement de fiabilité. Le serveur de quelqu'un d'autre répond plus lentement que le vôtre, vous ne contrôlez pas sa compression, et vous ne pouvez pas servir un format moderne.

La règle est simple : tout ce qui est affiché sur votre site devrait vivre sur votre site.

Alt texte et noms de fichiers

Deux petites choses qui ne coûtent presque rien et qui ne sont presque jamais faites.

Le texte Alt décrit une image pour ceux qui ne peuvent pas la voir : les personnes utilisant des lecteurs d'écran et les fouilleurs. Écrivez une phrase décrivant ce qui est dans le cadre, pas une liste de requêtes.

Un installateur installant des conduits de ventilation dans un plat est un texte alt. L'installation de ventilation installe la ventilation est une liste de mots, et elle fait du mal.

Les images décoratives n'ont pas besoin de texte alt : une valeur d'attribut vide est plus correcte que la description d'une texture de fond. Un lecteur d'écran saute simplement une telle image.

Les noms de fichiers sont les mêmes en miniature. Un nom comme ventilation-installation-plat bat IMG 4821 et coûte une minute au téléchargement.

Où les images ralentissent un site

Les images sont la cause la plus courante de chargement lent, et ce n'est généralement pas leur nombre.

Premièrement : les fichiers non compressés. Un cadre directement d'une caméra pèse plusieurs mégaoctets. Dix de ceux sur une page est trente mégaoctets, que quelqu'un sur un téléphone dépense une demi-minute de téléchargement.

Deuxièmement : aucune dimension dans le marquage. Si le navigateur ne sait pas à l'avance à quel point une image sera grande, la page saute pendant le chargement — le texte se déplace vers le bas et une personne manque le lien qu'elle vise. Il s'agit d'une métrique mesurée qui influe sur la façon dont la page est notée.

Troisièmement : tout se charge en même temps. Les images sous le premier écran doivent se charger sur défilement plutôt qu'avec le reste de la page.

Et quatrièmement : une énorme image pour chaque appareil. Un téléphone n'a pas besoin d'un cadre de deux mille pixels, mais il obtient un si le site ne sert pas différentes tailles à différents écrans.

Comment accepter une prise de vue

La liste de contrôle que nous utilisons sur les lots livrés. Il est court et il capture presque tout.

Chaque cadre au même rapport d'aspect, sans aucun ajustement par des barres floues.

Aucun cadre portant le logo, la signalisation ou la marque reconnaissable d'une autre entreprise.

Aucun cadre portant une interface inventée ou un texte illisible.

Éclairage et tonalité de couleur à travers les cadres.

Les originaux de taille complète fournis, pas seulement les versions préparées pour le site.

Un lot qui échoue même un point revient en entier. Accepter la moitié et retirer le reste est moins cher que de travailler sur quels cadres particuliers sont gâtés.

Notre parcours : cent quarante images

Les résultats d'un travail, donc les chiffres ne sont pas abstraits.

Une centaine de photographies pour le catalogue des services : un format large, une moyenne de cent quarante-sept kilo-octets par cadre, quatorze mégaoctets pour l'ensemble. Toutes les cent entrées de catalogue ont reçu une image de leur propre.

Quarante couvertures pour le journal. Le travail n'était pas de rendre les choses jolies, mais d'éliminer les répétitions : un détenteur de place était debout sur des dizaines de pièces, et cela semblait pire qu'aucune image du tout.

Deux lots rejetés. La première : des cadres carrés adaptés à un format large avec des barres floues, plus de vrais logos de services d'autres entreprises. La seconde : a inventé des interfaces posées sur des écrans de périphérique.

Et une leçon sur le processus: dans un lot de dix, les fichiers sont arrivés dans un ordre différent de la liste les décrivant. Nous les avons assignés par position et nous nous sommes tous trompés par un. Depuis lors, chaque cadre est identifié par son contenu, jamais par sa place dans une liste.