Afmetingen afbeeldingen

Lees dit eerst!

Het is belangrijk om bij het gebruik van afbeeldingen rekening te houden met een aantal zaken. Wanneer je rekening houd met onderstaande maak je optimaal gebruik van je afbeeldingen

1) Zorg er voor dat er geen tekst in je afbeelding voorkomt. Dit voorkomt dat je tekst afgesneden wordt en je afbeelding minder mooi word. De banners in onze thema’s bevatten opties om tekst toe te voegen.

2) Zorg ervoor dat het object gecentreerd in de afbeelding staat of houd je aan de opgegeven dimensies van de afbeelding. Wanneer je een vierkante afbeelding probeert te gebruiken in een banner die rechthoekig is zal een hoop van je afbeelding afgesneden worden. Wanneer je je aan de dimensies (dus vierkant of rechthoekig) van de afbeeldingen houd zoals we die hier onder beschreven hebben dan komt je afbeelding altijd mooi uit.

In onderstaand voorbeeld een originele afbeelding die rechthoekig is en die wordt gebruikt in een vierkante banner.

Origineel
Geschaald door het thema

Department v3 heeft 2 logo instellingen. Te weten square en rectangle. Tevens heb je de keuze om voor een SVG afbeelding of een PNG afbeelding te kiezen.

Wij adviseren om voor een SVG (Scalable Vector Graphic) te kiezen. Dit werkt beter op mobiel en is vele malen scherper dan bijvoorbeeld een PNG afbeelding. Vraag je designer om een SVG logo aan te leveren. Heb je zelf de beschikking over Adobe Illustrator dan lees in dit artikel hoe je een SVG logo maakt. Mocht je er echt niet uit komen neem dan contact met ons op.

Rechthoekig logo
Vierkant logo

Voor SVG logo’s maakt de afmeting niet uit. Zolang de afmetingen maar rechthoekig zijn. Dus bijvoorbeeld 200×60 pixels. Of vierkant, bijvoorbeeld 300×300 pixels. Het voordeel van SVG afbeeldingen is dat deze altijd goed schalen en scherp blijven.

Desktop PNG logo:

Voor PNG logo’s gebruik je 400×120 pixels wanneer je kiest voor een rechthoekig logo. Of 300×300 pixels wanneer je kiest voor een vierkant logo.

Mobile PNG logo’s:

Voor rechthoekige logo’s gebruik je 280×120 pixels. Kies je een vierkant logo gebruik dan 300×300 pixels als afmeting.


Banners in banner block

De volgende afbeeldingen hebben betrekking op de banners in het banner block.

Banner block op

De banner afbeeldingen in Department v3 zijn op 2 manieren in te stellen.

Normal image: Gebruik een afbeelding van 250×250 pixels.

Background image: Gebruik een afbeelding van 430×270 pixels.


Banners in hero block

De volgende afbeeldingen hebben betrekking op de banners in het hero block.

Ook bij de banners in dit blok kun je kiezen om de afbeelding als normale afbeelding te tonen of als achtergrondafbeelding. Afhankelijk van hoeveel banners je wilt tonen in dit blok zijn de afmetingen als volgt:

In principe kun je elke afmeting gebruiken voor deze afbeeldingen. Het thema zal de afbeelding altijd schalen naar de beschikbare ruimte. Echter kan er wat clipping ontstaan. Dus je afbeeldingen kunnen afgesneden worden om ze passend te maken. Meestal gaat dat goed, mocht het niet helemaal naar wens zijn gebruik dan onderstaande afmetingen.

Normal image:

  • 3 Banners: Maximale grootte afbeelding is 200×160 pixels.
  • 2 Banners: Maximale grootte afbeelding is 200×250 pixels.
  • 1 Banner: Maximale grootte afbeelding is 200×500 pixels.

Background image:

  • 3 Banners: Maximale grootte afbeelding is 430×160 pixels.
  • 2 Banners: Maximale grootte afbeelding is 430×250 pixels.
  • 1 Banner: Maximale grootte afbeelding is 430×500 pixels.

Ook bij de banners in dit blok kun je kiezen om de afbeelding als normale afbeelding te tonen of als achtergrondafbeelding.

De hoogte van deze afbeedling is afhankelijk van de hoogte van de product tegels aan de rechterkant. Echter een goed afmeting is 540×500 pixels. Zijn je product tegels wat lager dan maak je de banner ook iets minder hoog.

Spotlight

Je kunt de spotlight afbeelding op 2 manieren instellen. Beide hebben een andere afmeting. Tevens kun je per device een andere afbeelding uploaden.

Fullwidth

  • Mobile: 428×370 pixels
  • Tablet: 810×370 pixels
  • Desktop: 2500×560 pixels

Normal:

  • Mobile: 428×370 pixels
  • Tablet: 810×370 pixels
  • Desktop: 600×500 pixels

Overig

De juiste afmetingen voor de overige afbeeldingen:

  • Customer service image: 180×340 pixels
  • Store image: 300×280 pixels
  • Category images:
    • Met ruimte er omheen: 120×120 pixels
    • Zonder ruimte er omheen: 240×120 pixels
  • Brand images: 120×100 pixels

Updated on december 28, 2021

Was this article helpful?

Related Articles