Etwa sechs Monate lang war jedes Miniaturbild in diesem Blog etwas weich. Nicht kaputt. Nicht offensichtlich falsch. nur… sumpfig, auf die Art und Weise, wie Sie aus dem Augenwinkel bemerken und sich dann aus dem Bemerken herausreden.
Das Layout besagte, dass der Miniaturansichtssteckplatz 600 Pixel breit war. Also habe ich Thumbnails mit einer Breite von 600 Pixeln exportiert. Das ist genau das Falsche, und ich habe eine peinlich lange Zeit gebraucht, um herauszufinden, warum, denn auf meinem Monitor sah es gut aus und auf meinem Telefon sah es wie eine Fotokopie einer Fotokopie aus.
Der Grund ist, dass ein CSS-Pixel kein Gerätepixel ist Ein modernes Telefon oder ein Netzhaut-Laptop packt zwei oder drei physische Pixel in jedes CSS-Pixel - das & #39; was window.devicePixelRatio Berichte Mein 600-Pixel-Bild wurde also über 1.200 physische Pixel aus Glas gespannt, und der Browser erfand den Unterschied. Sie können Details nicht erfinden, die in der Datei nicht enthalten sind. Der Fix war, bei 1.200 zu exportieren und CSS bei 600 anzuzeigen.
Das ist der Fehler, um den sich dieser Leitfaden zusammen mit den anderen drei oder vier Bildern entwickelt, die die Größe von veränderten Bildern schlimmer aussehen lassen, als sie sollten. der Bildänderungswerkzeug Auf Toolz.dev erledigt die Arbeit in Ihrem Browser - die Datei verlässt nie Ihren Computer - aber das Tool ist der einfache Teil. Zu wissen, welche Zahlen Sie eingeben müssen, ist der Teil, der tatsächlich zählt.
tl; dr: anführen 2× Anzeigegröße Für Retina-Bildschirme (ein 600-Px-Slot benötigt eine 1.200-Px-Datei) und niemals skalieren herauf- Sie können & #39; t Details hinzufügen, die nie erfasst wurden Sperren Sie das Seitenverhältnis, es sei denn, Sie möchten das Bild wirklich verzerren Ändern Sie die Größe vor Sie komprimieren, nicht danach. Verwenden Sie die Bildänderungswerkzeug Um die Maße festzulegen, Seitenverhältnis-Rechner die fehlende Seite auszuarbeiten und die Bildkompressor um die Dateigröße danach zu senken. Alles läuft clientseitig. Eine Vorbehalts-Vorsicht: Ändern der Größe das Bild neu codieren, also Alle EXIF-Metadaten werden entfernt- super für Privatsphäre, gelegentlich überraschend.
Warum sehen meine Bilder nach der Größenänderung verschwommen aus?
Neun von zehn ist es eines von drei Dingen, und sie sind alle reparierbar.
Du hast dich vergrößert. Das Vergrößern eines 400-FÜNF300-Fotos auf 1600-FÜNF1200 fordert die Software auf, für jedes, das sie hat, zwölf Pixel an Informationen zu erzeugen. Dies geschieht durch Interpolation - Mittelung der Nachbarn, um zu erraten, was dazwischen gehört - und das Ergebnis ist weich, weil das Detail wirklich nicht existiert Nichts weniger als ein generatives Modell erfindet es zurück. Beginnen Sie immer mit dem größten Original, das Sie haben, und skalieren Sie. Daunen ist fast verlustfrei, Up ist eine Vermutung.
Sie haben das Pixelverhältnis ignoriert. Der Fehler, den ich oben beschrieben habe Wenn die CSS-Box 600 ̄ß400 ist und der Bildschirm von user' s 2 ̄NF, braucht der Browser 1200 FÜNF800 echte Pixel, um sie knackig zu rendern Exportieren Sie bei 2 ̄NF und lassen Sie den Browser nach unten skalieren - Downscaling im Browser sieht toll aus; Upscaling sieht aus wie Schlamm.
etwas anderes komprimiert es nach dir. Sie haben die Größe sorgfältig geändert und dann auf eine Plattform hochgeladen, die Ihr Bild in seiner eigenen Qualitätseinstellung neu codiert. Jede soziale Plattform tut dies. Sie können es nicht aufhalten, aber Sie können es reduzieren: Laden Sie es in der Nähe der Zieldimensionen hoch, damit es so wenig Arbeit wie möglich erledigt, und geben Sie ihm eine Datei, die bereits sauber ist, anstatt eine Datei zu reparieren.
Was passiert eigentlich, wenn Sie die Größe eines Bildes ändern?
Es lohnt sich zu verstehen, denn es erklärt die meisten Überraschungen.
Ein Rasterbild ist ein Raster von Pixeln. Verkleinern dieses Gitters bedeutet zu entscheiden, was a neu Pixel sollte sein, wenn es zwischen mehreren alten liegt. Diese Entscheidung heißt Umbesetzung, und der Algorithmus zählt:
- nächster Nachbar- schnapp dir das nächstgelegene Originalpixel Schnelle, blockige, gezackte Kanten Korrigieren nur für Pixel-Art, wo Blockhaftigkeit der Punkt ist.
- bilinear- durchschnittlich die vier nächsten Pixel Glatt, etwas weich.
- bikubisch- sechzehn umgebende Pixel mit kubischer Kurve wiegen Schärfer als bilinear; die sinnvolle Voreinstellung in den meisten Desktop-Software.
- Lanczos- ein Fenster-Sinc-Filter über einer größeren Nachbarschaft Beste Qualität für die Herunterskalierung, langsamste, kann schwache Klingeln an kontrastreichen Kanten erzeugen.
Die Größenänderung der Browser-Leinwand liegt im bilinearen bis bikubischen Bereich und macht & #39; Lassen Sie Sie nicht präzise auswählen - Sie können nur nach Glättungsqualität fragen, und die HTML-Spezifikation & #39;s-Standardeinstellung für diesen Hinweis ist "low"drohen Das ist in Ordnung für die überwiegende Mehrheit der Webarbeit und deshalb fühlt sich das Toolz.dev-Tool sofort an.
Es gibt einen wissenswerten Power-User-Trick, wenn man in einem einzigen Schritt um einen großen Faktor herunterskaliert - sagen wir 4000 px bis auf 400 px, eine 10 ̄STR-Reduktion - sampeln einige Browser-Implementierungen zu spärlich und man erhält Aliasing: schimmernde Kanten, moirierte Muster in Stoff oder Mauerwerk, und verlorene Feindetails Die Problemumgehung ist Abstieg: wiederholt halbieren (4000 → 2000 → 1000 → 500 → 400), so dass jeder Schritt immer nur die Hälfte der Pixel wegwirft. Wenn eine große Reduzierung jemals knuspriger herauskommt als erwartet, ist dies der Grund, und wenn Sie sie in zwei Durchgängen tun, wird dies behoben.
Was macht das Werkzeug zur Größe der Toolz.dev-Resize eigentlich?
Ich würde es Ihnen lieber genau sagen, als Sie später herausfinden. Es ist ein auf Leinwand basierender Resizer:
- Ihre Datei wird über eine Objekt-URL in den Browser eingelesen. es ist nie hochgeladen- da's kein Server, auf den es hochgeladen werden kann.
- Es wird auf eine HTML-Canvas in den Zieldimensionen gezeichnet.
- Die Leinwand wird neu codiert PNG, JPEG, oder WebP (Quality ist für die verlustbehafteten Formate standardmäßig 0,9).
- Sie laden das Ergebnis herunter.
Daraus ergeben sich drei Konsequenzen, und nur eine davon ist in den meisten Tools ' Marketing-Kopie:
EXIF-Metadaten werden entfernt. Eine Neukodierung der Leinwand erzeugt eine brandneue Datei Kameramodell, Objektiv, Aufnahmezeit und - was wichtig ist - GPS-Koordinaten überlebe nicht. Für alles, was Sie veröffentlichen, ist dies eine Datenschutzfunktion und eine echte: Fotos direkt am Telefon tragen routinemäßig die genauen Koordinaten, wo sie aufgenommen wurden. Wenn du brauchen Das Exif (z. B. für ein Fotoportfolio) ändert sich mit einem Werkzeug, das es explizit bewahrt. Wenn die Quelle direkt von einer Kamerarolle kam, werfen Sie einen Blick auf die Ausgabeausrichtung, bevor Sie veröffentlichen.
Animierte GIFs kommen als ein einziger Frame heraus. Canvas zeichnet einen FrameEs gibt keine ehrliche Möglichkeit, dies als etwas anderes als eine Einschränkung zu beschreiben - wenn Sie die Größe einer Animation ändern und sie in Bewegung halten müssen, ist dies nicht das Werkzeug. (I' sagen Sie das lieber klar, als es nach dem Herunterladen entdecken zu lassen)
Das Verriegeln des Seitenverhältnis bedeutet "passen ins Innere", nicht "Strecken zum Füllen". Wenn Sie bei gesperrtem Verhältnis sowohl eine Breite als auch eine Höhe eingeben, wird das Bild skaliert, um es anzupassen innerlich Diese Box, während ihre Proportionen zu halten So kommt ein 16:9 Foto mit einem 1000 ̄NF1000 Ziel kommt heraus 1000 ̄FT563, nicht 1000 FÜNF1000. Es wird nie Ihr Bild verzerren - aber es wird auch won' t schneiden Sie es zu, um das Quadrat zu füllen Wenn Sie ein exaktes Quadrat aus einem Rechteck benötigen, brauchen Sie einen Zuschnitt, nicht eine Größenänderung Diese Unterscheidung verwirrt die Leute ständig und es & #39;s lohnt sich, genau zu sein.
Wie funktionieren Seitenverhältnisse eigentlich?
Ein Seitenverhältnis ist nur die Breite ÷ Höhe, ausgedrückt als Paar. Die Mathematik ist einfach und Sie sollten in der Lage sein, dies in Ihrem Kopf zu tun, da sie den häufigsten Fehler bei der Größenänderung verhindert: Gedrängnisdrohen
Um die fehlende Seite zu finden, halten Sie das Verhältnis konstant:
new_height = new_width × (original_height ÷ original_width)
Ein Foto mit 4:3 (4:3) wird auf 1200 Breite um 1200 × (3000/4000) = 900 Groß. Typ 1200 und 800 stattdessen, und you' hat ein 4:3-Bild in 3:2 gequetscht - Gesichter werden schmaler, Kreise werden zu Ovalen und jeder kann etwas sagen's aus, auch wenn er kann' sagen kann was. Die Seitenverhältnis-Rechner Tut dies für Sie und reduziert das Verhältnis auch für Sie.
Hier sind die Verhältnisse, die immer wieder auftauchen, wobei die Mathematik eher überprüft als kopiert wird:
| Verhältnis | dezimal | Typische Verwendung | Beispielgröße |
|---|---|---|---|
| 1: 1 | 1.000 | Quadratische Beiträge, Profilbilder, Logos | 1080 × 1080 |
| 4: 5 | 0,800 | Portrait Social Posts (Max. vertikaler Platz in einem Feed) | 1080 × 1350 |
| 9:16 | 0,563 | Geschichten, Rollen, Shorts, TikTok - Vollbild vertikal | 1080 × 1920 |
| 16: 9 | 1.778 | Miniaturansichten, Breitbild-Heldenbilder, Folien | 1280 × 720 |
| ~ 1.91: 1 | 1.911 | Link-Vorschau-Karten (die Opengraph-Form) | 1200 × 628 |
| 3: 1 | 3.000 | Breite Profil-Banner | 1500 × 500 |
| 4: 1 | 4.000 | Extra-Wide Profil-Banner | 1584 × 396 |
Eine ehrliche Anmerkung dazu & quot;1.91:1" Reihe, da es mich jedes Mal nervt: 1200 ̄FT628 ist eigentlich nicht 1,91:1. Richtig reduziert it's 300:157, oder 1,911. Die Branche rundet es ab und alle zucken mit den SchulternEs spielt keine Rolle ' spielt in der Praxis eine Rolle - aber wenn Sie #39; sich jemals gefragt haben, warum 1200 ̄628 & #39; nicht in etwas Sauberes aufteilen, das & #39;s warum.
Plattform-Pixel-Spezifikationen ändern sich; Verhältnisse tun sich fast nie. Anstatt einer Dimensionstabelle in einem Blog-Beitrag (einschließlich dieser) eine wichtige Kampagne zu vertrauen, überprüfen Sie die aktuelle Spezifikation der Plattform und verwenden Sie dann das oben stehende Verhältnis, um sie zu erreichen. Die Form ist auch dann stabil, wenn die Zahlen driften.
Welche Größe sollten Web-Bilder eigentlich haben?
Für eine Website, die Sie kontrollieren - wobei Sie & #39; re für Größte Inhaltliche Farbe optimieren und nicht für jemand anderen & #39;s Uploader - die Begründung ist anders und besser.
Beginnen Sie mit dem CSS-Feld, nicht vom Bild. Finden Sie heraus, wie breit das Bild in Ihrem Layout tatsächlich rendert. Nicht der Container' s maximale Breite - die Bild & # 39; S. Breite, am Haltepunkt, den Sie interessieren. Dann verdoppeln Sie es für die Netzhaut. Das ist Ihre Exportgröße. Alles darüber hinaus sind Bytes, die Sie für den Versand bezahlen, und der Benutzer zahlt für den Download, für den sichtbaren Nutzen.
servieren Sie mehr als eine Größe. Eine einzelne 2400px-Datei ist für ein Telefon verschwenderisch, das es mit 380 CSS-Pixeln wiedergibt. srcset gibt es genau dafür:
<img
src="hero-1200.webp"
srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-2400.webp 2400w"
sizes="(max-width: 768px) 100vw, 1200px"
width="1200" height="675"
alt="..."
/>
Der Browser wählt die kleinste Datei aus, die auf diesem Gerät noch scharf aussieht. Und immer gesetzt width und height Attribute - sie ermöglichen es dem Browser, den Speicherplatz vor dem Laden des Bildes zu reservieren, was die Seite davon abhält, herumzuspringen und Ihren kumulativen Layout-Shift-Score zu zerstören.
Größe zuerst ändern, Zweite komprimieren. Dies ist die Reihenfolge, die die Leute rückwärts bekommen. Komprimieren eines 4000px-Bildes und dann Die Größenänderung auf 800 px bedeutet, dass Sie Mühe damit verbracht haben, Pixel zu optimieren, die Sie gerade wegwerfen wollten - und Sie haben wahrscheinlich Komprimierungsartefakte in die Pixel gebacken, die Sie behalten haben Schneiden Sie zuerst die Abmessungen aus und komprimieren Sie dann, was & #39;s übrig bleibt Bildkompressordrohen Die Abmessungen sind ohnehin der größere Gewinn: Die Halbierung beider Seiten eines Bildes entfernt 75% von seinen Pixeln, bevor ein Kompressor ihn berührt. Darauf gehe ich tiefer in die Bildkomprimierungshandbuchdrohen
Wählen Sie dann das richtige Format. Grob: JPEG für Fotos, PNG Wenn Sie Transparenz oder scharfe Texte und Linien benötigen, webp für im Grunde alles im Web, da es beide bei gleicher Qualität übertrifft. der Bildformat-Konverter behandelt diesen Schritt und die Bildwerkzeuge Übersicht Deckt ab, wie die Teile zusammenpassen.
Wie ändere ich die Größe eines Bildes auf Toolz.dev?
- Öffne das Bildänderungswerkzeugdrohen Kein Konto, nichts zu installieren.
- Legen Sie Ihr Bild ein. Es lädt direkt in den Browser Sehen Sie sich die Registerkarte Netzwerk an, wenn Sie Proof Nothing' s überall gesendet werden - das' s eine Prüfung, die es wert ist, auf jedem Bildtool ausgeführt zu werden, in das Sie private Fotos einfügen.
- Geben Sie Ihre Zieldimensionen ein. Geben Sie die Breite ein, bei gesperrtem Verhältnis folgt die Höhe. Denken Sie daran, die Netzhaut zu verdoppeln, wenn dies für einen Bildschirm ist.
- Wählen Sie Ihr Ausgabeformat- PNG, JPEG oder WebP.
- Herunterladen in Ihrem Browser generiert, direkt auf Ihre Festplatte.
Wenn Sie' das gleiche Bild in mehreren Größen erzeugen, arbeiten Sie jedes Mal vom größten Original aus Don' t ändern Sie die Größe des 1200 px-Exports auf 600 px - gehen Sie zurück zum Original und exportieren Sie 600 davon. Jeder Neucode einer bereits verlorenen Datei verschlimmert den Schaden, genauso wie eine Fotokopie einer Fotokopie abbaut. It's ist eine kleine Disziplin, die im Endergebnis angezeigt wird.
Häufig gestellte Fragen
Kann ich die Größe eines Bildes ändern, ohne an Qualität zu verlieren?
Downscaling verliert fast nichts Wahrnehmbares - you' re verwerfen Sie Pixeldaten, die Sie nicht mehr benötigen, und das Ergebnis auf dem Bildschirm sieht scharf aus Upscaling verliert immer an Qualität, denn die Software muss Pixel interpolieren, die nie erfasst wurden, wodurch Weichheit oder sichtbare Artefakte entstehen Ändern Sie die Größe immer nach unten vom größten Original, das Sie haben, und nicht nach oben von einem kleinen.
Welche Größe sollte ich Bilder für Retina-Bildschirme exportieren?
Exportieren Sie mit 2× der Größe, auf der das Bild angezeigt wird. Wenn Ihr Layout ein Bild in einer 600 × 400-Box rendert, exportieren Sie es bei 1200 × 800, damit es auf Geräten mit a devicePixelRatio 2. Über 2 × hinauszugehen ist selten die zusätzlichen Bytes wert, da der sichtbare Nutzen selbst bei 3 ×-Displays minimal ist.
Entfernt die Größe eines Bildes EXIF-Daten?
Ja, wenn die Größenänderung über eine HTML-Leinwand erfolgt - wie es unter Toolz.dev der Fall ist - kodiert das Tool das Bild erneut in eine neue Datei und EXIF-Metadaten werden nicht übertragen Das bedeutet, Kameradetails, Aufnahmezeit und GPS-Koordinaten werden alle entfernt. Für die Veröffentlichung ist dies ein Datenschutzvorteil; Wenn Sie EXIF bewahren müssen, verwenden Sie ein Tool, das dies explizit unterstützt.
Kann ich die Größe eines animierten GIF ändern und die Animation beibehalten?
Nicht mit einem Resizer auf Leinwandbasis. Canvas erfasst ein einzelnes Frame, sodass die Ausgabe ein Standbild im PNG-, JPEG- oder WebP-Format ist. Die Größe einer Animation unter Beibehaltung aller Frames erfordert ein dediziertes GIF-Verarbeitungswerkzeug.
Wie ändere ich die Größe eines Bilds auf eine bestimmte Dateigröße in KB?
Dateigröße ist nichts, was Sie direkt einstellen - es fällt aus den Dimensionen, Format und Komprimierungsqualität nach hinten arbeiten: Reduzieren Sie die Abmessungen auf das, was das Bild tatsächlich angezeigt wird, exportieren Sie als WebP oder JPEG statt PNG für Fotos, dann die Qualität nach unten und überprüfen Sie die Ausgabegröße erneut. Treffen eines harten Ziels wie & quot; unter 100 KB" ist normalerweise zwei oder drei Durchgänge dieser Schleife, nicht einer.
Wie kann ich die Größe eines Bildes ändern, ohne es zu beschneiden?
Halten Sie das Seitenverhältnis gesperrt, bleiben Breite und Höhe in ihrem ursprünglichen Verhältnis, bleibt jedes Pixel des Rahmens erhalten und es ändert sich nur der Maßstab Das Zuschneiden wird nur dann unvermeidlich, wenn die Zielform von der Quellform abweicht - ein 3:2-Foto in einen 1:1-Avatar-Slot zu stecken bedeutet entweder das Letterboxing des leeren Raums oder das Wegschneiden eines Teils des Bildes.
Sollte ich meine Bilder zuerst ändern oder komprimieren?
Größe zuerst ändern, dann komprimieren Durch die Reduzierung der Abmessungen werden Pixel vollständig entfernt - durch die Halbierung sowohl der Breite als auch der Höhe werden 75% davon eliminiert - was fast immer ein größerer Gewinn in Dateigröße ist als bei der Komprimierung allein. Durch Komprimieren vor der Größenänderung wird der Aufwand für Pixel, die Sie verwerfen möchten, vergeudet und Sie können Artefakte in die von Ihnen aufbewahrten Objekte einbacken.
Was ist der Unterschied zwischen Größenänderung und Zuschnitt?
Größenänderung verändert die Abmessungen des gesamten Bildes, wobei der gesamte Inhalt erhalten bleibt Durch Zuschneiden wird ein Teil des Bildes weggeschnitten, um dessen Rahmen oder Seitenverhältnis zu ändern Wenn Sie ein Quadrat aus einem rechteckigen Foto benötigen, passt die Größenänderung mit gesperrtem Seitenverhältnis zum Bild im Inneren des Quadrats, anstatt es zu füllen - Sie benötigen einen Ausschnitt, um den Rahmen zu füllen.
Gibt es eine Dateigrößenbeschränkung für die Größenänderung von Bildern im Browser?
Es gibt keine vom Server auferlegte Begrenzung, denn es wird nichts hochgeladen - die praktische Decke ist Ihr Gerät' s verfügbarer Speicher Typische Fotos, einschließlich großer Kameradateien, ändern sofort ihre Größe Extrem große Bilder (sehr hochauflösende Scans zum Beispiel) können einen Moment dauern oder auf einem speicherbeschränkten Telefon nicht geladen werden.
Warum sieht mein Bild nach der Größenänderung auf die richtigen Abmessungen immer noch verschwommen aus?
Überprüfen Sie drei Dinge der Reihe nach: ob Sie von einem kleineren Original (unfixierbar - eine größere Quelle finden) skaliert haben, ob Sie das Pixelverhältnis des Geräts berücksichtigt haben (eine 600-px-Datei auf einem 2-×-Bildschirm muss 1200 px betragen) und ob die Plattform, die Sie hochgeladen haben, das Bild anschließend neu komprimiert hat. Die dritte ist in den sozialen Medien üblich und lässt sich am besten durch das Hochladen auf der Plattform abmildern. & #39;s empfohlene Abmessungen.
