JPEG avec fond transparent

JPG nautorise pas les arrière-plans transparents.

La seule chose vous pouvez faire est davoir un fond plat de couleur qui se fondrait dans votre site Web: par exemple. si larrière-plan de votre site Web est blanc, créez des JPG avec un arrière-plan blanc.

Sinon, vous devez envisager denregistrer au format PNG, ce qui permet une véritable transparence.

Commentaires

• Est-ce une bonne idée dessayer de définir une couleur darrière-plan de fusion car elle nest peut-être pas homogène?
• @Amessihel Non, mais cest ‘ est la seule option si le format JPG est effectivement requis et si la transparence doit être simulée.

JPEG ne prend pas du tout en charge la transparence.

Loption la plus compatible est dutiliser le format PNG, mais entraîne des fichiers volumineux pour les photos car il sagit dune compression sans perte.

Une autre option consiste à utiliser le nouveau format de fichier WebP qui prend en charge à la fois la compression sans perte (comme PNG) et avec perte (comme JPEG), et autorise la transparence avec les deux. La prise en charge de WebP est relativement bon de nos jours, mais pas encore universel (notamment ni Safari ni IE ne prennent en charge mais Edge le fait).

Commentaires

• Concernant WebP, je pense plus particulièrement: Safari ne le prend actuellement pas du tout en charge (mobile ni desktop ). Cela élimine environ 25% de la part de marché totale du navigateur, y compris évidemment tous les iPhones.
• Prise en charge du navigateur WebP .
• Pourquoi aurait-on besoin de transparence dans les photographies haute résolution?
• @Crowley, envisagez une page  » à propos de  » avec des photos du personnel de la société ‘.
• @Mark Je ne trouve toujours pas de raison en utilisant la transparence. Un bon choix de larrière-plan de prise de vue est une manière beaucoup plus soignée.

Alors que le format JPEG ne peut « pas gérer la transparence elle-même, il est tout à fait possible davoir de la transparence à laide de fichiers JPEG avec les navigateurs modernes. Cependant, cest compliqué. Cela implique dutiliser SVG pour créer un masque décrêtage qui gère la transparence. Avec Photoshop, vous pouvez le faire avec loutil Plume, et puis exportez vers Illustrator, où vous pouvez convertir le chemin de loutil du crayon en SVG.

Voici un guide plus détaillé pour savoir comment faire oui.

Lastuce consiste à faire deux choses:

• Le JPG
• Le détourage

Le JPG est assez simple. Imprimez-le directement à partir de Photoshop. Optimisez.

Nous pouvons maintenant configurer le SVG. SVG est heureux de prendre e un graphique raster. SVG est connu pour les graphiques vectoriels, mais « un format dimage très flexible.

<svg> <image xlink:href="/images/chris.jpg" x="0" y="0"> </svg> 

Pour obtenir le chemin, nous exportons le chemin que nous avons créé avec loutil Plume vers Illustrator. Nous avons maintenant le chemin daccès là-bas, et il est facile de lexporter au format SVG [.]

Maintenant, nous avons les données de chemin dont nous avons besoin [.] Utilisons cela dans un dans le SVG que nous avons commencé. Ensuite, appliquez également ce chemin de clip à:

<svg viewBox="0 0 921.17 1409.71"> <defs> <clipPath id="chris-clip"> <path d="[path data from Illustrator]" /> </clipPath> </defs> <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409"> </svg> 

Alternativement, voici un outil qui convertira simplement un PNG en SVG avec JPEG incorporé . Lavantage par rapport à WebP est quil fonctionnera sous Internet Explorer (depuis la version 9) et Safari (depuis la version 3), y compris sous iOS.

Cela dit, la norme habituelle est en effet de simplement colorer larrière-plan JPEG pour correspondre à celui du site Web, ou pour utiliser un PNG 8 bits optimisé (en utilisant un outil comme PNGQuant pour convertir des PNG 32 bits normaux).

Commentaires

