Réduisez la taille des fichiers sans perdre en qualité

11

Je voudrais enregistrer des fichiers dans Photoshop mais les garder aussi petits que possible.

J'utilise Enregistrer pour le Web (et les appareils) et enregistrer au format JPEG. Voici les paramètres que j'ai utilisés:

Paramètres

Je ne veux vraiment pas abaisser les paramètres de qualité car j'utilise du texte et parfois je vois des artefacts si le paramètre est trop bas.

Cela produit des tailles de fichier de plusieurs centaines de kilo-octets en fonction de la taille de l'image. Bien que ce ne soit pas un problème énorme, ces images sont utilisées pour le Web et plus petites sont meilleures. Quelles sont les techniques sans réduire la qualité pour réduire la taille du fichier?

Mise à jour:

Pour ajouter plus d'informations ici:

La plupart des images que j'utilise et crée sont envoyées par e-mail. Cela limite considérablement ce que je peux faire en plaçant du texte en utilisant HTML et CSS sur l'image.

J'utilise également une variété de polices. Certains que je pourrais utiliser pour le Web à l'aide de CSS, @font-facemais vous pouvez exécuter des fichiers de grande taille et, dans certains cas, vous ne pouvez pas télécharger la police sur le Web légalement. Je pourrais utiliser un service comme Typekit mais encore une fois de nombreuses polices que j'utilise ne sont pas disponibles avec Typekit.

Voici un exemple d'image:

Exemple d'image

— L84
source

1

Il y a plusieurs réponses à cela - un exemple du type d'images dont vous parlez aiderait.

— e100

1

@ e100 - Je mets à jour la question pour fournir un exemple d'image et ajouter plus d'informations.

— L84

Question similaire: graphicdesign.stackexchange.com/q/3429/10419

— Kornel

Si vous contrôlez le côté du site Web, examinez les options de code / build. Je suis le concepteur d'une équipe Web professionnelle et nous livrons des vidéos plein écran sur un ordinateur de bureau / mobile sans grand succès. Les images, sauf si strictement nécessaires, sont des vecteurs SVG et chargées en tant que police. Réduit considérablement le nombre de Ko de page. Les bannières de héros d'une largeur de 2000 pixels sont au format JPG à 85% et les gars préchargent en arrière-plan. Le dispositif de l'utilisateur final est détecté et fournit des versions relatives du fichier (c'est-à-dire une version plus petite pour mobile). Au moment où l'utilisateur passe la page d'accueil, le chargement de l'écran est instantané. Et nous visons une page d'accueil de 2 secondes maximum.

— Applefanboy

15

Le choix de la meilleure méthode de compression dépend du contenu de votre image. Si vous essayez d'enregistrer une image avec beaucoup de couleurs et des transitions fluides entre elles, votre choix serait plutôt JPEG. Sinon, si vous avez du texte, une image linéaire avec quelques couleurs, vous devriez plutôt essayer PNG.

Le schéma de compression, les paramètres, la réduction des couleurs, etc. spécifiques dépendent du cas spécifique. Il existe certaines images que vous pouvez enregistrer en toute sécurité avec le "curseur" de compression JPEG réglé sur 30 ou 40 sans rendre les artefacts apparents. Certains autres nécessitent des paramètres de 80 ou plus. Votre œil devrait être le juge.

Lorsque nous parlons de compression JPEG, n'hésitez pas à essayer par exemple l'option "Progressive" ou à régler "Blur" sur une valeur non nulle (un flou subtil peut masquer des artefacts de compression sévères).

Dans le cas de PNG, vous devriez essayer de réduire autant que possible la quantité de couleurs utilisées (utilisez PNG-8 pour cela). Lorsqu'un "lissage" est nécessaire, essayez différents algorithmes de tramage.

Voici quelques exemples:

JPEG, Progressif, Qualité: 40, Flou: 0,18 JPEG, optimisé, qualité: 60, flou: 0 JPEG, Progressif, Qualité: 60, Flou: 0 PNG-8, tramage: diffus, 256 couleurs

De gauche à droite, de haut en bas, leurs paramètres sont:

JPEG, Progressif, Qualité: 40, Flou: 0,18, Taille: 9 672 octets
JPEG, optimisé, Qualité: 60, Flou: 0, Taille: 16 898 octets
JPEG, Progressif, Qualité: 60, Flou: 0, Taille: 11 104 octets
PNG-8, tramage: diffus, couleurs: 256, taille: 4528 octets

