Dimensionnement des images instructables : 13 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Avez-vous des problèmes pour obtenir une taille correcte des images ? Vos images sont-elles trop grandes et débordent-elles du cadre comme celle ci-dessus ? Cette instructable tente de résumer ce que j'ai appris pour résoudre ce problème.

Instructable Staff m'a dit que toutes les images téléchargées sont dupliquées dans divers rapports d'aspect. Ces pools d'images sont ensuite extraits et dimensionnés différemment en fonction de l'appareil à partir duquel vous visualisez l'instructable. Il n'y a aucun moyen de spécifier dans l'éditeur standard quelle taille et quel rapport afficher.

Ils ont ensuite suggéré qu'"une autre option qui peut fonctionner est de télécharger des images avec un rapport hauteur/largeur plus traditionnel. Tout ce qui va de 16:9 à 4:3 devrait s'afficher très bien."

Notez qu'ils disent que cela "peut" fonctionner. Voici ce que j'ai trouvé dans mes luttes pour que mes images s'affichent décemment. (Notez que j'utilise des images de mon instructable « Rubik's cube made easy », d'où toutes ces images de cube !)

L'image ci-dessus est sa taille d'origine (600x195) qui n'est pas dans cette gamme de rapports d'aspect traditionnels. Comme vous pouvez le voir, Instructables affiche cette image agrandie beaucoup trop grande avec les côtés gauche et droit coupés. Voyons ce que nous pouvons faire pour que cette image s'affiche correctement.

Étape 1: Essayons le format d'image 16:9

Essayons donc le rapport hauteur/largeur 16:9 (largeur:hauteur). Je vais garder la largeur d'origine de 600 pixels, 16:9 signifie que la hauteur doit être de 338 pixels, nous allons donc créer une taille de toile de 600x338 et y déposer cette image de 600x195.

