New Dimensions
--
File Size
--
Scale
--
Verklein afbeeldingen tot exacte afmetingen met vergrendeling van beeldverhouding en veelvoorkomende presets. Alle verwerking gebeurt in je browser -- er wordt niets geüpload naar een server.
Correct formaat afbeeldingen zijn cruciaal voor paginasnelheid en Core Web Vitals. OneStepToRank bewaakt je rankings, volgt concurrenten en optimaliseert automatisch je lokale SEO-strategie.
Aan de slagElk platform heeft specifieke afbeeldingsafmetingsvereisten. Het gebruik van de verkeerde grootte betekent dat je zorgvuldig ontworpen visuals worden bijgesneden, uitgerekt of naar beneden gesampled op manieren die je merk ondermijnen. Facebook raadt 1200x630 aan voor linkvoorbeelden en 1080x1080 voor feedberichten. Instagram gebruikt 1080x1080 voor vierkante berichten, 1080x1350 voor portret, en 1080x608 voor landschap. Twitter/X-afbeeldingen zien er het beste uit op 1200x675 pixels. Deze afmetingen correct instellen is geen optie – het is het verschil tussen een professionele en een amateuristische aanwezigheid.
Voor websites is het belangrijkste principe om afbeeldingen te leveren op exact de grootte waarop ze worden weergegeven. Een afbeelding die in CSS 600px breed wordt getoond, mag geen origineel van 3000px breed zijn -- de browser downloadt nog steeds het volledige bestand voordat het wordt verkleind, wat bandbreedte verspilt en de paginalading vertraagt. De uitzondering zijn retina‑schermen, waarbij je afbeeldingen moet leveren op 2x de CSS‑grootte (dus 1200px voor een weergavevak van 600px) om scherpte op hoge‑dichtheidsschermen te behouden.
Moderne webontwikkeling vereist het leveren van verschillende afbeeldingsgroottes aan verschillende apparaten. Een desktopgebruiker met een monitor van 1920px breed heeft een andere afbeelding nodig dan een mobiele gebruiker met een scherm van 375px. Het HTML‑attribuut srcset en het attribuut sizes laten je meerdere afbeeldingsversies definiëren waar de browser uit kan kiezen op basis van de breedte van het viewport en de pixelratio van het apparaat. Dit betekent dat je verschillende versies van elke afbeelding maakt – doorgaans met breedtes van 400px, 800px, 1200px en 1600px.
Retina‑schermen (2x en 3x pixeldichtheid) plaatsen twee of drie keer zoveel fysieke pixels in hetzelfde schermgebied. Zonder retina‑klaar gemaakte afbeeldingen zien foto’s er zacht en wazig uit op iPhones, iPads, MacBooks en de meeste moderne Android‑apparaten. De oplossing is eenvoudig: verklein je afbeeldingen tot 2x de weergavegrootte en laat CSS ze beperken. Een afbeeldingsvak van 600x400 heeft een bronafbeelding van 1200x800 nodig. Gebruik deze tool om elke groottevariant te maken en comprimeer ze vervolgens met onze Image Compressor om de bestandsgroottes beheersbaar te houden.
De snelste afbeelding is de kleinste afbeelding die er nog goed uitziet. Voor hero‑secties streef je naar afbeeldingen onder de 200 KB gecomprimeerd. Voor inline‑contentafbeeldingen houd je ze onder de 100 KB. Miniaturen moeten onder de 30 KB zijn. Deze doelen gaan uit van het gebruik van moderne formaten zoals WebP – als je vastzit aan JPEG, zullen de groottes 25‑35 % groter zijn voor dezelfde kwaliteit. Verklein altijd afbeeldingen tot hun weergavegrootte voordat je ze comprimeert. Een foto van 4000x3000 gecomprimeerd tot 150 KB ziet er slechter uit dan een correct verkleinde versie van 1200x900 die tot dezelfde grootte is gecomprimeerd, omdat de compressie veel harder moet werken om meer pixels in hetzelfde bestandsgroottebudget te passen.
Verkleinen behoudt de kwaliteit goed omdat je pixels consolideert. Vergroten (opschalen) vermindert de kwaliteit omdat de browser nieuwe pixels moet interpoleren die niet in het origineel aanwezig waren, wat leidt tot wazigheid. Voor de beste resultaten begin je altijd met de bronafbeelding met de hoogste resolutie en verklein je deze. Vergroot nooit een kleine afbeelding en verwacht geen scherpe resultaten.
Beeldverhouding is de proportionele relatie tussen breedte en hoogte. Veelvoorkomende verhoudingen zijn 16:9 (breedbeeld), 4:3 (standaard) en 1:1 (vierkant). Het vergrendelen van de beeldverhouding zorgt ervoor dat bij het wijzigen van één dimensie de andere automatisch wordt aangepast om de verhoudingen te behouden, waardoor rekken of samendrukken wordt voorkomen. Ontgrendel het alleen wanneer je opzettelijk een niet‑proportionele schaal wilt.
Facebook‑berichten: 1200x630. Instagram‑feed: 1080x1080 (vierkant) of 1080x1350 (portret). Twitter/X: 1200x675. LinkedIn: 1200x627. Pinterest: 1000x1500. Profielfoto’s op verschillende platforms zijn doorgaans 400x400 of groter. Het gebruik van de juiste afmetingen zorgt ervoor dat je afbeeldingen worden weergegeven zonder onverwacht bijsnijden of kwaliteitsverlies.
Retina‑ en HiDPI‑schermen hebben 2‑3 x de pixeldichtheid van standaard schermen. Een afbeelding die wordt getoond op 300x200 CSS‑pixels op een 2x retina‑scherm gebruikt in feite 600x400 fysieke pixels. Als je afbeelding slechts 300x200 is, verschijnt deze wazig op deze schermen. De oplossing is om afbeeldingen te leveren op 2x de beoogde weergavegrootte en CSS‑breedte/hoogte te gebruiken om ze te beperken.