Welke afmetingen kan ik aanhouden voor mijn afbeeldingen?
In je webwinkel plaats je verschillende afbeeldingen. Denk hierbij aan je logo, header afbeelding, slideshows en productafbeeldingen. Om ervoor te zorgen dat je de juiste afmetingen aanhoudt, is dit artikel geschreven.
Header
In de header kun je twee afbeeldingen plaatsen. Je logo en een header achtergrond afbeelding. Sommige winkeliers kiezen ervoor om het logo in de header achtergrond afbeelding te verwerken. Op die manier heb je de volledige vrijheid om de locatie van je logo te bepalen.
Voor het logo kun je afmetingen gebruiken van maximaal 1100 pixels breed en 400 pixels hoog. Wij adviseren echter om het logo niet zo groot te maken. Qua hoogte adviseren wij om niet hoger dan 250 pixels te gaan. De breedte is natuurlijk afhankelijk van het soort logo.
Voor de header achtergrond afbeelding mag je een totale breedte van 2200 pixels aanhouden. Zorg er wel voor dat alle belangrijke content in de middelste 1100 pixels staat. Alles wat daarbuiten valt wordt namelijk afgesneden naarmate het scherm kleiner wordt. De middelste 1100 pixels zijn altijd zichtbaar op elk scherm. De hoogte mag maximaal 400 pixels zijn, maar ook hier adviseren wij om de afbeelding niet te hoog te maken.
De header achtergrond afbeelding wordt op grotere apparaten vaak volledig weergegeven (computers en sommige tablets). Op mobiele telefoons wordt de header automatisch bijgesneden. Dit betekent dat de header achtergrond afbeelding afgesneden wordt aan beide zijkanten, wanneer deze breder is dan 1100 pixels. Het logo wordt geschaald en daardoor verkleind, zodat het op alle apparaten past.
Producten
Bij de productafbeeldingen is de ideale afmeting afhankelijk van je productoverzicht weergave. We adviseren om altijd vierkante afbeeldingen te gebruiken. Dit mag ergens tussen de 500x500 en 1500x1500 pixels zijn. Het is hierbij vooral belangrijk dat alle productafbeeldingen dezelfde afmeting hebben. Hebben alle afbeeldingen een ander formaat? Dan kun je er ook voor kiezen om in de beheeromgeving van je webwinkel onder ‘Instellingen / vormgeving / template instellingen / producten’ de optie voor het uitvullen van productafbeeldingen aan te zetten. Op die manier zorg je ervoor dat de weergave er mooi uit ziet. Meer hierover, lees je in dit Vraag & Antwoord artikel over productafbeeldingen.
Slideshow
De afmeting van de slideshow is afhankelijk van de positie van de slideshow. Als je een slideshow met de positie 'Tussen paginaheader en pagina-inhoud' kiest, dan is de breedte van de slideshow schermvullend. Dit betekent dat de breedte altijd 2200 pixels is.
Mocht je dus een mooie slideshow afbeelding willen dan is het verstandig om de afbeelding van tevoren te bewerken, zodat de afbeelding 2200 pixels breed is en de hoogte kun je dan op voorhand bepalen.
Wil je een slideshow die niet schermvullend is? Dan kun je kiezen voor de positie 'Boven de pagina-inhoud' of ‘Onder de pagina-inhoud’. Dan is de breedte van de slideshow altijd 1100 pixels. Wederom geldt hetzelfde; de slideshow schaalt de afbeeldingen zodat ze de volle 1100 pixels vullen. Maak de afbeelding op voorhand 1100 pixels breed en bepaal op basis daarvan de hoogte.
Ook voor de slideshow is het verstandig om deze niet te hoog te maken (max. 600 pixels). Hoe hoger de afbeelding qua pixels is, hoe meer de bezoeker moet scrollen om de rest van de pagina inhoud te zien. Je kunt met verschillende hoogtes experimenteren en je webwinkel vanaf verschillende apparaten bezoeken.
Afbeeldingen op een pagina
Je wilt natuurlijk ook je afbeeldingen op een pagina plaatsen. Hier is niet 1 formaat voor aan te houden. Het enige wat je in de gaten moet houden is dat de inhoud waar je afbeeldingen kunt plaatsen 1100 pixels breed is (netto 1050 pixels i.v.m. witruimte van de pagina). Wil je niet dat de afbeeldingen strak naast elkaar staan? Gebruik dan witruimte tussen je afbeeldingen. Stel je wilt 5 pixels witruimte per afbeelding gebruiken en je wilt 3 afbeeldingen naast elkaar plaatsen. Dan kun je de 3 afbeeldingen maximaal 350 pixels breed maken. Dat zit zo. De beschikbare ruimte is 1050 pixels netto, hier haal je 15 pixels witruimte vanaf voor 3 afbeeldingen. Dan houd je nog 1035 pixels over. Dit deel je door het aantal afbeeldingen dat je naast elkaar wilt plaatsen en je hebt het formaat dat je kunt gebruiken.
Witruimte instellen
De witruimte voor je afbeeldingen kun je direct instellen met een fotobewerkingsprogramma (zoals Photoshop). Je houdt dan ruimte over rondom je afbeelding, transparant of in een gewenste kleur. Vervolgens plaats je de afbeelding op je pagina en hoef je verder niets te doen. Een tweede optie, is het instellen van witruimte door een randdikte in te stellen. Dit kun je instellen zodra je de afbeelding op de pagina hebt geplaatst in de beheeromgeving van je webwinkel. Je dubbelklikt vervolgens op de afbeelding, waarna een venster verschijnt. Onderin het venster zie je ‘randdikte’ en ‘randkleur’ staan. Hier kun je de gewenste dikte instellen en dezelfde kleur als de achtergrond van je pagina (bijvoorbeeld). Nu staat er een gelijke ruimte tussen je afbeeldingen.
Overige afmetingen
Er zijn natuurlijk ook nog andere afmetingen die handig zijn om te weten.
E-mail header: De afbeelding dient tussen de 500 en 1320 pixels breed en 100 en 250 pixels hoog zijn.
Factuurlogo: Maakt niet uit. De afbeelding zal automatisch verkleind worden naar een hoogte van 125 pixels. De bestandsgrootte mag maximaal 200 KB zijn.
Factuurachtergrond: Gebruik een afbeelding van minimaal 794 pixels breed en 1123 pixels hoog. Het bestand mag maximaal 250 KB zijn.