Verklein afbeeldingen online: de Retina Trap en wat canvas stilletjes weggooit

Ongeveer zes maanden lang was elke thumbnail op deze blog een beetje zacht. niet gebroken. Niet duidelijk fout. net … nevelig, zoals je uit je ooghoeken merkt en jezelf dan uit je oogen haalt.

De lay-out zei dat de thumbnail-sleuf 600 pixels breed was. Dus ik exporteerde miniaturen met 600 pixels breed. Dat is precies het verkeerde om te doen, en het kostte me een beschamend lang om uit te zoeken waarom, want op mijn monitor zag het er goed uit en op mijn telefoon zag het eruit als een fotokopie van een fotokopie.

De reden is dat een CSS-pixel geen apparaatpixel is Een moderne telefoon of een retina-laptop verpakt twee of drie fysieke pixels in elke CSS-pixel - dat's wat window.devicePixelRatio Rapporten. Dus mijn afbeelding van 600 pixels werd uitgerekt over 1.200 fysieke pixels van glas, en de browser vond het verschil uit. Je kunt geen details uitvinden die niet in het bestand staan. De oplossing was om te exporteren op 1.200 en CSS het op 600 te laten weergeven.

Dat is de fout waar deze gids omheen is gebouwd, samen met de andere drie of vier die het formaat van afbeeldingen er slechter uit laten zien dan zou moeten. de Afbeeldingsgrootte formaat op Toolz.dev doet het werk in uw browser - het bestand verlaat nooit uw machine - maar de tool is het makkelijke gedeelte Weten welke nummers u erin moet typen is het onderdeel dat er echt toe doet.

tl;dr: exporteren op 2× het weergaveformaat Voor Retina-schermen (een slot van 600px heeft een 1.200px-bestand nodig) en nooit schaal opwaarts- u kunt' t details toevoegen die nooit zijn vastgelegd Vergrendel de beeldverhouding tenzij u de afbeelding echt wilt vervormen Formaat wijzigen vooruit Je comprimeert, niet na. Gebruik de Afbeeldingsgrootte formaat Om de afmetingen in te stellen, Aspect ratio rekenmachine om de ontbrekende kant uit te werken, en de afbeeldingscompressor om de bestandsgrootte achteraf te verkleinen. Alles loopt aan de clientzijde. Een voorbehoud dat vooraan de moeite waard is: het formaat wijzigen van het formaat hercodeert de afbeelding, dus Alle EXIF-metadata worden gestript- geweldig voor privacy, af en toe verrassend.

Waarom zien mijn afbeeldingen er wazig uit na het wijzigen van het formaat?

Negen van de tien keer is het een van de drie dingen, en ze zijn allemaal te repareren.

Je bent opgeschaald. Een foto van 400×300 vergroten naar 1600×1200 vraagt de software om twaalf pixels informatie te produceren voor elke pixel die hij heeft Het doet dit door te interpoleren - buren gemiddeld te laten raden wat daartussen hoort - en het resultaat is zacht, omdat de details echt niet bestaan. Niets minder dan een generatief model vindt het terug. Begin altijd vanaf het grootste origineel dat je hebt en verklein. Down is bijna verliesloos; omhoog is een gok.

Je negeerde de pixelverhouding. De fout die ik hierboven heb beschreven Als het CSS-vak 600×400 is en het scherm van de gebruiker' s 2× is, heeft de browser 1200×800 echte pixels nodig om het helder te exporteren op 2× en de browser naar beneden te laten schalen - downscaling in de browser ziet er geweldig uit; upscaling lijkt op modder.

Iets anders comprimeerde het na jou. U hebt de grootte zorgvuldig aangepast en vervolgens geüpload naar een platform dat uw afbeelding opnieuw heeft gecodeerd in zijn eigen kwaliteitsinstelling. Elk sociaal platform doet dit. Je kunt het niet stoppen, maar je kunt het verminderen: upload dicht bij de doelafmetingen van het platform, dus het doet zo min mogelijk werk, en overhandig het een bestand dat al schoon is in plaats van een bestand dat het moet repareren.

