Hero shots (JouwWeb)

Uit De Vliegende Brigade
Ga naar: navigatie, zoeken

Sommige designs van JouwWeb bieden de mogelijkheid om een paginabrede hero shot in te voegen. Om die afbeeldingen goed te krijgen, is wat gepuzzel.

Parameters:

  • Dimensies van de afbeelding - Of speelt dat geen rol?
  • Aspect-ratio van de afbeelding - Dit speelt beslist een rol
  • Hoogte van de hero-shot - Dat kun je in JouwWeb met een schuif aanpassen.

Aanbevolen afmetingen

  • 1920x454
  • 4,32:1

Casus feb. 2020

Iteratie 1

  • Dimensies afbeelding: 1920x549
  • Verhoudingen afbeelding: 3,5:1
  • Hoogte hero-shot: Ca. de helft van het hoofdgedeelte van de pagina binnen de JouwWeb-editor.

Resultaat: Prima. Misschien neemt de afbeelding in productieomgeving iets te veel ruimte in

Iteratie 2

  • Als hierboven. Alleen de hoogte aangepast: Hij is nu ca. 1/3e van het hoofdvlak binnen de JouwWeb-editor
  • Afbeelding is prima. Er worden geen boven- of onderranden verwijderd.

Casus maart 2020 (1)

Iteratie 1

Deze afbeelding krijg ik niet goed:

  • Afmetingen: 1500x781
  • Verhouding: 2:1
  • Verschillende dingen geprobeerd, maar zonder succes: Onder- & bovenranden worden weggesneden.

Iteratie 2

  • Afbeelding als hierboven, maar nu de verhouding aangepast naar 3,5:1, terwijl breedte gelijk blijft → Hoogte: 428
  • Vanwege loze ruimte, wordt de nieuwe breedte 1236 → Nieuwe hoogte: 353

Lukt niet om 'm goed te krijgen. Waarschijnlijk omdat er geschaald wordt om eea. aan te passen aan het scherm waarop het getoond wordt.

Conclusies

  • Afmetingen: 1920x454
  • Zorg voor flinke marges rondom de afbeelding

Casus maart 2020 (2)

  • Originele afmetingen: 3840x2160
  • Hoogte wil ik behouden → Breedte wordt 9331

Gelukt! Dus voldoende marges aanhouden rondom afbeeldingen.