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 Retina-Laptop packt zwei oder drei physische Pixel in jedes CSS-Pixel - das ist 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 funktioniert die Arbeit in Ihrem Browser - die Datei verlässt nie Ihre Maschine - aber das Tool ist das einfache Teil. Zu wissen, welche Zahlen einzugeben ist, 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 keine Details hinzufügen, die nie erfasst wurden. Sperren Sie das Seitenverhältnis, es sei denn, Sie möchten das Bild wirklich verzerren. Größe ändern 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 - Großartig für die 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. Durch die Vergrößerung eines 400×300-Fotos auf 1600×1200 wird die Software aufgefordert, für jedes sie zwölf Pixel an Informationen zu produzieren. Dies geschieht durch Interpolieren - Durchschnittliche Nachbarn, um zu erraten, was dazwischen liegt - und das Ergebnis ist weich, da 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 und der Bildschirm des Benutzers 2 × ist, benötigt der Browser 1200 × 800 echte Pixel, um es knusprig zu rendern. Exportieren Sie mit 2× und lassen Sie den Browser skalieren – Downscaling im Browser sieht großartig aus, Hochskalierung 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 — Greifen Sie den nächsten Originalpixel. Schnelle, blockige, gezackte Kanten. Nur für Pixelkunst korrigieren, wo Blockierung der Punkt ist.
- bilinear — Durchschnitt der vier nächsten Pixel. Glatt, ein wenig weich.
- bikubisch — Wiegen Sie sechzehn umgebende Pixel mit einer kubischen Kurve. Schärfer als bilinear, die sinnvolle Standardeinstellung in den meisten Desktop-Software.
- Lanczos — Ein Fenster mit Fenster über einer größeren Nachbarschaft. Beste Qualität für Downscaling, langsamste, kann an kontrastreichen Kanten schwaches Klingeln erzeugen.
Die Größe des Browsers befindet sich im Bereich der bilinear-bis-bikubischen Bereiche und lässt Sie nicht genau auswählen. Sie können nur nach einer Glättungsqualität fragen, und die Standardeinstellung für diesen Hinweis ist die HTML-Spezifikation "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 Power-User-Trick, der es wert ist, wissenswert zu sein. Wenn Sie in einem einzigen Schritt um einen großen Faktor skalieren - beispielsweise 4000px auf 400px, eine 10-fache Reduzierung -, werden einige Browser-Implementierungen zu spärlich abgetastet und Sie erhalten Aliasing: schimmernde Kanten, Moiré-Muster in Stoff oder Mauerwerk und verlorene Details. 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 — Es gibt keinen Server, auf den es hochladen 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 Leinwand-Neukodierung erzeugt eine brandneue Datei. Kameramodell, Objektiv, Aufnahmezeit und - wichtig - 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. Leinwand zeichnet einen Rahmen. Es 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. (Ich würde das lieber sagen, als dass Sie es nach dem Herunterladen entdecken 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 unter Beibehaltung ihrer Proportionen. Ein 16:9-Foto mit einem 1000 × 1000-Ziel kommt also 1000 × 563 heraus, nicht 1000 × 1000. Es wird Ihr Bild niemals verzerren - aber es wird es auch nicht beschneiden, um das Quadrat zu füllen. Wenn Sie ein genaues Quadrat aus einem Rechteck benötigen, benötigen Sie eine Zuschneide, keine Größenänderung. Diese Unterscheidung verwirrt die Menschen ständig und es lohnt sich, genau darüber 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 hoch Geben Sie stattdessen 1200 und 800 ein, und Sie haben ein 4: 3-Bild in 3: 2 zusammengedrückt - Gesichter werden schmaler, Kreise werden Ovale, und jeder kann etwas sagen, auch wenn er nicht sagen kann, was. der 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 — Vertikal im Vollbildmodus | 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 zu dieser Zeile "1,91:1" ist, da sie mich jedes Mal nervt: 1200 × 628 ist eigentlich nicht 1,91: 1. Richtig reduziert sind es 300: 157 oder 1,911. Die Branche rundet es und alle zucken die Achseln. In der Praxis spielt es keine Rolle - aber wenn Sie sich jemals gefragt haben, warum 1200 × 628 sich nicht in etwas Reiniges teilt, deshalb.
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 steuern - wo Sie die größte inhaltliche Farbe und nicht den Uploader eines anderen optimieren - ist die Argumentation anders und besser.
Beginnen Sie mit dem CSS-Feld, nicht vom Bild. Finden Sie heraus, wie breit das Bild tatsächlich in Ihrem Layout rendert. nicht die maximale Breite des Containers - 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 lassen den Speicherplatz vor dem Laden des Bildes reservieren. Dies verhindert, dass die Seite herumspringt und Ihre kumulative Layout-Verschiebungsbewertung zerstört.
Größe zuerst ändern, Zweite komprimieren. Dies ist die Reihenfolge, die die Leute rückwärts bekommen. Komprimieren eines 4000px-Bildes und dann Wenn Sie die Größe auf 800 Pixel ändern, haben Sie sich Mühe gegeben, Pixel zu optimieren, die Sie wegwerfen wollten - und Sie haben wahrscheinlich Komprimierungsartefakte in die Pixel gebacken, die Sie beibehalten haben. Schneiden Sie zuerst die Maße ab und komprimieren Sie dann, was mit dem übrig geblieben ist 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 wird direkt in den Browser geladen. Beobachten Sie die Registerkarte Netzwerk, wenn Sie möchten, dass nichts irgendwohin gesendet wird - das lohnt sich, wenn Sie auf jedem Bildwerkzeug, in das Sie private Fotos einfügen, einen Scheck ausführen.
- 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 produzieren, arbeiten Sie jedes Mal vom größten Original. Ändern Sie die Größe des 1200px-Exports nicht auf 600px - kehren Sie zum Original zurück und exportieren Sie 600 davon. Jede Neukodierung einer bereits verlustbehafteten Datei verstärkt den Schaden, genauso wie eine Fotokopie einer Fotokopie abnimmt. Es ist eine kleine Disziplin, die im Endergebnis auftaucht.
Häufig gestellte Fragen
Kann ich die Größe eines Bildes ändern, ohne an Qualität zu verlieren?
Das Downscaling verliert fast nichts wahrnehmbar - Sie verwerfen Pixeldaten, die Sie nicht mehr benötigen, und das Ergebnis auf dem Bildschirm sieht scharf aus. Upscaling verliert immer an Qualität, da die Software Pixel, die nie erfasst wurden, interpolieren muss, was zu Weichheit oder sichtbaren Artefakten führt. Ändern Sie die Größe immer von dem größten Original, das Sie haben, und nicht 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-Canvas erfolgt - wie auf toolz.dev - codiert das Tool das Bild in eine neue Datei und die EXIF-Metadaten werden nicht übertragen. Das bedeutet, dass Kameradetails, Aufnahmezeit und GPS-Koordinaten alle entfernt werden. Für die Veröffentlichung ist dies ein Vorteil der Privatsphäre. Wenn Sie EXIF beibehalten müssen, verwenden Sie ein Tool, das es 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?
Die Dateigröße ist nicht direkt einzustellen – sie fällt aus den Abmessungen, dem Format und der Komprimierungsqualität heraus. Rückwärts arbeiten: Reduzieren Sie die Abmessungen auf das, was das Bild tatsächlich angezeigt wird, exportieren Sie als WebP oder JPEG anstelle von PNG für Fotos, und überprüfen Sie dann die Qualität und überprüfen Sie die Ausgabegröße erneut. Das Schlagen eines harten Ziels wie "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. Wenn Breite und Höhe in ihrem ursprünglichen Verhältnis bleiben, bleibt jedes Pixel des Rahmens erhalten und nur die Skala ändert sich. Das Zuschneiden wird nur dann unvermeidlich, wenn sich die Zielform von der Quellform unterscheidet. Passen Sie ein 3: 2-Foto in einen 1: 1-Avatar-Schlitz an, bedeutet das entweder, dass der leere Raum in Briefkasten eingefügt oder ein Teil des Bildes weggeschnitten wird.
Sollte ich meine Bilder zuerst ändern oder komprimieren?
Zuerst die Größe ändern, dann komprimieren. Durch das Reduzieren von Dimensionen werden Pixel sofort entfernt. Das halbieren sowohl die Breite als auch die Höhe eliminieren 75% davon - was fast immer ein größerer Gewinn in Dateigröße ist als die Komprimierung allein. Das Komprimieren vor der Größenänderung verschwendet die Anstrengungen für Pixel, die Sie verwerfen möchten, und können Artefakte in die von Ihnen gespeicherten backen.
Was ist der Unterschied zwischen Größenänderung und Zuschnitt?
Die Größenänderung ändert die Dimensionen des gesamten Bildes und behält seinen gesamten Inhalt bei. Das Zuschneiden schneidet einen Teil des Bildes weg, um sein Framing oder Seitenverhältnis zu ändern. Wenn Sie ein Quadrat aus einem rechteckigen Foto benötigen, passt die Größe des Seitenverhältniss an das Bild an, anstatt es zu füllen, anstatt es zu füllen. Sie benötigen ein Zuschnitt, 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 Grenze, da nichts hochgeladen wird - die praktische Decke ist der verfügbare Speicher Ihres Geräts. Typische Fotos, einschließlich großer Kameradateien, ändern die Größe sofort. Extrem große Bilder (z. B. sehr hochauflösende Scans) 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 in der Reihenfolge: Ob Sie von einem kleineren Original aus skaliert haben (unfixierbar - eine größere Quelle finden), ob Sie das Gerätepixelverhältnis (eine 600-Px-Datei auf einem 2 ×-Bildschirm) 1200px betragen müssen und ob die Plattform, die Sie hochgeladen haben, um das Bild anschließend neu zu komprimieren. Der dritte ist in sozialen Medien üblich und wird am besten durch das Hochladen auf den empfohlenen Dimensionen der Plattform gemildert.