Wat gebeurt er eigenlijk als je een afbeelding verkleint?

Het is het begrijpen waard, omdat het de meeste verrassingen verklaart.

Een rasterafbeelding is een raster van pixels. dat raster kleiner maken betekent beslissen wat een vrouwelijk Pixel moet zijn wanneer het tussen verschillende oude zit. Die beslissing heet weersmoldenen het algoritme is van belang:

• dichtstbijzijnde buur- pak de dichtstbijzijnde originele pixel Snelle, blokkerige, gekartelde randen Alleen corrigeren voor pixelkunst, waarbij blokkerigheid het punt is.
• tweelijnsachtig- gemiddeld de vier dichtstbijzijnde pixels Glad, een beetje zacht.
• bijvies- weeg zestien omringende pixels met een kubieke curve Scherper dan bilineair; de verstandige standaard in de meeste desktopsoftware.
• lantaarnzo's- een sinc-filter met ramen over een grotere buurt. De beste kwaliteit voor schaalverkleining, het langzaamst, kan vage ringen veroorzaken aan randen met hoog contrast.

Het formaat van het browsercanvas ligt in het bilineair-naar-bicubische bereik en doet & # 39; u kunt precies kiezen - u kunt alleen om afvlakkingskwaliteit vragen, en de HTML-specificatie & # 39; s standaard voor die hint is "low". Dat is prima voor de overgrote meerderheid van het webwerk en daarom voelt de Toolz.dev-tool direct aan.

Er is één truc voor de power-user die het weten waard is Wanneer je in één stap met een grote factor downscaalt - zeg 4000px tot 400px, een reductie van 10× - samplen sommige browserimplementaties te schaars en krijg je aliasing: glinsterende randen, moirépatronen in stof of metselwerk, en verloren fijne details De oplossing is stapsgewijs afbouwen: Herhaaldelijk halveren (4000 → 2000 → 1000 → 500 → 400) zodat elke stap de helft van de pixels alleen maar weggooit. Als een grote reductie ooit knapperiger uitkomt dan je had verwacht, is dat de reden, en als je het in twee passen doet, zal het oplossen.

Wat doet de Toolz.dev resize tool eigenlijk?

Ik vertel het je liever precies dan je later te weten te komen. Het is een op canvas gebaseerde resizer:

1. Uw bestand wordt in de browser gelezen via een object-URL. het is Nooit geüpload- there' is geen server om het naar te uploaden.
2. Het wordt op een HTML-canvas getekend bij de doeldimensies.
3. Het canvas wordt opnieuw gecodeerd PNG, JPEG of WEBP (Kwaliteit staat standaard op 0,9 voor de lossy-formaten).
4. U downloadt het resultaat.

Daaruit volgen drie gevolgen, en slechts één daarvan is in de meeste tools Marketing Copy:

EXIF-metadata wordt gestript. Een canvas re-encode levert een gloednieuw bestand op Cameramodel, lens, opnametijd, en - belangrijk - GPS-coördinaten Overleef niet. Voor alles wat je publiceert, is dat een privacyfunctie en een echte: foto's rechtstreeks van een telefoon dragen routinematig de exacte coördinaten van waar ze zijn gemaakt. als je hoeven De EXIF (bijvoorbeeld voor een fotografieportfolio) verkleinen met een tool die het expliciet behoudt. Als de bron rechtstreeks van een filmrol kwam, kijk dan naar de uitvoeroriëntatie voordat u publiceert.

Geanimeerde GIF's komen uit als een enkel frame. Canvas tekent één frame Er is geen eerlijke manier om dit als iets anders te omschrijven dan als een beperking - als je het formaat van een animatie moet wijzigen en deze in beweging moet houden, is dit niet het hulpmiddel. (I' zeg dat liever duidelijk dan dat je het na het downloaden laat ontdekken.)

