14 outils d'image et de conception gratuits qui s'exécutent dans votre navigateur

Le travail de l’image pose un problème spécifique : le travail est généralement petit et les outils proposés sont énormes. Vous devez supprimer 400 Ko d'une image de héros, ou obtenir une valeur hexadécimale mentionnée par votre concepteur, ou générer un favicon que personne n'a encore créé. Cela ne nécessite pas d'abonnement.

Les quatorze outils ci-dessous couvrent la préparation des images, le travail avec la couleur, la génération d'effets CSS et les petits actifs de production qui passent entre les mailles du filet. Chacun fonctionne localement, ce qui compte plus pour les images que pour le texte : la photo que vous venez de compresser est souvent une photo que vous n'avez pas encore publiée.

La plupart des problèmes d’image sont en réalité des problèmes de poids. Une page qui semble lente contient généralement des images plus grandes que leur taille d'affichage, dans le mauvais format, avec un paramètre de qualité que personne n'a jamais remis en question.

Combien faut-il compresser ? La réponse honnête est la suivante : jusqu’à ce que cela semble faux, reculez d’un pas. Pour une image de héros photographique, une qualité de 70 à 80 pour cent est généralement impossible à distinguer de l'original à une taille de visualisation normale. Pour un logo, une capture d'écran ou tout autre objet avec des couleurs plates et des bords nets, utilisez PNG et compressez plus fort : ils gagnent plus et perdent moins.

Une règle empirique pratique : tout ce qui est inférieur à 200 Ko convient pour une image de héros, moins de 80 Ko pour une vignette, et si vous ne pouvez pas descendre en dessous de 300 Ko, vous avez probablement un problème de dimension plutôt qu'un problème de qualité.

La conversion d'une image en URI de données Base64 supprime une requête HTTP, ce qui ressemble à une pure victoire. Ce n’est généralement pas le cas. La chaîne codée est environ un tiers plus grande que le fichier binaire, elle ne peut pas être mise en cache séparément et elle gonfle votre CSS ou HTML.

En ligne uniquement lorsque l'image est petite (moins de quelques kilo-octets) et est utilisée une seule fois et est critique. Une petite icône dans un seul modèle d’e-mail est le cas classique. Pour tout ce qui se répète sur plusieurs pages ou dépasse quelques kilo-octets, servez-le comme fichier et laissez le navigateur le mettre en cache.

Soyez clair sur ce que cela fait. Il supprime ou obscurcit la marque visible. Il ne peut pas reconstruire les pixels sous-jacents : les informations qui ont été peintes ont disparu et aucun filtre ne les réinvente. Les résultats vont d'invisible, lorsque la marque se trouve sur un fond uni, à une tache évidente lorsqu'elle se trouve sur des détails.

Une dernière chose qui mérite d'être dite clairement : supprimer le filigrane de quelqu'un d'autre et publier le résultat est un problème de droit d'auteur dans la plupart des juridictions et une violation de licence, que vous soyez ou non pris. Supprimer les marques de vos propres images ou du stock sous licence pour lequel vous disposez est le cas pour lequel cet outil est destiné.

La couleur est l’endroit où les petites erreurs deviennent très visibles. Un rapport de contraste qui manque d'accessibilité, une valeur hexadécimale qui est en fait un triple HSL, une palette qui semble cohérente sur votre moniteur et trouble sur un projecteur.

Une mise en garde concernant les outils couleur : ils supposent tous que votre moniteur est calibré et que la personne qui consulte votre page a des yeux fonctionnels. Aucune des deux hypothèses n’est sûre. C’est une raison pour préférer les combinaisons contrastées aux combinaisons subjectives.

Écrire à la main un dégradé ou une ombre superposée est une tâche véritablement désagréable. La syntaxe est délicate, vous ne pouvez pas voir ce que vous produisez et la différence entre une bonne et une mauvaise ombre réside dans quelques pixels de flou.

L’astuce pour tous les quatre est la retenue. Deux ombres – une sombre et étroite et une large et douce – se lisent comme une élévation physique. Une ombre se lit comme un site Web datant d’il y a quinze ans. Générez, copiez, puis supprimez jusqu'à ce que vous ne puissiez pas savoir qu'il est là.

Voici l'ensemble du cluster effectuant un vrai travail. Une page a besoin d'un héros avec une image d'arrière-plan, un en-tête et un bouton, et rien n'a encore été construit.

Cinq outils, pas de suite de conception et chaque sortie est une valeur que vous pouvez coller directement dans le code.

Mes images sont-elles téléchargées n'importe où ? Non. La compression, le redimensionnement et la conversion Base64 se produisent tous dans votre navigateur, c'est la raison pour laquelle il n'y a pas de limite de taille de fichier ni de file d'attente de téléchargement.

La compression d'une image va-t-elle perdre en qualité ? Toujours, par définition. La question est de savoir si cela est visible. Avec une qualité de 70 à 80 pour cent et des dimensions correctes, ce n'est généralement pas le cas.

Pourquoi mon image redimensionnée semble-t-elle toujours grande ? Neuf fois sur dix, vous la compressez avant de la redimensionner, ou vous l'enregistrez au format PNG alors qu'une photo est meilleure au format JPEG.

Puis-je les utiliser pour le travail d'un client ? Oui, sans attribution ni restriction commerciale.

Fonctionnent-ils sur un téléphone ? Oui, bien que le redimensionnement et la compression de grandes photos sur un téléphone dépendent de la mémoire de votre appareil plutôt que d'un serveur.

Redimensionnez avant de compresser, vérifiez le contraste avant de discuter de couleur, gardez les ombres subtiles et n'oubliez jamais le favicon. De toute façon, c’est l’essentiel de ce qu’une suite de design faisait pour vous.