• En toute honnêteté, SVG avec un masque décrêtage nest pas jpg. Et un masque décrêtage est un niveau de complexité qui peut être souhaité ou non.
• @Scott Je suis daccord; ce nest pas ‘ t. Mais je ne ‘ pas lu la Question comme exigeant cela. ‘ ne dit pas un  » fichier JPEG contenant de la transparence  » mais seulement  » images pour le Web au format JPEG avec transparence,  » qui est plus ambigu. De plus, même si ce nest pas ce que le PO ou leur client voulait dire, je crois que les informations contenues dans ma réponse peuvent être pertinentes pour les futurs lecteurs qui recherchent et trouvent cette question à lavenir. Il ‘ est tout aussi valable que d’inclure des informations sur WebP ou de suggérer l’utilisation de PNG.
• Si vous avez besoin d’une transparence partielle, vous devez utiliser un masque (qui pourrait être un PNG séparé en niveaux de gris) au lieu de couper.
• Cest comme dire que vous pouvez conduire votre voiture au-dessus de locéan … si vous la mettez sur un bateau. Allez.
• Faire létape du stylet dans Photoshop juste pour exporter le chemin vers Illustrator pour lexporter au format SVG semble être une mauvaise utilisation des programmes – il suffit de faire létape du stylet dans Illustrator. Cela étant dit, cela semble à la fois compliquer le problème et être trop limitatif pour les pratiques modernes (par exemple, vous ne pouvez ‘ avoir une transparence partielle avec cette option). Sil y a la flexibilité de ‘ sur le format dimage, alors utilisez simplement PNG. Si limage source doit être un JPG, alors le masquage doit être fait avec un masque dimage en niveaux de gris comme ce que suggère Joey. Sauf besoins spécifiques, ce devraient être les deux seules options raisonnables.

JPEG 2000 (également connu sous le nom de JP2) est une version améliorée du format JPEG dorigine (à partir de 1992) qui prend également entièrement en charge la transparence, mais support épouvantable du navigateur (seul Safari le prend en charge).

Je suis daccord avec Lucian, utilisez simplement PNG, il est extrêmement bien pris en charge, et il existe de nombreux outils (pngcrush, optipng , pngout …) pour compresser les fichiers. Voir ici pour une comparaison.

En ce qui concerne ce que tylisirn a dit, je comprends la préoccupation concernant la taille du fichier, mais considérez ceci: cest la norme pour les pages Web à être gonflées, de nos jours. Cependant, dun autre côté, un temps de chargement rapide de la page laisse une bonne impression aux utilisateurs et a un effet positif sur le référencement .

Commentaires

• liés: rendu dimage progressif
• @ beppe9000 merci pour le lien ! En le lisant, on ma rappelé comment Facebook utilise des miniatures floues comme espaces réservés pendant quil télécharge limage réelle. Ce ‘ nest pas vraiment un chargement progressif, plus une distraction que des espaces vides, mais les micro-miniatures ont lavantage de prendre un espace négligeable (~ 200 octets). Cette technique pourrait certainement être appliquée au PNG, peut-être même au JPEG si elle prend en charge les métadonnées personnalisées, mais je ne pense ‘ que les navigateurs seraient intéressés à limplémenter … engineering.fb.com/android/the-technology-behind-preview-photos
• Belle ingénierie chez fb … Eh bien, je pense que ça ne marche pas ‘ sadapte très bien au contenu servi par différentes entités. WebP est probablement une alternative plus attrayante. Celui-ci est également une bonne lecture: développeurs.google.com/web/fundamentals/performance/…

Vous pouvez avec PHP et Imagick supprimer larrière-plan dynamiquement. (supprimer une couleur fushia par exemple). ~ vous créez un PNG / GIF à lexécution à partir de JPG (vous pouvez mettre en cache une image transparente dans un dossier pour éviter la surchauffe du serveur)

https://stackoverflow.com/questions/43544467/imagemagick-white-to-transparent-background-while-maintaining-white-object

Commentaires

• Une option intéressante, mais probablement pas pertinente car OP fournit simplement le fichier image à un client, qui ne conçoit ni nhéberge le backend de son site Web ‘ pour lui. En tant que telle, limage elle-même doit prendre en charge la transparence.