Het vergrendelen van de beeldverhouding betekent "passen binnen", niet "stretch om te vullen". Als u zowel een breedte als een hoogte invoert met de verhouding vergrendeld, wordt de afbeelding geschaald om te passen tot op dat vakje met behoud van zijn proporties Dus een 16:9 foto met een 1000×1000 target komt 1000×563 uit, niet 1000×1000. 't zal nooit je beeld vervormen - maar het won' t bijsnijden om het vierkant te vullen Als je een exact vierkant uit een rechthoek nodig hebt, heb je een bijsnijding nodig, geen formaatvergroting Dat onderscheid brengt mensen voortdurend in verwarring en het' is de moeite waard om precies over te zijn.

Hoe werken beeldverhoudingen eigenlijk?

Een beeldverhouding is slechts breedte ÷ hoogte, uitgedrukt als een paar. De wiskunde is eenvoudig en je zou het in je hoofd moeten kunnen doen, omdat het de meest voorkomende fout in het formaat voorkomt: plet.

Om de ontbrekende kant te vinden, houdt u de verhouding constant:

new_height = new_width × (original_height ÷ original_width)

Een 4000×3000 foto (4:3) verkleind naar 1200 breed wordt 1200 × (3000/4000) = 900 lang. Type 1200 en 800 in plaats daarvan, en jij ' hebben een 4:3-afbeelding in 3:2 geperst - gezichten worden smaller, cirkels worden ovalen en iedereen kan iets vertellen ' gaat weg, zelfs als ze kunnen 't wat zeggen. De Aspect ratio rekenmachine Doet dit voor u en vermindert ook de verhouding voor u.

Hier zijn de verhoudingen die blijven komen, met de wiskunde gecontroleerd in plaats van gekopieerd:

Eén eerlijke opmerking over dat "1.91:1" rij, omdat het me elke keer irriteert: 1200×628 is eigenlijk niet 1,91:1. correct verminderd 's 300:157, of 1.911. De industrie rondt het af en iedereen haalt zijn schouders op. Het doet ' maakt in de praktijk niet uit - maar als je ' ooit hebt afgevraagd waarom 1200×628 dat doet en#39; zich niet in iets schoons verdeelt, dat' is waarom.

Platform pixelspecificaties veranderen; verhoudingen bijna nooit. In plaats van een dimensietabel in een blogpost (inclusief deze) te vertrouwen voor een campagne die ertoe doet, controleer je de huidige specificaties van het platform en gebruik je de verhouding hierboven om het te raken. De vorm is stabiel, zelfs als de cijfers afdrijven.

Hoe groot moeten webafbeeldingen eigenlijk zijn?

Voor een website die u beheert - waar u ' optimaliseert u voor de grootste inhoudsvolle verf in plaats van voor iemand anders's uploader - de redenering is anders en beter.

Begin vanuit de CSS-box, niet vanuit de afbeelding. Zoek hoe breed de afbeelding daadwerkelijk wordt weergegeven in uw lay-out Niet de container's maximale breedte - de beeld's breedte, bij het breekpunt waar u om geeft. Verdubbel het dan voor het netvlies. Dat is uw exportgrootte. Alles daarbuiten is bytes die u betaalt om te verzenden en de gebruiker betaalt om te downloaden, voor nul zichtbaar voordeel.

Serveer meer dan één maat. Een enkel 2400px-bestand is verspilling voor een telefoon die het op 380 CSS-pixels weergeeft. srcset Bestaat hier juist voor:

<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="..."
/>

De browser kiest het kleinste bestand dat er nog steeds scherp uitziet op dat apparaat. en altijd instellen width en height attributen - ze laten de browser de ruimte reserveren voordat de afbeelding wordt geladen, wat ervoor zorgt dat de pagina niet rondspringt en uw Cumulatieve Lay-outverschuivingsscore vernietigt.

