Größe anweisbare Bilder - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:21

Haben Sie Probleme, Bilder richtig zu skalieren? Sind Ihre Bilder viel zu groß und überlaufen den Rahmen wie oben? Diese instructable Versuche, zusammenzufassen, was ich gelernt habe, um dieses Problem anzugehen.

Mir wurde von Instructable Staff gesagt, dass alle hochgeladenen Bilder in verschiedene Seitenverhältnisse dupliziert werden. Dieser Bilderpool wird dann gezogen und unterschiedlich dimensioniert, je nachdem, von welchem Gerät Sie das anweisbare anzeigen. Es gibt keine Möglichkeit, im regulären Editor anzugeben, welche Größe und welches Verhältnis angezeigt werden soll.

Sie schlugen dann vor: "Eine andere Option, die möglicherweise funktioniert, besteht darin, Bilder mit einem traditionelleren Seitenverhältnis hochzuladen. Alles von 16:9 bis 4:3 sollte sehr gut angezeigt werden."

Beachten Sie, dass sie sagen, dass dies "kann" funktionieren kann. Hier ist, was ich in meinen Bemühungen gefunden habe, meine Bilder anständig anzuzeigen. (Beachten Sie, dass ich Bilder aus meinem "Rubiks Würfel leicht gemacht" verwende, daher all diese Würfelbilder!)

Das obige Bild hat seine Originalgröße (600x195), die nicht in diesem Bereich der traditionellen Seitenverhältnisse liegt. Wie Sie sehen können, zeigt Instructables dieses Bild viel zu groß vergrößert an, wobei die linke und rechte Seite abgeschnitten sind. Mal sehen, was wir tun können, damit dieses Bild richtig angezeigt wird.

Schritt 1: Versuchen wir es mit dem Seitenverhältnis 16:9

Versuchen wir es also mit dem Seitenverhältnis 16:9 (Breite:Höhe). Ich behalte die ursprüngliche Breite von 600 Pixeln bei, 16:9 bedeutet, dass die Höhe 338 Pixel betragen muss, also erstellen wir eine Leinwandgröße von 600 x 338 und legen das 600 x 195-Bild hinein.

Sehen wir uns also an, wie dieses Bild mit 600 x 338 (Seitenverhältnis 16:9) aussieht. Interessanterweise passte es perfekt, als ich dieses Bild einfügte und in der Vorschau ansah - der linke und der rechte Rand wurden nicht abgeschnitten! Ich habe einen Screenshot davon nur zum Beweis gemacht, siehe auf der nächsten Folie.

Aber wenn ich dies in meinem Browser (Chrome) sehe, sehe ich im obigen Bild, dass die rechte und linke Seite wieder abgeschnitten sind! Aus diesem Experiment geht also hervor, dass eine Größenänderung auf ein Seitenverhältnis von 16:9 unsere Probleme nicht lösen wird!

Als Randnotiz ist 16:9 das "neue" gängige Seitenverhältnis, das als "Breitbild" bekannt ist, während 4:3 das "Vollbild" der alten Schule ist, das in den Tagen des Röhrenfernsehens üblich war. Ja, ihr Millennials habt wahrscheinlich keine Ahnung, wovon ich rede.

Schritt 2: 16:9-Bild frisch hochgeladen, wie in der Vorschau angezeigt

Dieses Bild ist der Screenshot, der zeigt, dass unser 16:9-Bild in der Vorschau perfekt aussieht. Erfolg oder? Nun, nicht so schnell - sehen Sie, was passiert, wenn wir diese Seite tatsächlich in unserem Browser (Chrome) anzeigen! Die linke und rechte Kante werden wieder abgeschnitten! Gehen Sie einfach zurück, um die vorherige Folie zu sehen und überzeugen Sie sich selbst.

Lektion gelernt - vertrauen Sie der Vorschau nicht! Was in der Vorschau gut aussieht, wird bei der tatsächlichen Anzeige mit einem Browser anders gerendert!

