web-dev-qa-db-fra.com

Quand entrelacer une image?

En règle générale, quand convient-il de faire un gif entrelacé, un png entrelacé et un jpeg progressif?

Surtout lors de la publication de l'image sur le Web.

73
Timo Huovinen
  • JPEG: [~ # ~] oui [~ # ~] - tilisez le balayage progressif . Cela rend les fichiers plus petits ( chaque passe reçoit sa propre table de Huffman ), et le rendu partiel est plutôt bon.

  • GIF: [~ # ~] no [~ # ~] - il est peu probable que le fichier soit plus petit, le rendu partiel est médiocre et inutile pour les animGIF . C'est mieux ne pas utiliser du tout GIF ( oui, même pour les anims ).

  • PNG: [~ # ~] no [~ # ~] - la compression est douloureuse (les données de chaque passe sont statistiquement très différentes). Si l'image est volumineuse, utilisez si possible des formats JPEG ou PNG avec perte , car ceux-ci peuvent se charger plus rapidement qu'un aperçu pixélisé d'un fichier PNG de grande taille sans perte.

ImageOptim modifiera automatiquement les formats progressifs/entrelacés lorsqu'il réduira les fichiers.


Clause de non responsabilité pour les nitpickers:

  • Dans le cas d'images de taille petite à moyenne, l'aperçu progressif de chaque image ne sera pas visible suffisamment longtemps pour que l'utilisateur puisse l'apprécier. Certains navigateurs ne se soucient même pas de restituer quoi que ce soit jusqu'à ce que le fichier entier soit téléchargé, il est donc préférable de se concentrer sur la sauvegarde de la bande passante pour que toute la page soit chargée dès que possible.
  • Le format JPEG non progressif est un peu plus efficace lorsque les fichiers sont minuscules (petites vignettes), mais les économies réalisées sont également minimes.
  • iOS Safari a une taille d'image maximale autorisée plus élevée pour les images JPEG de base que pour les images progressives, mais la bonne solution consiste à servir des images d'une taille raisonnable pour les appareils mobiles.
100
Kornel

Ma règle générale : n'utilisez jamais d'entrelacement. Les formats entrelacés occupent généralement plus de place, ont (légèrement) plus de complexité et ont moins de prise en charge dans les décodeurs, et les avantages allégués pour l'expérience utilisateur sont au moins discutables. Quelques arguments pour PNG , et dans général .

Certaines personnes aiment les images entrelacées ou "progressives", qui se chargent progressivement. La théorie derrière ces formats est que l'utilisateur peut au moins regarder un proxy flou en taille réelle pour l'image pendant le chargement de tous les bits. En pratique, l'utilisateur est obligé de regarder un proxy pleine grandeur flou pour l'image pendant le chargement de tous les bits. C'est fini? Eh bien, ça a l'air un peu flou. Oh, attendez, le haut de l'image semble devenir un peu plus détaillé. Peut-être que c'est fait maintenant. C'est quand même un peu flou, cependant. Peut-être que le photographe n'utilisait pas de trépied. Oh, attends, ça a l'air de s'éclaircir maintenant ...

13
leonbloy

Les images entrelacées sont légèrement moins efficaces, mais apparaissent après un délai plus court côté client lorsqu'elles sont transportées sur le réseau. À mon humble avis, ils devraient être utilisés lorsque la durée de téléchargement attendue de l'image est suffisamment longue pour être perçue par l'utilisateur (par exemple, au-dessus de 1 seconde). La différence de taille de fichier est vraiment minime, il est donc préférable d'être trop prudent et d'utiliser trop d'entrelacement plutôt que trop peu.

Dans l'Internet haut débit commun à partir de 2012, je l'utilisais seulement pour chaque image> 100 Ko.

5
onon15

Ces points doivent être utiles.

L'entrelacement (plus généralement l'affichage progressif) est une méthode d'affichage d'images sur un moniteur. Quand l'utiliser? Votre décision devrait être basée sur ces facteurs:

•> Les images non entrelacées sont plus petites que les images entrelacées.
•> Les images entrelacées causent moins de scintillement que les non entrelacées
•> Les images entrelacées sont beaucoup plus faciles à voir.

L'entrelacement vous permet de voir l'image avant que toutes les données aient été transmises (leur donne une apparence plus rapide et plus belle) et vous donne le "sentiment" qu'elle est téléchargée plus rapidement.

CONSEIL: L’entrelacement n’est pas recommandé pour les petites images mais est indispensable si le téléspectateur utilise une connexion lente.

Ceci est juste une copie de Y réponses que je pensais pouvoir aider à comprendre. La réponse originale pourrait être trouvée à: https://answers.yahoo.com/question/index?qid=20090211121956AAz7Xz8

3
QMaster

Juste pour lancer mon argumentation dans l'argument suivant: Interlacing a été introduit il y a des années lorsque la vitesse de l'internet était lente, l'idée étant que l'image se présenterait de manière progressivement plus précise, tout en offrant un aspect général. à une image sans avoir à attendre le chargement complet.

L'entrelacement, aujourd'hui, est fondamentalement inutile et doit être utilisé en fonction de la taille globale de l'image transférée.

Les balayages progressifs sur images JPEG les images fournissent une image plus raffinée tout en essayant de réduire la taille globale du fichier (c’est-à-dire qu’il s’agit d’un mode de compression réel plutôt que d’une méthode de transmission en continu des bits constituant l’image).

Les PNG utilisent un algorithme plus complexe que GIF .

2
Paul

Il y a un article connexe intéressant sur les webmasters

https://webmasters.stackexchange.com/questions/574/progressive-jpeg-why-do-many-web-sites-avoid-rendering-jpegs-that-way-pros

Autrement dit, cela dépend de la manière dont ils vont être utilisés.

Cet article suggère qu’il existe un support limité - authentique - pour les images progressives. Et parfois, ils peuvent causer des problèmes avec les plugins qui ne supportent pas le format progressif.

J'espère que ça t'as aidé.

1
Simon Laing