Comparez-les visuellement, puis examinez bien leurs tailles de données respectives. La première paire est d'environ 9,7 kB contre 16,9 kB. Le deuxième est de 11,1 kB contre 4,5 kB. Tout cela par (IMHO) différence visuelle négligeable.

— thebodzio
source

Ma plus grande préoccupation concernant l'option progressive est la prise en charge des clients de messagerie. J'ai ajouté plus d'informations à ma question pour expliquer cela.

— L84

1

Pour autant que je sache, «progressif» fait partie du standard JPEG et n'est pas quelque chose d'exotique, donc le support devrait être à presque 100%. Mais c'est «je pense» pas «je sais» :).

— thebodzio

Je suis d'accord et je pense que vous avez raison, j'avais posé cette question sur Webmaster SE et au pire des cas, les images s'afficheront mais pas avant d'être complètement chargées.

— L84

1

C'est exactement comme cela que "progressif" est censé fonctionner: il devrait afficher des versions de plus en plus détaillées de l'image consécutivement à mesure que davantage de données deviennent disponibles.

— thebodzio

Désolé, ce que je voulais dire, c'est que rien ne s'affiche du tout jusqu'à ce que l'image soit chargée vs chargement scan par scan.

— L84

10

Voici quelques options:

Utilisez un autre format que JPEG (PNG ou GIF); les résultats en termes de taille de fichier et de qualité d'image dépendront du contenu de votre image; chacun est meilleur à certains types de contenu
Rendre l'image plus petite en termes de pixels - cela aura un effet très significatif et devrait certainement être pris en compte si vous avez le contrôle sur la disposition globale
Utilisez des éléments non-image lorsque cela est possible, par exemple essayez de remplacer le texte des images par du texte HTML; essayez de remplacer les blocs de couleur par des éléments HTML.

En développant les deux derniers points, vous devriez chercher à minimiser l'étendue des images dans l'ensemble de vos mises en page avant de consacrer du temps à la réduction de la taille de fichier des images existantes.

— e100
source

2

Je vais essayer de répondre à certaines questions restées sans réponse:

La plupart des images que j'utilise et crée sont envoyées par e-mail. Cela limite considérablement ce que je peux faire en plaçant du texte en utilisant HTML et CSS sur l'image.

Vous pouvez envoyer des emails html (la façon dont les newsletters sont faites). Avec html et CSS en ligne (pour compatibilité). Les images doivent être sur un serveur et vous devez mettre l'URL complète dans les stylings / img-tags. Voici une liste de ce qui fonctionne dans différents clients de messagerie.

J'utilise également une variété de polices. Certains que je pourrais utiliser pour le Web en utilisant @ font-face de CSS, mais vous pouvez exécuter des fichiers de grande taille et dans certains cas, vous ne pouvez pas télécharger la police sur le Web légalement.

Essayez google webfonts , de loin la meilleure source de webfont. Tous libres d'utiliser. Un autre serait Font Squirrel . (Il utilise également @ font-face).

— Jannik Ruf
source

Merci pour les liens. J'ai parcouru certains sites Web de Campaign Monitors mais je n'ai pas vu la page CSS. Informations très utiles là-bas.

— L84

-1

Il n'y a aucun moyen de le faire. JPEG est un format avec perte. Il y a toujours un échange entre la qualité et la taille du fichier.

— wanting252
source

Toutes autres recommandations autres que l'utilisation de JPEG. Comment est PNG?

— L84

1

PNG est sans perte mais aussi assez grand. Où utilisez-vous cette image? Si c'est pour le web, il vaut toujours mieux coder le texte.

— Jannik Ruf

JPEG et GIF sont de bons choix pour l'affichage Web (le PNG est rarement utilisé). Mais cela dépend beaucoup de ce que vous voulez faire: arrière-plan, diaporama d'image, vignette ou icône, etc.

— wanting252

Si c'est seulement du texte sans effets (c'est-à-dire juste du texte blanc sur fond noir) Gif est bon et vraiment de petite taille.

— Jannik Ruf

4

Ce n'est pas vraiment une très bonne réponse. Il existe plusieurs façons de réduire la taille du fichier; il est incorrect de dire que le PNG est rarement utilisé sur le Web.

— e100