En raison de la nature de compression avec perte du JPEG compression, il nest pas recommandé de créer un JPEG avec un arrière-plan de couleur plate pour la chrominance car la couleur saignera dans les zones environnantes.

Selon la façon dont les images sont utilisées, fournir une image en niveaux de gris mat en plus de un JPEG standard peut suffire, car dans le format JEPG, la composante en niveaux de gris des données dimage est stockée à une résolution beaucoup plus élevée que les données de couleur. Celles-ci devraient être combinées à laide de lAPI canvas ou similaire.

Comme dautres lont mentionné, une meilleure solution serait dutiliser simplement un format comme PNG, qui prend naïvement en charge un canal alpha et est compatible avec le navigateur.

Avec lavènement de la propriété CSS3 mask-image, on pourrait fournir une image de masque alpha externe pour les JPEG, leur accordant ainsi le canal alpha ils manquent.

Commentaires

• Je n’étais ‘ pas au courant de cela, bon à savoir! Mais cela ne semble pas ‘ répondre à la question. Il ne semble pas ‘ que lOP soit directement impliqué dans le développement Web, mais a heurté un mur avec une demande mal informée dun client.
• Bien sûr. Mais, pour dautres qui recherchent des solutions similaires, cela peut savérer utile.

En dehors des cas limites présenté dans les autres réponses, un JPEG à toutes fins pratiques ne prend pas en charge la transparence.

Les formats les plus courants qui prendront en charge la transparence sont PNG, GIF et SVG.

Si aucun de ces les formats de fichier conviennent au client et un JPEG est requis pour une raison étrange, il vous suffit de fournir un JPEG pour chaque cas dutilisation.

Sils font une affiche, demandez-leur de vous dire laffiche colorer et fournir un JPEG avec un fond correspondant Sils impriment simplement sur du papier, un fond blanc devrait convenir. Sil est utilisé sur leur site Web, vous devrez fournir un arrière-plan adapté à chaque endroit utilisé sur le site Web.

Conseil: assurez-vous de facturer pour chaque cas dutilisation

Commentaires

• Inclure SVG dans cette liste est quelque peu trompeur, car ‘ est un format très différent des deux autres.
• @ Abion47 Even IE9 le prend en charge . Je dirais que nimporte quelle imprimerie digne de ce nom va demander un SVG car il les laissera exploser aussi gros que nécessaire.
• Vous ne comprenez pas mon point. Une image qui a commencé sa vie en tant quimage raster ne peut pas être enregistrée au format SVG de la même manière quelle peut être enregistrée au format PNG ou GIF. Si limage de OP ‘ était à lorigine dans un format vectoriel, alors elle doit absolument être conservée sous forme de format vectoriel aussi longtemps que possible. Mais si ‘ est une composition dimage (dans Photoshop, par exemple), alors le navire SVG a navigué depuis longtemps à moins quOP ne veuille effectivement refaire lensemble du projet afin de le sauvegarder sous un SVG.

Vous pouvez créer une image PNG avec transparence, puis la convertir en SVG contenant une couleur des informations au format JPEG et un canal alpha en tant que masque en niveaux de gris. Voici un outil que jai écrit pour le faire https://github.com/igrmk/transpeg

Oui, cest possible.

Créez simplement un chemin de détourage dans le panneau Chemins. Lors de lenregistrement du fichier au format JPEG, Photoshop stocke le chemin de détourage dans la section des métadonnées JPEG.

Notez que le chemin de détourage naura deffet que lorsque votre client ouvrira le fichier dans Photoshop, pas dans la plupart des autres programmes, spécifiquement pas dans les navigateurs Web.

Commentaires

•  » Mon client veut que je vous fournisse images pour le Web au format JPEG  »
• @Scott OTOH, cette réponse et celle JPEG2000 répondent en fait à la question comme écrit. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Non ils don ‘ t, car OP a spécifiquement demandé des images concernant leur utilisation sur le Web, donc ni les masques basés sur les métadonnées spécifiques à Photoshop, ni les formats dimage JPEG étendus avec un navigateur pratiquement inexistant supporte vraiment répondre aux besoins réels de OP ‘ tels quécrits dans la question .