Ja, es gibt auch viel Weißraum unter meinem Bild. Das liegt daran, dass ich ein 600 x 195-Bild auf eine 600 x 338-Leinwand gelegt und oben platziert habe, sodass unten der ganze leere weiße Raum ist. Was können wir dagegen tun? Nun, wir werden versuchen, das in einer späteren Folie zu behandeln.

Sehen wir uns also weiter an, wie wir dieses Bild vollständig anzeigen können.

Schritt 3: 16:9 mit abgeschnittenen L & R-Seiten angezeigt

Nur für den Fall, dass Ihr Browser aus irgendeinem Grund diese 16:9-Bilder perfekt anzeigt, hiervon rede ich. Hier ist ein Screenshot, wie ich mein 16:9-Bild in Schritt 1 nach dem "Einleben" nach der ersten Vorschau angezeigt sehe - beachten Sie, dass links und rechts abgeschnitten sind.

Wenn Sie sehen, dass mein Bild aus Schritt 1 perfekt angezeigt wird, na ja, großartig. Gib mir Bescheid! Aber so sehe ich es. Ja, es ist viel besser als das Originalbild von der Titelseite, aber es ist immer noch abgeschnitten. Für mich schneidet das Seitenverhältnis 16:9 trotz der Ratschläge der Instructables-Mitarbeiter nicht ganz. Kommen wir zum Seitenverhältnis 4:3.

Schritt 4: Versuchen wir es mit dem Seitenverhältnis 4:3

Versuchen wir es also mit dem Seitenverhältnis 4:3. Ich behalte die ursprüngliche Breite von 600 Pixeln bei, 4:3 bedeutet, dass die Höhe 450 Pixel betragen muss, also erstellen wir eine Leinwandgröße von 600 x 450 und legen das 600 x 195-Bild darin ab.

Wie sieht dieses Bild mit 600 x 450 (Seitenverhältnis 4:3) aus?

Auch hier, wenn ich es zum ersten Mal einlege, sieht das Bild großartig aus (mit Ausnahme des ganzen weißen Raums unten). Links und Rechts werden gut angezeigt. Wenn man es in einem Browser betrachtet, scheint es, als würden Rechts und Links weiterhin gut angezeigt.

Wie bereits erwähnt, ist der ganze leere weiße Raum unter dem Bild darauf zurückzuführen, dass ich mein 600 x 195-Bild auf eine 600 x 450-Leinwand gelegt und einfach oben platziert habe.

Lektion gelernt - 4:3-Seitenverhältnis scheint erforderlich zu sein, damit die rechte und die linke Seite nicht abgeschnitten werden. Leider bedeutet dies, dass für kurze und breite Bilder viel Weißraum vorhanden ist, da Sie diese Bilder auf eine Leinwand im Format 4:3 ablegen müssen. Ja, Sie könnten Ihr Bild so zentrieren, dass oben und unten gleich viel Weißraum vorhanden ist, aber unabhängig davon wird viel Weißraum über oder unter Ihrem Bild sein, aber nach meinem besten Wissen ist dies der Kompromiss, den Sie eingehen werden müssen in Instructables machen, damit Ihre Bilder intakt angezeigt werden.

Schritt 5: 4:3 mit Bild zentriert

Hier ist das gleiche 600 x 195-Bild, das in eine 600 x 450-Leinwand eingefügt wurde, jedoch zentriert, sodass oben und unten gleich viel Leerraum vorhanden ist. Sieht etwas besser aus, der Text scheint nicht so weit vom Bild getrennt zu sein.

Schritt 6: 4:3 mit Bild unten

Und schließlich ist hier das gleiche Bild eingefügt und nach unten verschoben. Jetzt gibt es eine Menge leerer weißer Flächen über dem Bild. Das Bild ist jetzt wirklich von der Titelleiste getrennt, aber es ist näher am Text. Das sind also Ihre Kompromisse und Lektionen:

