Affinity: Redimensionner une photo lors de l'export sans perte de qualité

[ilyasss]

Bonjour à tous,


J'ai un problème qui paraît assez simple.

En effet, je souhaite exporter un logo au format PNG en dimension 140*140 avec Affinity Photo dont l'original est une image vectorielle (donc pas de soucis de qualité).

Néanmoins, quand j'exporte le fichier, il est particulièrement pixelisé.

Comment conserver la qualité sans augmenter la dimension de l'image ?

Merci d'avance pour votre aide.

PS: Vous trouverez ci-joint une capture d'écran de l'image pixelisé (à gauche) et du rendu que je souhaite obtenir (à droite). Le rendu de droite étant simplement l'image original dézoomée.

 

[Gwen]

Ta capture mesure 206 x 240, logique que cela pixelise si tu as exporté ton image en 140 x 140. Il n'y a donc aucun souci. Tu ne peux obtenir l'image de droite, puisqu'elle fait plus de 140 x 140 pixels.

 

[magicPDF]

Bonjour.

Ce que tu nous montres n'est pas un logo, c'est un picto ou un clip-art.

 

[Gwen]

ROHHHH. Ce n’est pas gentil ça, même si c'est réaliste.

Ça pourrait être un logo, il y a un "B" autour des fruits

 

[magicPDF]

Je ne suis jamais gentil le lundi matin.

 

[JLB21]

Pourrais-tu donner des détails sur l'origine vectorielle de ce clip-art ? Parce que si j'exporte par exemple un eps depuis Affinity Photo en png, il n'y a pas de pixellisation…
Alors, je me demande comment fais-tu pour que ton image soit pixellisée ?

 

[Gwen]

Ça pixelise, car il a demandé un export à 140 pixels et sa prévisualisation est à 240 pixels. Logique

 

[Vinzzz25]

Bjr à tous ,
il m'arrive d'avoir le même prob ...
- j'ai reproduit son image sous illustrator (140*140) qui est à gauche ds la capture suivante
- je l'exporte en png (au centre) avec les infos de ce png (140*124)
=> moi aussi je trouve que le png est moins net que la vecto à gauche ... pourtant je suis en taille réelle

le fichier ai :
http://www.mediafire.com/file/0x1r7dxrv9cyr9w/MacGé.ai

 

[Gwen]

OK. Je crois comprendre. Ton écran ne serait pas Retina ? Si oui, Affinity doit travaillé en doublement de pixels pour t'afficher les images en taille réelle par rapport a un écran classique, alors que Illustrator optimise l'affichage a l'écran, quel que soit la taille.

Une seule chose est sûre, sur ta capture d'écran, ton logo n'est pas en 140 pixels.

 

[Gwen]

Je viens de tester, et chez moi, ton fichier (ou toute autre image) en 140 x 140 s'affiche bien en taille réelle sur Affinity photo ou Adobe Photoshop. Par contre, lorsque je l'ouvre avec Aperçu, il double de taille et donc pixelise sur mon écran rétina.

 

[Locke]

Il faudrait avoir le fichier d'origine, car même lorsque j'utilise toutes les possibilités j'ai toujours une pixelisation sauf sous Illustrator en utilisant le fichier de la réponse #8.

 

[Gwen]

Pour moi, il n'y a pas de pixelisation, il y a juste un affichage qui n'est pas à 100% des pixels affichés, mais a 100% d'un affichage non Rétina une fois ouvert avec Aperçu sur un ordinateur Rétina.

 

[ilyasss]

Bonjour à tous,



Merci pour vos précieux retours.



@gwen, j'ai effectivement un écran Retina. Ton explication semble pertinente. Ceux qui ont un écran non retina pourraient-ils confirmer cette explication avec le fichier ci-joint ?



En effet, le logo doit servir à illustrer un site géré sous Wordpress et il n'est pas concevable de le présenter tel quel. Par ailleurs, je remarque que certains sites affichent des logos d'une taille équivalente sans pixeliser... Je suppose dans ce cas qu'il y a dans le backoffice un fichier pour les écrans Retina et un fichier pour les écrans "standards" n'est ce pas ? Du coup, comment générer des images pour les écrans Retina ?


Merci d'avance pour votre aide

 

[Locke]

C'est l'image vectorielle qu'il serait intéressant d'avoir.

 

[magicPDF]

le fichier ai : http://www.mediafire.com/file/0x1r7dxrv9cyr9w/MacGé.ai

Exporté depuis Illutrator CS6 en PNG 72 ppp.
À gauche le PNG ouvert dans Photoshop, à droite le AI ouvert dans Illustrator (écran non Retina).

Par ailleurs, cet article devrait t'intéresser : https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/

.

 

[ilyasss]

Bonsoir à tous,

Merci @magicPDF je comprends mieux le problème. Donc en fait il faut que je génère des images avec un nombre de pixel doublé. Maintenant il s'agit de l'intégrer dans Wordpress...