Wijzig eerst het formaat, comprimeer als tweede. Dit is de volgorde die mensen achteruit krijgen. het comprimeren van een afbeelding van 4000px en daarna het formaat wijzigen naar 800px betekent dat je moeite hebt gedaan om pixels te optimaliseren die je op het punt stond weg te gooien - en je hebt waarschijnlijk compressieartefacten gebakken in de pixels die je hebt bewaard. Knip eerst de afmetingen door en comprimeer vervolgens wat' s over met de afbeeldingscompressor. Afmetingen zijn sowieso bijna altijd de grotere overwinning: het halveren van beide kanten van een afbeelding verwijdert 75% van zijn pixels voordat een compressor het aanraakt. Daar ga ik dieper op in de Afbeeldingscompressiegids.

Kies dan het juiste formaat. Grofweg: JPEG voor foto's, PNG wanneer u transparantie of scherpe tekst en lijnen nodig heeft, WebP voor eigenlijk alles op internet omdat het beide op equivalente kwaliteit verslaat. de Converter voor afbeeldingsformaat die stap afhandelt en de Overzicht van afbeeldingen Behandelt hoe de stukken in elkaar passen.

Hoe verklein ik een afbeelding op Toolz.dev?

1. Open de Afbeeldingsgrootte formaat. Geen account, niets te installeren.
2. Laat je afbeelding vallen. Het wordt rechtstreeks in de browser geladen Bekijk het tabblad Netwerk als u het bewijs wilt niets' s wordt overal verzonden - dat' is een controle die de moeite waard is om uit te voeren op elk afbeeldingstool waarin u privéfoto's plakt.
3. Voer uw doeldimensies in. Typ de breedte; met de verhouding vergrendeld, volgt de hoogte. Vergeet niet te verdubbelen voor Retina als dit voor een scherm is.
4. Kies uw uitvoerformaat- PNG, JPEG of WebP.
5. Downloaden. gegenereerd in uw browser, rechtstreeks naar uw schijf.

Als u ' dezelfde afbeelding in verschillende maten produceert, werk dan elke keer vanuit het grootste origineel. Don't wijzig de grootte van de 1200px-export naar 600px - ga terug naar het origineel en exporteer daaruit 600. Elke hercodeer van een reeds verliesgevend bestand vergroot de schade, op dezelfde manier waarop een fotokopie van een fotokopie wordt afgebroken. It' is een kleine discipline die zichtbaar wordt in het eindresultaat.

Veelgestelde vragen

Kan ik een afbeelding verkleinen zonder kwaliteit te verliezen?

Downscaling verliest bijna niets waarneembaar - u & #39; re het weggooien van pixelgegevens die u niet langer nodig hebt, en het resultaat op het scherm ziet er scherp uit Opschaling verliest altijd kwaliteit, omdat de software pixels moet interpoleren die nooit zijn vastgelegd, waardoor zachtheid of zichtbare artefacten ontstaan Altijd de grootte verkleinen ten opzichte van het grootste origineel dat u hebt in plaats van omhoog ten opzichte van een klein exemplaar.

Welk formaat moet ik afbeeldingen exporteren voor Retina-schermen?

Exporteren op 2× Het formaat waarop het beeld wordt weergegeven. Als uw lay-out een afbeelding weergeeft in een 600×400-box, exporteer deze dan op 1200 × 800 zodat deze scherp blijft op apparaten met een devicePixelRatio van 2. verder gaan dan 2 × is zelden de extra bytes waard, omdat het zichtbare voordeel zelfs op 3× displays minimaal is.

Verwijdert het verkleinen van een afbeelding EXIF-gegevens?

Ja, wanneer het formaat wijzigen gebeurt via een HTML-canvas - zoals het doet op Toolz.dev - codeert de tool de afbeelding opnieuw in een nieuw bestand en EXIF-metagegevens worden niet overgedragen Dat betekent dat cameradetails, opnametijd en GPS-coördinaten allemaal worden verwijderd Voor publicatie is dit een privacyvoordeel; als u EXIF bewaard wilt laten blijven, gebruik dan een tool die dit expliciet ondersteunt.

