Beelden... wat zeker wel en niet doen?
Een beeld zegt meer dan duizend woorden. Het volume aan beeldmateriaal dat ondertussen werd toegevoegd op onze portal bevestigt dat velen onder jullie terecht dit principe volgen.
Graag geven we jullie via deze update de volgende informatie mee:
Voor we dieper ingaan op de techniciteiten herhalen we graag even de basisprincipes. Het opladen van beelden kan zowel tijdens het aanmaken van een artikel of evenement, maar je kan ze ook eerst toevoegen aan de bibliotheek. In het eerste geval komt het beeld sowieso ook in de bibliotheek. Daar vind je trouwens enkel beelden van jouw organisatie samen met deze - door de redactie - beschikbaar gemaakt voor iedereen.
Welke bestandstypes hanteren
Beelden zijn er in een hele reeks van bestandstypes, aangeven door de drie of vier letters achter de punt na de bestandsnaam. Deze letters zijn gekend als de bestandsextensie. De volgende extensies ga je het meest tegenkomen JPG, GIF, PNG, BMP, TIFF en PSD.
Beginnen we met JPG, GIF en PNG dan zitten we direct goed wat betreft het gebruik op onze website. In de drie gevallen gaat het over formaten die compressie toepassen op bitmaps. Een bitmap is een grafisch bestand opgevat als een kaart van een bepaalde grootte met voor ieder puntje of pixel de exacte kleureninformatie. Door de verschillen in compressie is GIF meer geschikt voor illustraties en JPG voor foto’s. PNG is universeel inzetbaar en biedt, net zoals GIF, ook de mogelijkheid om met transparantie te werken.
BMP is ook een bitmap formaat, ontwikkeld door Microsoft. Door bijkomende eigenschappen is het niet universeel ondersteund en te vermijden voor gebruik op websites. Met een eenvoudig grafisch programma is het mogelijk dit formaat om te zetten naar JPG, GIF of PNG.
TIFF en PSD zijn formaten voor professioneel gebruik in de grafische sector. Je kan ze zien als respectievelijk bron- en werkbestanden van grafici. Deze formaten zijn dan ook niet direct bruikbaar op het portaal. Kom je ermee in aanraking dan vraag je best voor een export naar JPG, GIF of PNG (afhankelijk van het type materiaal). Voor de gevorderden, beschik je over Adobe Photoshop dan kun je deze formaten openen en met behulp van de export voor het web functionaliteit zelf een kwalitatief bitmap formaat aanmaken.
De optimale afmetingen van een beeld
Voor het bepalen van de optimale afmetingen dien je rekening te houden met de toepassingen waarvoor je het beeld gebruikt. Denk hierbij in de mate van het mogelijke ook al even vooruit aan toekomstige toepassingen. Uiteraard ben je beperkt door wat je aan bronmateriaal ter beschikking hebt, alsook je mogelijkheden ze via software te bewerken. Zo kom je de afmetingen van je beeld te weten:
- Windows: rechtsklik op het beeld (in File Explorer) en kies voor Properties / Eigenschappen, in het kadertje dat zich opent ga je naar de tab Details voor alle details.
- Apple macOS: klik op het beeld (in Finder) terwijl je de control-toets ingedrukt houdt en kies vervolgens voor Get Info / Toon info, in het kadertje dat zich opent vind je alle details.
Laat ons starten met de meest voorkomende situatie… een beeld plaatsen als deel van de inhoud van een artikel of evenement. Dit kan maximum 874 pixels breed zijn. Gebruik je hiervoor een breder beeld dan zal het systeem jouw originele beeld bewaren en automatisch op basis hiervan een bijkomende versie met een breedte van 874 pixels genereren. Is je beeld smaller dan zal indien nodig de originele versie opgeblazen weergegeven worden zodat het de volledige beschikbare breedte inneemt. Bij voorkeur kies je daarom voor minimum 874 pixels breedte.
Kies je in bovenstaande situatie voor de optie Zoom op beeld voorzien dan geldt hetzelfde principe maar met een afmeting van 1600 pixels breedte. Let wel, het uiteindelijke beeld zal steeds opgeblazen of gecondenseerd worrden zodat het overeenkomt met de breedte van het scherm van de gebruiker. Om bij het opblazen kwaliteitsverlies te vermijden raden we aan bij deze optie enkel beelden met een breedte van minimum 1600 pixels te gebruiken.
Opgelet: bovenstaande instructies zijn enkel relevant bij het werken met losstaande beelden, zijnde deze toegevoegd als een aparte blok onder de inhoud van een artikel of evenement. Voeg je beelden toe in de WYSIWYG-editor (bij de tekst) dan sta je zelf in voor de juiste afmetingen. Dit geeft je extra controle over de weergave, is echter enkel aan te raden voor gevorderde gebruikers.
Beelden die je oplaadt en die meer dan 2000 pixels in de hoogte of breedte hebben, worden automatisch beperkt tot deze afmetingen. Concreet, het originele bewaarde beeld gaat nooit meer dan 2000 pixels qua hoogte en/of breedte hebben. Hiermee vermijden we dat te grote beelden op onze systemen onnodige opslagcapaciteit innemen.
Er zijn nog een hele reeks andere situaties waarin je een beeld gebruikt. In al deze gevallen werkt het systeem met uitsneden van toegevoegde beelden. Deze kiest het automatisch, het is echter aangewezen ze aan te passen. Dit is oa. het geval bij het kiezen van een header beeld en tegelbeeld als je een artikel of evenement aanmaakt. Hierbij een overzicht van alle mogelijke uitsneden en waarvoor ze gebruikt worden:
- Headerbeeld artikel, evenement: groot headerbeeld van een artikel of evenement. Deze uitsnede wordt ook gebruikt bij het vastpinnen van een Artikel of evenement voor header op overzichtspagina’s. Opgelet: zwaartepunt van de uitsnede bij voorkeur centraal links. Centraal omdat afhankelijk van de breedte van het browservenster een deel van het beeld boven- en onderaan kan wegvallen. Links omdat op als het artikel (of evenement) op overzichten als headerbeeld wordt gebruikt de introtekst rechts over het beeld verschijnt.
- Tegelbeeld (groot & klein) mozaïek: tegelbeeld in de mozaïek op de algemene en microsite startpagina’s.
- Tegelbeeld mini-mozaïek: tegelbeeld in de mini-mozaïek onder artikels.
- Beeld carrousel (shop): hoog/smal tegelbeeld gebruikt op de overzichtspagina van de shop (carrousel).
- Losstaand beeld artikel, evenement: beeld dat je bij een artikel of evenement in een aparte blok onder de inhoud toevoegt.
Conclusie: wil je je ervan verzekeren dat een toegevoegd beeld in de toekomst in alle situaties te gebruiken is, laadt het dan op met een minimum breedte van 1600 pixels. Is dit niet mogelijk, ga dan voor minstens 874 pixels.
Ten slotte nog even meegeven dat dezelfde uitsnedes van toepassing zijn overal een beeld gebruikt wordt, dus ook in andere artikels.
Het juiste kleurenmodel gebruiken
Alle beelden werken met een kleurenmodel dat informatie bevat over de gebruikte kleuren. Ieder model werkt met zijn eigen schaal om het spectrum van kleuren mathematisch voor te stellen. De meest courante zijn RGB, CMYK en indexed color.
RGB werkt met waarden van rood, groen en blauw. Zo zijn bijvoorbeeld 27 175 173 de RGB-waarden die het groen van Kerknet beschrijven. Dit model wordt gebruikt in alle toepassingen van schermen die werken op basis van het uitstralen van licht, concreet onze TVs en monitors. Bij het toevoegen van beelden op het portaal let je er dan ook best op dat ze het RGB kleurenmodel volgen. Beelden die komen van een andere website gaan geen probleem vormen, idem voor foto’s die je van je digitaal fototoestel (of smartphone) via een software op je computer importeert.
CMYK beschrijft de kleuren aan de hand van waarden van cyaan, magenta en geel. De K heeft betrekking op het drukprocedé waar een zwarte laag de lijnen en contrast van het beeld bevat. Zoals dit al aangeeft is dit kleurenmodel de standaard voor materiaal dat uiteindelijke gedrukt wordt. In de context van onze website zijn beelden in dit kleurenmodel in principe niet bruikbaar. Gebruik je ze wel dan zal het systeem ze trachten om te zetten naar RGB, wat niet altijd goede resultaten oplevert. Verder zijn dit soort beelden zwaar en nemen ze onnodig veel schijfruimte in beslag. Beelden die je ontvangt van een professionele fotograaf, via de drukker of als deel van een bestand voor de drukker controleer je best even. Vraag naar materiaal in RGB om te gebruiken op een website of kijk het zelf na (idem zoals eerder vermeld bij het opzoeken van afmetingen).
Indexed color is een techniek om kleureninformatie te comprimeren. Het doel is kleinere bestanden die minder schijfruimte innemen en sneller downloaden. In plaats van het volledige spectrum te gebruiken wordt er een index aangelegd van een selectie van kleuren en bijgehouden waar in het beeld ze voorkomen. Dit werkt enkel voor beelden die een beperkte variatie aan kleuren bevatten, bijvoorbeeld illustraties. Het meest eenvoudige voorbeeld is een zwart wit tekening, ieder puntje is ofwel wit of zwart. De index bevat dan ook enkel deze twee waarden. Voor de gevorderden, gebruik je illustraties dan kan het de moeite lonen om via een grafische software het bestand om te zetten naar indexed color.