Merci pour vos éclairages !

 

[pouppinou]

En effet, le logo doit servir à illustrer un site géré sous Wordpress et il n'est pas concevable de le présenter tel quel. Par ailleurs, je remarque que certains sites affichent des logos d'une taille équivalente sans pixeliser... Je suppose dans ce cas qu'il y a dans le backoffice un fichier pour les écrans Retina et un fichier pour les écrans "standards" n'est ce pas ? Du coup, comment générer des images pour les écrans Retina ?

Malheureusement avec la technologie qui avance il est vrai que la norme va évoluer doucement vers des écrans type Retina avec une définition X2 (soit 2x plus de pixels) par rapport aux écrans traditionnels il faut donc que la taille de ton image face 2X la taille réelle d'affichage dans ta page web. Inconvénient ça pèse lourd alors il faut optimiser au max. ton image (par exemple avec ImageOptim). Il faudra donc une image 280x280 pour l'afficher sur ta page en 140x140.
Personnellement je rajoute uniquement 50% de la taille d'affichage et à l'oeil cela passe bien.

Mais cela n'a rien à voir avec ta question de départ. Là c'est un problème de résolution d'image. Si tu ne fais pas attention à ton exportation il va te la mettre dans une résolution trop petite, d'où une image plus petite avec Aperçu ou alors une image de même taille mais pixelisée. A mon avis avec Affinity Photo il a dû te sortir ça en 72dpi pour que ce soit pixelisé par rapport à ton image vectoriel. Si tu sorts ton image en .png à 300dpi tu n'auras pas de problème, mais l'image sera plus lourde.

Voilà à toi de jouer entre la définition et la résolution et en tout cas optimisation ensuite pour le web.

 

[ilyasss]

@pouppinou, merci pour ton retour. J'ai doublé les pixels à 280*280 mais je galère un peu à faire en sorte que WP l'affiche en 140*140...

Effectivement ce n'est pas le problème de départ mais je me suis concentré sur l'objectif qui était la publication sur un site internet... J'ai bien compris le problème mais je ne trouve pas le moyen d'ajuster le DPI à l'exportation sur affinity sachant que le document orignal est déjà à 400 DPI pour info.

Je me permets de joindre au message le doc psd au cas où.


Merci à tous et bonne nuit à vous,

 

[Gwen]

Mais cela n'a rien à voir avec ta question de départ. Là c'est un problème de résolution d'image. Si tu ne fais pas attention à ton exportation il va te la mettre dans une résolution trop petite, d'où une image plus petite avec Aperçu ou alors une image de même taille mais pixelisée. A mon avis avec Affinity Photo il a dû te sortir ça en 72dpi pour que ce soit pixelisé par rapport à ton image vectoriel. Si tu sorts ton image en .png à 300dpi tu n'auras pas de problème, mais l'image sera plus lourde.

J'ai vraiment l'impression de pisser dans un violon dans cette conversation.

Donc, l'export s'est bien passé et a été demandé en 140 x 140 pixels. Les DPI, on s'en fiche royalement, car cela n'a AUCUNE influence sur le fichier final. Un fichier de 140 X 140 pixels, qu'il sorte à 72 ou 300 DPI ne changera rien pour la Prévisualisation à l'écran. (1)

Par contre, Photoshop ou Affinity photo affichent bien les images selon le nombre de pixels à l'écran. Donc, 140 pixels occupent bien 140 pixels de l'écran rétina.

MAIS... et c'est là où cela posait problème, le logiciel APERÇU affiche les pixels doublés afin de garder une taille « habituelle » aux images. Du coup, dans ce logiciel l'image paraît pixélisée (ce qui est le cas puisqu’elle occupe 280 x 280 pixels à l'écran).

Quand on ouvre a coté un fichier vectoriel, lui aussi occupe 280 x 280 pixels à l'écran, mais comme c'est une équation mathématique, le rendu est correcte et non interpolé d'une image en 140 pixels comme c'est le cas du logo original. Les pixels ne sont pas doublés en vectoriel comme ils peuvent l’être dans une image en pixels. Logique non ?

Pour vérifier tout cela, il suffit de découper la capture d'écran fournie au premier message.

J'espère que c'est clair pour tout le monde maintenant.

(1) : Pour le WEB, on ne travaille jamais en DPI, mais en Pixels. Les DPI (Dot Per Inche / Points par Pouce) est une mesure qui ne s'applique qu'au papier, les écrans étant tous de tailles (en pixels par pouce) différentes, ce qui este encore plus vrai avec l'arrivée des écrans Retina du coup.

 

[Vinzzz25]

Salut Gwen
Effectivement, pour ma part cela vient bien d'APERÇU ...
si je prends le fichier .png et que je le glisse ds mon navigateur , je n'ai pas cette pixellisation constatée ds APERÇU

bon ce n'est pas flagrant sur la capture ci-dessus
mais sur mon écran (5K, rétina ) oui