Dit artikel helpt u te begrijpen hoe u afbeeldingen beheert binnen het Booston-platform. We leggen uit hoe u afbeeldingen uploadt, hoe u ze gebruikt en hoe u ervoor zorgt dat ze er goed uitzien, ongeacht het gebruiksscenario.

Inhoud

• Een afbeelding uploaden
• Uw onderwerp selecteren met een focuspunt
• Een afbeelding selecteren voor gebruik
• Afbeeldingen hergebruiken
• Conclusie
• Protip: werken in batch
• FAQ

Een afbeelding uploaden

Allereerst moeten we een afbeelding uploaden om deze te kunnen gebruiken. U kunt een afbeelding selecteren tijdens het instellen van een websitepagina-element of campagne. In dit geval doen we het vooraf, door de afbeelding te uploaden in de bestandsbeheerder.

Ga naar: Media > Bestandsbeheer. Selecteer een map waarin u uw afbeelding wilt uploaden en klik op 'uploaden'. Selecteer vervolgens de afbeelding(en) die u wilt uploaden en ga terug naar de map. Uw afbeelding is nu geüpload naar Booston.

Uw onderwerp selecteren met een focuspunt

Iedereen met de juiste tools kan een afbeelding op maat maken voor een specifiek geval. Dit betekent het creëren van een afbeelding met de gewenste afmetingen, bestandsgrootte, scherpte en onderwerpweergave. Dit is altijd een optie, waardoor u eenvoudig uw op maat gemaakte afbeelding kunt uploaden en selecteren voor gebruik. Als dit voor u geldt, overweeg dan om Booston's afbeeldingsoptimalisatie uit te schakelen:

Ga naar instellingen > algemeen > afbeeldingsresolutie kwaliteit > stel in op “uit: geen afbeeldingsoptimalisatie”.

Booston kan echter ook automatisch afbeeldingen optimaliseren voor het web. Dit gebeurt door eerst het onderwerp van uw afbeelding te selecteren met een 'focuspunt'.

Ga naar uw geüploade afbeelding > klik op het focuspunt-icoon. Er verschijnt een pop-up met uw afbeelding en voorbeelden van die afbeelding in verschillende afmetingen. Dit zijn de voorbeelden wanneer u geen focuspunt instelt. Selecteer nu de focuspuntknop en stel deze in op een gewenste plek. Merk op dat de voorbeeldafbeelding nu is gericht op die plek voor alle voorbeeldafmetingen.

Ongeacht de situatie zal uw afbeelding nu het onderwerp centraal tonen en wordt de bestandsgrootte verkleind voor snellere laadtijden. Meer hierover in het volgende hoofdstuk.

Een afbeelding selecteren voor gebruik

We kunnen nu de afbeelding selecteren voor gebruik. De afbeelding kan worden gebruikt voor verschillende scenario's, variërend van campagnes tot pagina-elementen van uw website. In dit voorbeeld voegen we de afbeelding toe aan een pagina-element.

Als u uw afbeelding wilt toevoegen aan een pagina-element, ga dan naar: inhoud > pagina-elementen > bewerk een pagina-element. Klik voor de afbeelding op 'bestand zoeken of uploaden'. De bestandsbeheerder verschijnt. Ga naar uw afbeelding en selecteer deze. Sla nu het pagina-element op door op opslaan te klikken.

(Let op: in deze fase van het selecteren van een afbeelding voor gebruik kunt u ook het uploaden van een afbeelding, het instellen van een focuspunt en het selecteren van de afbeelding in één handeling combineren.)

Nu we de afbeelding hebben geselecteerd voor het pagina-element, gebeurt er automatisch een aantal dingen. Dit wordt het beste uitgelegd door te kijken naar hoe de afbeelding op de website wordt weergegeven. Dit is het resultaat:

De afbeelding wordt automatisch gericht op het gekozen onderwerp en blijft zeer scherp in de presentatie.