Voyons donc à quoi ressemble cette image 600x338 (rapport d'aspect 16:9). Fait intéressant, lorsque j'ai déposé cette image et l'ai prévisualisée, elle s'est parfaitement ajustée - les bords gauche et droit n'ont pas été coupés ! J'en ai pris une capture d'écran juste pour preuve, voyez-la dans la diapositive suivante.

Mais, lorsque je vois cela dans mon navigateur (Chrome), ce que je vois dans l'image ci-dessus, c'est que les côtés droit et gauche sont à nouveau coupés ! Ainsi, d'après cette expérience, il apparaît que le redimensionnement à un format d'image 16:9 ne résoudra pas nos problèmes !

En passant, 16:9 est le "nouveau" format d'image commun connu sous le nom de "grand écran", tandis que 4:3 est le "plein écran" à l'ancienne qui était courant à l'époque de la télévision à tube. Ouais, vous les millennials n'avez probablement pas la moindre idée de ce dont je parle.

Étape 2: Image 16:9 fraîchement téléchargée telle que vue dans l'aperçu

Cette image est la capture d'écran montrant que notre image 16:9 est parfaite dans l'aperçu. Succès non ? Eh bien, pas si vite - voyez ce qui se passe lorsque nous affichons réellement cette page dans notre navigateur (Chrome) ! Les bords gauche et droit sont à nouveau tronqués ! Revenez en arrière pour laisser la diapositive précédente et voyez par vous-même.

Leçon apprise - ne faites pas confiance à l'aperçu ! Ce qui semble bien dans l'aperçu est rendu différemment lors de l'affichage réel avec un navigateur !

De plus, oui, il y a beaucoup d'espace blanc sous mon image. C'est parce que j'ai déposé une image 600x195 dans un canevas 600x338 et l'ai mise en haut, donc il y a tout cet espace blanc en bas. Que pouvons-nous faire à ce sujet? Eh bien… nous essaierons d'aborder cela dans une diapositive ultérieure.

Continuons donc à voir comment nous pouvons faire en sorte que cette image s'affiche dans son intégralité.

Étape 3: 16:9 affiché avec les côtés L&R coupés

Juste pour mémoire, au cas où, pour une raison quelconque, votre navigateur affiche parfaitement ces images 16:9, c'est de cela que je parle. Voici une capture d'écran de la façon dont je vois mon image 16:9 à l'étape 1 affichée après "l'installation" après l'aperçu initial - notez que la gauche et la droite sont coupées.

Si vous voyez mon image de l'étape 1 s'afficher parfaitement, eh bien, très bien. Fais-moi savoir! Mais c'est comme ça que je le vois. Oui, c'est bien mieux que l'image originale de la page de titre, mais elle est toujours coupée. Donc, pour moi, malgré les conseils du personnel d'Instructables, le rapport hauteur/largeur 16:9 ne suffit pas. Passons au format 4:3.

Étape 4: Essayons le format 4:3

Essayons donc le rapport hauteur/largeur 4:3. Je vais garder la largeur d'origine de 600 pixels, 4:3 signifie que la hauteur doit être de 450 pixels, nous allons donc créer une taille de toile de 600x450 et y déposer cette image de 600x195.

À quoi ressemble cette image de 600 x 450 (format 4:3) ?

Encore une fois, lorsque je la dépose pour la première fois, l'image est superbe (à l'exception de tout l'espace blanc en bas). Gauche et Droite s'affichent correctement. En le regardant dans un navigateur, il semble que la droite et la gauche semblent continuer à s'afficher correctement.

Comme indiqué précédemment, tout cet espace blanc sous l'image est dû au fait que j'ai déposé mon image 600x195 dans un canevas 600x450 et que je l'ai juste placée en haut.

Leçon apprise - Le format 4:3 semble être requis pour que les côtés droit et gauche ne soient pas coupés. Malheureusement, cela signifie qu'il y aura beaucoup d'espace blanc pour les images courtes et larges, car vous devrez déposer ces images dans un canevas de taille 4:3. Oui, vous pouvez centrer votre image de sorte qu'il y ait un espace blanc égal en haut et en bas, mais peu importe, il y aura beaucoup d'espace blanc au-dessus ou en dessous de votre image, mais à ma connaissance, c'est le compromis que vous ferez devez faire dans Instructables pour que vos images s'affichent intactes.

Étape 5: 4:3 avec image centrée

Voici la même image 600x195 déposée dans un canevas 600x450 mais centrée de sorte qu'il y ait un espace blanc vide égal en haut et en bas. C'est un peu mieux, le texte ne semble pas aussi éloigné de l'image.

Étape 6: 4:3 avec image en bas

Et enfin, voici cette même image déposée et déplacée vers le bas. Il y a maintenant une tonne d'espace blanc au-dessus de l'image. L'image est maintenant vraiment séparée de la barre de titre, mais elle est plus proche du texte. Voici donc vos compromis et les leçons apprises:

• 4:3 semble être le rapport hauteur/largeur que vous devez utiliser pour que les images soient affichées dans leur intégralité dans Instructables.
• ne faites pas confiance à l'aperçu - il peut montrer votre image parfaitement, mais des parties peuvent être tronquées dans le navigateur réel

Étape 7: Quelle est la largeur minimale ?

Voyons maintenant quelle devrait être la largeur minimale. L'image montrée est de taille 382x206, proche de 2:1, elle semble vraiment énorme n'est-ce pas ? De toute évidence, Instructables a agrandi l'image pour l'adapter à une certaine largeur définie, probablement 640 pixels, je ne suis pas sûr.

Mais il convient car il est plus "carré" - c'est-à-dire qu'il n'est pas trop large pour sa hauteur. Oh, attendez, j'ai encore été trompé par cet aperçu ! En fait, cela ne convient pas - les côtés R&L sont à nouveau tronqués.

En fait, c'est étrange, il n'y a pas que l'aperçu qui est foiré. En fait, je l'ai regardé dans le navigateur et au début, il s'est rendu correctement (c'est-à-dire que les bords R&L n'étaient pas coupés). Mais en la regardant à nouveau dans le navigateur, l'image est maintenant redimensionnée avec les bords R&L tronqués. Impair.

Essayons donc de réduire la taille de l'image. Nous allons réduire l'image à 200x108, en conservant le même rapport hauteur/largeur 2:1.

Étape 8: Réduire l'image mais conserver le rapport hauteur/largeur

J'ai donc redimensionné cette image à 200x108, en gardant le même rapport hauteur/largeur 2:1.

Maintenant, encore une fois, cela semble convenir au début (avec la résolution (qualité de l'image) considérablement détériorée !) meilleure résolution. Encore une fois, Instructables agrandit l'image pour l'adapter à une certaine largeur, c'est pourquoi cette image plus petite (200 x 108) a l'air si horrible, bien pire que l'original 382 x 206.

Je dis "probablement" parce que je n'ai vraiment aucune idée de la façon dont Instructables affiche ces images dans votre navigateur. Pour une raison quelconque, si je rafraîchis mon cache et révise cet Instructable, mes tailles d'image ne semblent pas rester cohérentes, donc je ne sais vraiment pas ce que fait Instructables, sauf que cela peut être incohérent. Ainsi, l'objectif de ce Instructable - savoir comment dimensionner les images afin qu'elles soient affichées au moins de manière assez cohérente !

Étape 9: prouver que les images s'affichent correctement au début

Voici ce que j'ai vu au début immédiatement après avoir téléchargé l'image - ça va ! (Notez que j'ai dû insérer la capture d'écran ci-dessus dans une image de 1600x1200 (c'est-à-dire au format 4:3) pour que Instructables affiche l'intégralité de la capture d'écran !)

Mais bien sûr, vous savez, lorsque vous regardez cette image, quelques glissades en arrière maintenant, cela ne correspond plus. Voyons quelle doit être la largeur minimale pour l'adapter.

Étape 10: Essayer 382 x 287 (rapport 4:3)

J'ai conservé la largeur de 382 et déposé l'image originale de 382 x 206 dans un canevas de 382 x 287 pour en faire un format 4:3, car nous avons déjà découvert qu'Instructable avait besoin d'une image adaptée à ce format 4:3 pour l'afficher dans son intégralité.

Alors maintenant, il y a beaucoup d'espace blanc en dessous. Il s'adapte sans rien coupé, mais encore une fois, il a été étendu pour remplir une certaine largeur, de sorte que l'image n'est pas nette. Essayons de trouver quelle est cette largeur Instructable parfaite.

Étape 11: Élargissement de l'image de 300x206 à 600x206 pour voir si elle s'affiche mieux

J'ai déposé l'image originale de 382x206 (2:1) dans un canevas de 600x206 (3:1) juste pour voir si l'élargir à 600 pixels ferait en sorte que Instructables affiche l'intégralité de l'image. Encore une fois, au début, c'était le cas, mais comme vous pouvez le voir, ce n'est plus le cas maintenant.

C'est la chose vraiment étrange - chaque fois que vous déposez une image pour la première fois, il semble qu'Instructables affichera cette image correctement, quelle que soit la taille ou le rapport hauteur/largeur de cette image. Cette fois, je me suis même déconnecté d'Instructables et j'ai fermé cet onglet, puis j'ai revisité cet Instructable « frais » pour ainsi dire pour vérifier si l'image s'affichait toujours correctement. Habituellement, cela suffit pour permettre à Instructable de faire son travail et de commencer à redimensionner les images qui ne sont pas au format 4: 3 et à les afficher avec les côtés gauche et droit coupés.

À ma grande surprise, les deux premières fois où j'ai revisité ce « frais » Instructable, cette image est restée affichée dans son intégralité, mais hélas, après que je sois parti pour faire autre chose et que je sois venu peut-être une heure plus tard, cette image a commencé à s'afficher agrandi avec les côtés L&R tronqués à nouveau comme vous le voyez ci-dessus.

Pourquoi ou comment cela se produit-il ? Je n'en ai aucune idée. Je ne sais pas pourquoi attendre un certain temps après le téléchargement d'une image ferait en sorte que Instructables la rende différemment, mais c'est le cas. Pour preuve, je vais montrer ma capture d'écran de l'image ci-dessus qui s'affiche parfaitement dans les premières oh, 10 à 15 minutes après l'avoir téléchargée dans la diapositive suivante.

Étape 12: Preuve que les images s'affichent correctement après le téléchargement

Voici une capture d'écran montrant cette image 600x206 affichée dans son intégralité immédiatement après le téléchargement. Ceci est une capture d'écran de la diapositive précédente. Revenez à la diapositive précédente et vous pouvez voir à quel point l'image est surélevée maintenant !

Notez que ma capture d'écran était en fait de taille 1563x766 mais comme je l'ai appris de mes expériences au début de cet Instructable, je savais qu'elle ne correspondait pas à ce rapport hauteur/largeur 4:3 (1563x766 est à peu près 4:2) donc si j'avais vient de télécharger cette capture d'écran dans sa taille d'origine Instructable tronquerait les bords. J'ai donc déposé cette image dans un canevas 4:3, c'est pourquoi il y a beaucoup d'espace blanc vide sous ma capture d'écran.

Notez que la capture d'écran a également été prise avant que je modifie le titre de l'étape 11 et que je finisse de saisir tout ce texte au cas où vous vous poseriez la question !

Leçon apprise - afficher votre image téléchargée dans un navigateur immédiatement après l'avoir téléchargée ne montrera pas nécessairement comment elle sera affichée à l'avenir. Pour une raison quelconque, presque toutes les images de taille et/ou de rapport hauteur/largeur semblent s'afficher correctement immédiatement après le téléchargement, et même pendant environ 10 à 15 minutes après le téléchargement et même après que vous vous êtes déconnecté d'Instructables et que vous l'avez visualisé à partir d'une nouvelle session de navigateur, etc..

Mais attendez environ une heure ou plus, et les choses changent ! Votre image, si elle ne correspond pas au rapport hauteur/largeur 4:3, sera ajustée (généralement agrandie) par Instructable afin que les bords soient tronqués.

Étape 13: Conclusion - Ce que j'ai appris

Donc en bout de ligne - qu'est-ce que j'ai appris ?

1. Pour afficher une image dans son intégralité, il est impératif de conserver un rapport hauteur/largeur 4:3 (largeur:hauteur) !

2. Utilisez des images originales de grande taille avec la résolution la plus élevée possible et déposez-les dans un canevas au format 4:3. S'il est trop grand, Instructables le redimensionnera et vous aurez de belles images nettes.

3. Si votre image est trop petite (beaucoup moins de 600 pixels de large), Instructable agrandira votre image et la rendra au moins 600 pixels de large, ce qui la rendra moins nette. Je dis « ish » parce que je ne sais pas vraiment quelle largeur Instructable utilise, mais cela semble proche de 600. C'est probablement 640, ce qui était une largeur courante à l'époque des moniteurs à tubes de la vieille école.

600x450 et 640x480 sont au format 4:3. Tous les moniteurs à tube "plein écran" de la vieille école étaient en 640x480 (largeur x hauteur).

4. Que faire si votre image originale n'a pas au moins 600 pixels de large ? À peu près tout ce que vous pouvez faire est de le déposer dans un canevas qui correspond au rapport 4:3 qui affiche votre image proche de sa taille d'origine. Si votre image d'origine est petite, il y aura beaucoup d'espace blanc vierge, alors essayez de centrer votre image ou placez l'espace blanc au-dessus ou en dessous de votre image et donnez-lui le meilleur aspect possible.

À ma connaissance, c'est le compromis que vous devrez faire dans Instructables pour que vos images s'affichent intactes.

À titre d'exemple, l'image ci-dessus est une taille de toile de 600 x 450 avec une image de 382 x 206 insérée et centrée de sorte que nous avons un espace blanc vide égal au-dessus et au-dessous. L'image s'affiche à peu près dans sa taille d'origine, je pense qu'Instructables pourrait l'étendre à 640x480 (expansion négligeable) donc c'est à peu près le mieux que nous puissions faire avec cette image originale.

5. Ne faites PAS confiance à l'aperçu ou à l'apparence de votre image pendant les premières heures après les avoir téléchargées dans Instructable ! Pour une raison quelconque, les tailles des images ne semblent pas rester cohérentes jusqu'à quelques heures après leur téléchargement.

Chaque fois que vous déposez une image pour la première fois, il semble qu'Instructables affichera cette image correctement, quelle que soit la taille ou le rapport hauteur/largeur de cette image. Il peut même continuer à s'afficher correctement pendant un certain temps par la suite, mais NE VOUS TROMPEZ PAS car cela finira par les redimensionner et vous poser des problèmes à moins que vous ne suiviez cette règle 4:3 !

J'espère que cela vous aidera et s'il vous plaît, si vous trouvez un meilleur moyen ou avez d'autres conseils, faites le moi savoir !