• 4:3 scheint das Seitenverhältnis zu sein, das Sie verwenden müssen, damit Bilder vollständig in Instructables angezeigt werden.
• Vertrauen Sie der Vorschau nicht - sie zeigt Ihr Bild möglicherweise perfekt, aber Teile könnten im tatsächlichen Browser abgeschnitten werden

Schritt 7: Was ist die Mindestbreite?

Sehen wir uns nun an, was die minimale Breite sein sollte. Das gezeigte Bild hat eine Größe von 382x206, fast 2:1, es scheint wirklich riesig zu sein, nicht wahr? Offensichtlich hat Instructables das Bild vergrößert, damit es auf eine bestimmte Breite passt, wahrscheinlich 640 Pixel, ich bin mir nicht sicher.

Aber es passt, weil es "quadratischer" ist - d.h. es ist nicht zu breit für seine Höhe. Oh warte, ich wurde wieder von dieser Vorschau ausgetrickst! Es passt eigentlich nicht - die R&L-Seiten sind wieder abgeschnitten.

Eigentlich ist das seltsam, es ist nicht nur die Vorschau, die durcheinander ist. Ich habe es mir tatsächlich im Browser angesehen und es zuerst richtig gerendert (dh die R&L-Kanten wurden nicht abgeschnitten). Aber wenn man es noch einmal durch den Browser betrachtet, wird das Bild jetzt in der Größe mit abgeschnittenen R&L-Kanten gerendert. Seltsam.

Versuchen wir also, das Bild zu verkleinern. Wir verkleinern das Bild auf 200 x 108, wobei das gleiche Seitenverhältnis von 2: 1 beibehalten wird.

Schritt 8: Das Bild verkleinern, aber das Seitenverhältnis beibehalten

Also ändere ich die Größe dieses Bildes auf 200x108 und behalte das gleiche Seitenverhältnis von 2: 1 bei.

Jetzt scheint es wieder zu passen (mit der Auflösung (Bildqualität) stark verschlechtert!) bessere Auflösung. Auch hier erweitert Instructables das Bild, damit es auf eine bestimmte Breite passt. Deshalb sieht dieses kleinere (200 x 108) Bild so schrecklich aus, viel schlimmer als das ursprüngliche 382 x 206.

Ich sage "wahrscheinlich", weil ich wirklich keine Ahnung habe, wie Instructables diese Bilder in Ihrem Browser anzeigt. Aus irgendeinem Grund, wenn ich meinen Cache aktualisiere und dieses Instructable überprüfe, scheinen meine Bildgrößen nicht konsistent zu bleiben, so dass ich wirklich nicht weiß, was Instructables tut, außer dass es inkonsistent sein kann. Somit ist das Ziel dieses Instructable - herauszufinden, wie man Bilder so dimensioniert, dass sie zumindest einigermaßen konsistent angezeigt werden!

Schritt 9: Beweisen Sie, dass Bilder zuerst richtig gerendert werden

Das habe ich direkt nach dem Hochladen des Bildes als erstes gesehen - es passt! (Beachten Sie, dass ich den obigen Screenshot in ein 1600 x 1200-Bild (d. H. 4: 3-Verhältnis) einfügen musste, damit Instructables den gesamten Screenshot anzeigt!)

Aber natürlich weißt du, wenn du dir das Bild anschaust, das jetzt ein paar zurückrutscht, es passt nicht mehr. Mal sehen, was die Mindestbreite sein muss, damit es passt.

Schritt 10: 382x287 (4:3 Verhältnis) ausprobieren

Ich habe die Breite von 382 beibehalten und das ursprüngliche 382 x 206-Bild in eine 382 x 287-Leinwand gelegt, um ein Seitenverhältnis von 4: 3 zu erhalten, da wir zuvor festgestellt haben, dass Instructable ein Bild benötigt, das diesem 4: 3-Verhältnis entspricht, um es vollständig anzuzeigen.