Kan ik een geanimeerde GIF wijzigen en de animatie behouden?

Niet met een canvas-resizer. Canvas legt één frame vast, dus de uitvoer is een stilstaand beeld in PNG, JPEG of WebP-formaat. Het verkleinen van een animatie met behoud van al zijn frames vereist een speciale GIF-verwerkingstool.

Hoe verklein ik een afbeelding naar een specifieke bestandsgrootte in kb?

Bestandsgrootte is niet iets dat u direct instelt - het valt buiten de afmetingen, het formaat en de compressiekwaliteit Werk achteruit: verminder de afmetingen tot waar de afbeelding daadwerkelijk op wordt weergegeven, exporteer als WebP of JPEG in plaats van PNG voor foto's, stap vervolgens de kwaliteit naar beneden en controleer de uitvoergrootte opnieuw. Een hard doel raken zoals & quot; onder 100 KB" is meestal twee of drie passages van die lus, niet één.

Hoe kan ik een afbeelding verkleinen zonder deze bij te snijden?

Houd de beeldverhouding vergrendeld Wanneer breedte en hoogte in hun oorspronkelijke verhouding blijven, blijft elke pixel van het frame behouden en verandert alleen de schaal. Bijsnijden wordt alleen onvermijdelijk als de doelvorm verschilt van de bronvorm. Het plaatsen van een 3:2-foto in een 1:1-avatarsleuf betekent dat je de lege ruimte in een brievenbus plaatst of een deel van de afbeelding wegsnijdt.

Moet ik mijn afbeeldingen eerst verkleinen of comprimeren?

Pas eerst de grootte aan en comprimeer vervolgens. Door de afmetingen te verkleinen, worden pixels regelrecht verwijderd - door zowel de breedte als de hoogte te halveren, wordt 75% ervan geëlimineerd - wat bijna altijd een grotere winst op bestandsgrootte is dan alleen compressie. Het comprimeren voordat u de grootte van de verspilling van uw inspanning op pixels wijzigt, staat u op het punt deze te verwijderen en kunt u artefacten bakken in de pixels die u bewaart.

Wat is het verschil tussen verkleinen en bijsnijden?

Het formaat wijzigen verandert de afmetingen van de hele afbeelding, waarbij alle inhoud behouden blijft. Bijsnijden wordt een deel van de afbeelding weggesneden om de framing of beeldverhouding te wijzigen. Als u een vierkant nodig heeft van een rechthoekige foto, past het formaat wijzigen met de beeldverhouding vergrendeld bij de afbeelding in het vierkant in plaats van deze te vullen. U heeft een bijsnijding nodig om het frame te vullen.

Is er een limiet voor bestandsgrootte voor het verkleinen van afbeeldingen in de browser?

Er is geen server-opgelegde limiet, omdat er niets wordt geüpload - het praktische plafond is uw apparaat' s beschikbaar geheugen Typische foto's, inclusief grote camerabestanden, wijzigen direct de grootte Extreem grote afbeeldingen (scans met zeer hoge resolutie, bijvoorbeeld) kunnen een moment duren of, op een telefoon met geheugenbeperking, niet laden.

Waarom ziet mijn afbeelding er nog steeds wazig uit na het wijzigen van het formaat naar de juiste afmetingen?

Controleer drie dingen in volgorde: of u bent opgeschaald van een kleiner origineel (niet-fixeerbaar - zoek een grotere bron), of u rekening hebt gehouden met de pixelverhouding van het apparaat (een bestand van 600px op een 2×-scherm moet 1200px zijn), en of het platform dat u hebt geüpload om de afbeelding achteraf opnieuw te comprimeren De derde is gebruikelijk op sociale media en kan het beste worden beperkt door te uploaden op het platform's aanbevolen afmetingen.