Afbeeldingen uploaden en bijsnijden voor elke plek in je omgeving

Twee dingen zorgen vaak voor gedoe met afbeeldingen. Een favicon dat maar niet geüpload wil worden, en het gevoel dat elke plek een andere verhouding vraagt en dat het bijsnijden nergens echt lukt. Allebei terecht, want er zit een systeem achter dat je even moet kennen. Heb je dat eenmaal door, dan is het zo gepiept.

Het fijne is dat je van tevoren niets op maat hoeft te maken. Je uploadt gewoon je foto, en Memly opent waar nodig een venster waarin je hem passend maakt.

Het venster Afbeelding bijwerken

Upload je een foto op een plek die een vaste vorm nodig heeft, dan opent Memly het venster Afbeelding bijwerken. Daarin maak je de foto passend voor precies die plek. Toegestaan zijn PNG, JPG, WebP en SVG, tot 10 megabyte per bestand.

De twee knoppen

Bovenin het venster staan twee keuzes.

Bijsnijden vult het hele vlak en laat de randen weg. Je sleept de foto op zijn plek en zoomt in of uit met de schuifregelaar. Dit is de scherpste keuze, want de foto vult het vlak precies en er komt niets omheen.

Hele foto tonen houdt je foto compleet. Wat er aan vlak overblijft wordt opgevuld met een vervaagde versie van diezelfde foto, zodat er geen lege randen ontstaan.

Bij een favicon en bij de ronde foto’s, dus een profielfoto, een foto bij een review of een foto van een instructeur, heb je geen keuze. Daar snijdt Memly altijd bij, want een uitsnede is precies wat zo’n rond kadertje nodig heeft.

Wat elke plek vraagt

De vraag die ik het vaakst krijg is hoeveel pixels bij hoeveel pixels je nou moet maken. Hieronder staat het per plek. Maak je je afbeelding precies zo groot, dan past hij meteen en hoef je zelf niets bij te snijden. Lever je iets anders aan, dan snijd je hem gewoon passend in het venster, dat blijft werken.

De verhouding zegt hoe de breedte en de hoogte zich tot elkaar verhouden. 1 op 1 is een vierkant, even breed als hoog. 4 op 5 staat rechtop, iets hoger dan breed. 16 op 9 ligt languit, veel breder dan hoog. Staat er vrij, dan maakt de verhouding niet uit en telt alleen de breedte. Je hoeft niets zelf uit te rekenen. Houd je de maat aan die erbij staat, dan klopt de verhouding vanzelf.

Plek	Verhouding	Maak je afbeelding
Header-logo	vrij	minstens 400 px breed
E-maillogo	vrij	ongeveer 600 px breed
Favicon	1 op 1, vierkant	512 bij 512
Foto op de inlogpagina	4 op 5, staand	1600 bij 2000
Cover van een training, product, event of community	16 op 9, liggend	1600 bij 900
Afbeelding naast de titel op een productpagina	4 op 5, staand	1200 bij 1500
Achtergrond bovenaan een training	16 op 7, breed	1920 bij 840
Foto in een kant-en-klaar coverontwerp	1 op 1, vierkant	800 bij 800
Afbeelding op de betaalpagina	1 op 1, vierkant	400 bij 400
Profielfoto en foto bij een review	1 op 1, vierkant	400 bij 400
Foto van een instructeur	1 op 1, vierkant	800 bij 800
Stilstaand beeld bij een opname	16 op 9, liggend	1600 bij 900

Lever je een grotere foto aan, geen probleem, Memly verkleint hem netjes naar deze maat. Kleiner mag ook, maar dan wordt hij opgerekt en dat zie je aan de scherpte. Deze maten zijn ook zo gekozen dat je beeld scherp blijft op een scherm met een hoge pixeldichtheid, zoals een MacBook of een moderne telefoon.

De inlogpagina

De foto op je inlogpagina is de lastigste om goed te krijgen, dus die verdient wat extra uitleg. Die foto vult de linkerhelft van het browservenster over de volle hoogte. De vorm van dat vlak hangt daardoor af van het scherm van je bezoeker. Op een breed scherm is het bijna vierkant, op een smaller scherm duidelijk staand. En op een telefoon laat Memly de foto helemaal weg, daar begint je bezoeker meteen bij het inlogformulier.

Daarom zetten we de verhouding hier op 4 op 5, staand dus, want dat ligt het dichtst bij het gemiddelde van al die schermen. Aan de randen valt altijd een stukje weg, bij de ene bezoeker wat meer dan bij de andere. Zet het belangrijkste dus in het midden en gebruik geen foto met tekst die tot aan de rand loopt.

Voor de afbeelding naast de titel op een productpagina geldt hetzelfde verhaal. Daar komt nog iets bij, want vanaf links loopt er een kleurverloop overheen zodat de foto rustig naar je tekst toe wegvalt.

Foto’s in de community

In de community werkt het iets anders. Zet je één foto bij een bericht of een reactie, dan houdt die zijn eigen vorm, staand of liggend, en zie je geen bijsnijdvenster. Zet je er meerdere, dan worden ze vierkant en komen ze samen in een raster. Dan verschijnt het venster wel.

Een foto die er al staat verandert niet mee

Soms verandert de vorm die een plek vraagt, bijvoorbeeld na een update. Een foto die er al staat past zich daar niet vanzelf op aan, want Memly snijdt het oude beeld dan bij op de nieuwe vorm en dat pakt niet altijd mooi uit. Upload je die foto opnieuw, dan krijg je het bijsnijdvenster terug en zet je hem weer precies goed.

Verder lezen

• Je logo’s, favicon en brandkleur instellen
• De zijbalk in je eigen kleur