Jetzt gibt es eine Menge leerer weißer Flächen darunter. Es passt mit nichts abgeschnitten, aber es wurde wieder erweitert, um eine bestimmte Breite auszufüllen, so dass das Bild nicht scharf ist. Versuchen wir herauszufinden, was diese perfekte Instructable-Breite ist.

Schritt 11: Erweitern des Bildes von 300 x 206 auf 600 x 206, um zu sehen, ob es besser angezeigt wird

Ich habe das ursprüngliche 382 x 206 (2: 1)-Bild in eine 600 x 206 (3: 1)-Leinwand fallen lassen, nur um zu sehen, ob eine Erweiterung auf 600 Pixel dazu führen würde, dass Instructables das gesamte Bild anzeigt. Anfangs tat es das wieder, aber wie Sie sehen, ist es jetzt nicht mehr.

Dies ist das wirklich Seltsame - jedes Mal, wenn Sie ein Bild zum ersten Mal einlegen, scheint es, als würde Instructables dieses Bild korrekt anzeigen, unabhängig von der Größe oder dem Seitenverhältnis dieses Bildes. Dieses Mal habe ich mich sogar von Instructables abgemeldet und diese Registerkarte geschlossen und dann dieses Instructable sozusagen "frisch" besucht, um zu überprüfen, ob das Bild noch richtig angezeigt wird. Normalerweise reicht dies aus, damit Instructable sein Ding machen und die Größe der Bilder ändern kann, die nicht im Seitenverhältnis 4:3 sind, und sie mit abgeschnittenen linken und rechten Seiten anzeigen.

Zu meiner Überraschung, die ersten paar Male, als ich dieses Instructable "frisch" wieder besuchte, blieb dieses Bild in seiner Gesamtheit angezeigt, aber leider, nachdem ich weggegangen war, um etwas anderes zu tun und vielleicht eine Stunde oder so später vorbeikam, begann dieses Bild anzuzeigen vergrößert mit den L&R-Seiten wieder abgeschnitten, so wie Sie es oben sehen.

Warum oder wie passiert das? Ich habe keine Ahnung. Ich habe keine Ahnung, warum das Warten einige Zeit nach dem Hochladen eines Bildes dazu führen würde, dass Instructables es anders rendert, aber es tut es. Als Beweis zeige ich meine Bildschirmaufnahme des obigen Bildes, die in den ersten 10-15 Minuten nach dem Hochladen auf der nächsten Folie perfekt angezeigt wird.

Schritt 12: Beweisen Sie, dass Bilder nach dem Hochladen anfänglich richtig angezeigt werden

Hier ist ein Screenshot, der zeigt, dass das 600 x 206-Bild direkt nach dem Hochladen vollständig angezeigt wird. Dies ist ein Screenshot der vorherigen Folie. Gehen Sie zurück zur vorherigen Folie und Sie können sehen, wie hoch das Bild jetzt ist!

Beachten Sie, dass meine Bildschirmaufnahme tatsächlich eine Größe von 1563 x 766 hatte, aber wie ich aus meinen Experimenten am Anfang dieses Instructable gelernt habe, wusste ich, dass es nicht zu diesem 4: 3-Seitenverhältnis (1563 x 766 ist ungefähr 4: 2) passte, also wenn ich würde gerade diesen Screenshot in seiner Originalgröße hochgeladen Instructable würde die Kanten abschneiden. Also habe ich dieses Bild auf eine 4:3-Leinwand gelegt, deshalb ist unter meinem Screenshot viel leerer weißer Raum.

Beachten Sie, dass der Screenshot auch erstellt wurde, bevor ich den Titel von Schritt 11 geändert und den gesamten Text eingegeben habe, falls Sie sich darüber wundern!

