Samenvatting
Een afbeelding die op desktop goed oogt maar op mobiel wazig, uitgerekt of verkeerd afgesneden is, verpest snel de indruk van je site. In Mach3Blocks stuur je dat op drie niveaus: de bronkwaliteit, de grootte + verhouding van het afbeeldingelement, en de ruimte eromheen (kolom/rij/container). Dit artikel laat zien hoe je scherpte behoudt én zelf bepaalt welk deel van een foto zichtbaar blijft — per schermformaat.
Schalen kan een afbeelding kleiner of groter tonen, maar groter maken voegt geen scherpte toe. Begin dus altijd bij een bronbestand met voldoende resolutie.
Wanneer gebruik je dit?
- De afbeelding wordt wazig zodra je hem groter toont.
- Een gezicht of productdetail valt weg door de uitsnede.
- De foto ziet er op mobiel anders uit dan op desktop.
- Dezelfde foto oogt op de ene plek goed en op de andere niet.
Hoe werkt dit in Mach3Blocks?
Het zichtbare resultaat komt uit drie lagen:
- Bronkwaliteit — een klein bronbestand wordt nooit scherp als je het groot toont. Upload voldoende resolutie (maar niet gigantisch groot; dat vertraagt de site onnodig).
- Het afbeeldingelement — selecteer de afbeelding en ga naar Opmaak. Daar stel je in:
- Grootte per schermformaat: vaste breedtes (240, 320, 480, 640, 960, 1280 of 1920 px) of Geen. Zo bepaal je per apparaat hoe groot de afbeelding getoond wordt.
- Verhouding: kies een vaste verhouding (bijvoorbeeld 1:1, 4:3, 16:9 … tot 9:16) of Origineel. De afbeelding wordt dan naar dat kader gecropt.
- Positie: bij een crop bepaalt de positie (negen vaste standen, van linksboven tot rechtsonder) welk deel zichtbaar blijft — zo houd je een gezicht of product in beeld.
- De ruimte eromheen — kolombreedte, rijhoogte en container kunnen het beeld alsnog in een ongunstige verhouding duwen. Controleer die als het element "goed" staat maar het resultaat toch niet klopt.
--alert variant:warning title:"Kernregel"--
Zit het probleem niet bij het element zelf? Loop dan de bovenliggende lagen na: kolom → rij → container. Alleen aan het afbeeldingelement blijven trekken lost een structuurprobleem niet op.
--/alert--
Welke rechten heb je nodig?
Je past opmaak aan, dus je hebt het recht Websites/presentaties stijlen nodig. Zie je de opmaak-opties niet, of kun je niet opslaan? Dan ontbreekt dat recht — vraag je beheerder om toegang.
Waar klik je precies?
- Open de pagina in de editor en klik de afbeelding aan.
- Ga in het rechter paneel naar Opmaak en controleer eerst je apparaatweergave (Desktop / Tablet / Telefoon).
- Controleer onderin de selectie dat je echt op het afbeeldingelement staat (niet op de kolom of rij eromheen).
- Stel de Grootte in en — indien gewenst — een Verhouding; kies bij een crop de juiste Positie.
- Wissel naar Tablet en Telefoon staand en stuur per schermformaat bij waar nodig.
- Klopt het nog niet? Selecteer achtereenvolgens Kolom → Rij → Container en controleer daar breedte, hoogte en ruimte.
Supportflow: symptoom → oorzaak → oplossing
"Mijn afbeelding wordt wazig als ik hem groter maak"
De bron heeft te weinig pixels voor de weergavegrootte.
- Controleer welke grootte je toont en vervang de bron door een versie met voldoende resolutie.
- Zet de grootte niet hoger dan de bron aankan.
- Controleer Desktop → Tablet → Telefoon.
"Op mobiel is de foto gek afgesneden"
De verhouding/positie pakt op mobiel anders uit, of de kolom dwingt een verhouding af.
- Zet de editor op Telefoon staand.
- Kies bij het element een passende Verhouding en stel met Positie in welk deel zichtbaar blijft (bijvoorbeeld het gezicht centraal).
- Controleer daarna de kolominstellingen (breedte/uitlijning/ruimte).
--alert variant:info title:"Snelle check"--
Test elke aanpassing meteen in Desktop, Tablet én Telefoon staand. Zo vang je de meeste onverwachte verschuivingen direct op.
--/alert--
Praktijkvoorbeelden
Voorbeeld 1 — Hero met teamfoto
Situatie: de foto is scherp op laptop, maar op telefoon valt het gezicht van de spreker buiten beeld.
Ingreep: op mobiel een staande verhouding gekozen en met Positie het gezicht centraal gezet; daarna de kolomruimte gecontroleerd.
Resultaat: het gezicht blijft in beeld op mobiel, terwijl de desktopweergave ongewijzigd goed blijft.
Voorbeeld 2 — Productoverzicht met gelijke kaarten
Situatie: de productfoto's hebben verschillende afmetingen, waardoor de kaarten ongelijk ogen.
Ingreep: alle productafbeeldingen op verhouding 1:1 gezet met Positie centraal, zodat elk product even groot in beeld komt — ongeacht het originele formaat.
Resultaat: een strak, gelijkmatig productgrid.
Veelgemaakte fouten
- Een klein bronbestand groot tonen. Vervang de bron; opschalen maakt niet scherper.
- Alleen op desktop controleren. Grootte en crop pakken per schermformaat anders uit — test op alle drie.
- De verkeerde laag aanpassen. Controleer of je op het element staat; loop anders kolom, rij en container na.
- Croppen zonder de positie te checken. Kies bewust welk deel zichtbaar blijft, zodat het onderwerp niet wegvalt.