De afbeelding is bijgesneden. Dit betekent dat ongebruikte delen van de afbeelding worden afgesneden, waardoor de afbeelding kleiner wordt en de laadtijden sneller zijn. Als we dezelfde afbeelding zouden toevoegen aan een ander pagina-element dat mogelijk meer verticaal staat, worden uiteraard verschillende delen bijgesneden. Voor elk pagina-element wordt direct een geoptimaliseerde versie gemaakt. Een voorbeeld van een meer verticale afbeelding zou er zo uit kunnen zien:

De afbeelding wordt vervolgens aangepast naar de benodigde afmetingen (in pixels). De eerste afbeelding wordt bijvoorbeeld aangepast naar 348 × 377 pixels, de tweede naar 288 × 377 pixels. De oorspronkelijke afbeelding was 1200 × 1200 pixels. Met andere woorden: de totale reductie bedraagt ongeveer 80 tot 90%, wat de laadsnelheid verhoogt zonder kwaliteitsverlies.

De afbeelding wordt geconverteerd naar webP-formaat. Dit is een afbeeldingsformaat ontwikkeld door Google dat de bestandsgrootte minimaliseert zonder kwaliteitsverlies.

Tot slot wordt lazy loading toegepast: afbeeldingen worden pas geladen wanneer ze in beeld komen (boven de vouw), wat de initiële laadtijd van de pagina vermindert.

Conclusie

In dit artikel hebben we een afbeelding geüpload, een focuspunt ingesteld en deze toegevoegd aan een pagina-element. Hierdoor wordt automatisch gezorgd dat het onderwerp goed zichtbaar is, de laadtijd laag blijft en de visuele presentatie optimaal is – zonder dat u handmatig hoeft bij te snijden of te optimaliseren.

De bestandsgrootte van de afbeelding werd automatisch teruggebracht van ongeveer 2 MB naar 12 kB – een reductie van circa 97%. Afhankelijk van het apparaat kan deze besparing zelfs groter zijn. Voor mobiele gebruikers worden automatisch kleinere versies voorbereid, wat zorgt voor snellere websites, betere prestaties op tragere netwerken én een hogere ranking in zoekmachines zoals Google (SEO).

Protip: werken in batch

Wilt u veel afbeeldingen tegelijk beheren en uw werk versnellen? Zorg dan dat u bij het uploaden meerdere afbeeldingen tegelijk selecteert. Ga daarna naar:

Media > Focuspunt > "uw afbeeldingsmap" > klik op een afbeelding > stel een focuspunt in > ga snel verder naar de volgende afbeelding, enzovoorts.

Op deze manier kunt u in één keer al uw afbeeldingen instellen. Zodra u daarna een afbeelding toevoegt aan een campagne of website, wordt alles automatisch geoptimaliseerd zonder extra handelingen.

FAQ

• Welke afbeeldingsformaten zijn toegestaan?
  .jpeg en .png zijn optimaal. Deze kunnen automatisch geoptimaliseerd worden door het instellen van een focuspunt en het verkleinen van het bestand. Andere formaten zoals .svg en .gif kunnen ook worden geüpload en gebruikt, maar worden niet automatisch geoptimaliseerd.
• Welke afmetingen moet ik gebruiken voor een afbeelding?
  Houd het bestand onder de 10 MB en gebruik een zo hoog mogelijke resolutie. Booston past de afmetingen automatisch aan op basis van het gebruiksscenario. De afbeelding wordt geconverteerd naar webP en verkleind. Het instellen van een focuspunt is raadzaam om te garanderen dat het onderwerp altijd zichtbaar blijft.
• Kan ik de automatische afbeeldingsoptimalisatie uitschakelen?
  Ja. U kunt dit uitschakelen via instellingen > algemeen > afbeeldingsresolutie kwaliteit > stel in op “uit: geen afbeeldingsoptimalisatie”. Houd er rekening mee dat u dan handmatig voor elke use-case een geoptimaliseerde afbeelding moet aanleveren en zorgen voor een kleine bestandsgrootte voor goede prestaties.