Lektion gelernt - Wenn Sie Ihr hochgeladenes Bild direkt nach dem Hochladen in einem Browser anzeigen, wird nicht unbedingt angezeigt, wie es in Zukunft angezeigt wird. Aus irgendeinem Grund scheint fast jedes Bild in Größe und / oder Seitenverhältnis sofort nach dem Hochladen und sogar für etwa 10-15 Minuten nach dem Hochladen und sogar nachdem Sie sich von Instructables abgemeldet und frisch aus einer neuen Browsersitzung usw.

Aber warten Sie ungefähr eine Stunde oder länger, und die Dinge ändern sich! Wenn Ihr Bild nicht zum Seitenverhältnis von 4:3 passt, wird es von Instructable angepasst (normalerweise vergrößert), sodass die Kanten abgeschnitten werden.

Schritt 13: Fazit - Was ich gelernt habe

Fazit: Was habe ich gelernt?

1. Um ein Bild vollständig anzuzeigen, ist ein Seitenverhältnis von 4:3 (Breite:Höhe) ein Muss!

2. Verwenden Sie große Originalbilder mit der höchstmöglichen Auflösung und legen Sie sie auf eine Leinwand im Verhältnis 4:3 ab. Wenn es zu groß ist, wird Instructables es verkleinern und Sie haben schöne scharfe Bilder.

3. Wenn Ihr Bild zu klein ist (viel weniger als 600 Pixel breit) wird Instructable Ihr Bild erweitern und es mindestens 600 Pixel breit machen, wodurch es weniger scharf wird. Ich sage "ish", weil ich nicht genau weiß, welche Breite Instructable verwendet, aber es scheint in der Nähe von 600 zu sein. Es ist wahrscheinlich 640, was in den Tagen des Röhrenmonitors der alten Schule eine übliche Breite war.

600x450 und 640x480 sind 4:3-Seitenverhältnisse. Alle "Vollbild"-Röhrenmonitore der alten Schule waren 640 x 480 (Breite x Höhe) groß.

4. Was tun, wenn Ihr Originalbild nicht mindestens 600 Pixel breit ist? Alles, was Sie tun können, ist, es auf eine Leinwand zu legen, die dem 4:3-Verhältnis entspricht, das Ihr Bild nahe seiner Originalgröße anzeigt. Wenn Ihr Originalbild klein ist, gibt es viele leere weiße Bereiche. Versuchen Sie also, Ihr Bild zu zentrieren oder den weißen Bereich entweder über oder unter Ihrem Bild zu platzieren und es so gut wie möglich aussehen zu lassen.

Nach meinem besten Wissen ist dies der Kompromiss, den Sie in Instructables eingehen müssen, damit Ihre Bilder intakt angezeigt werden.

Als Beispiel ist das obige Bild eine Leinwandgröße von 600 x 450, in das ein 382 x 206-Bild eingefügt und zentriert wurde, sodass wir oben und unten gleich leere weiße Flächen haben. Das Bild wird ungefähr in seiner Originalgröße angezeigt, ich denke, Instructables erweitert es möglicherweise auf 640 x 480 (vernachlässigbare Erweiterung), das ist also das Beste, was wir mit diesem Originalbild machen können.

5. Vertrauen Sie NICHT der Vorschau oder vertrauen Sie der Art und Weise, wie Ihr Bild in den ersten Stunden nach dem Hochladen in Instructable aussieht! Aus irgendeinem Grund scheinen die Bildgrößen erst einige Stunden nach dem Hochladen konstant zu bleiben.

Jedes Mal, wenn Sie ein Bild zum ersten Mal ablegen, scheint es, als würde Instructables dieses Bild korrekt anzeigen, unabhängig von der Größe oder dem Seitenverhältnis dieses Bildes. Es kann sogar für einige Zeit danach noch richtig angezeigt werden, aber LASSEN SIE SICH NICHT TÄUSCHEN, denn schließlich ändert es die Größe und gibt Ihnen Probleme, es sei denn, Sie befolgen diese 4:3-Regel!

Ich hoffe, das hilft und bitte, wenn Sie einen besseren Weg finden oder andere Hinweise haben, lassen Sie es mich wissen!