Schoonebeek - Den Haag info@brendesign.nl

Tips: foto’s gebruiken op je website

29 oktober 2017 Brendesign 0 Comment

Tegenwoordig is een website niks meer zonder foto’s. Beeld helpt dan ook mee om informatie over te brengen en geeft daarnaast een mooie invulling om informatie visueel aantrekkelijker te maken. In dit blog een aantal tips hoe je afbeeldingen optimaal kunt inzetten op je website.

Technische kant

Natuurlijk is er ook een ‘technische kant’ van het inzetten van foto’s op je website. Er zijn twee redenen om je afbeeldingen te optimaliseren; zodat ze goed gevonden worden in zoekmachines en zodat ze zo goed mogelijk weergeven worden op je website.

Om zoveel mogelijk bezoekers te trekken naar je website is het voordelig dat je foto’s goed gevonden worden in zoekmachines. Ook de weergave op je website is erg belangrijk. Je wilt namelijk voorkomen dat de beelden het inladen van de website vertragen, maar je wilt de foto’s tegelijkertijd ook zo goed mogelijk tonen.

Juiste afmetingen

Een foto moet de juiste afbeeldingen hebben voor het vertonen op het internet. Je zult niet de eerste zijn die een foto upload naar een website zonder aanpassingen. De meeste camera’s (zelfs je telefoon) maken een foto met veel te hoge resoluties voor op het internet.

Dat is eigenlijk alleen maar een goed teken, want zo kun je achteraf de afbeelding bijsnijden en aanpassen. Om eventuele ‘foutjes’ in een foto te verbergen. Zo valt bijvoorbeeld de ruis in je foto minder snel op als je de foto verkleind. Ruis zie je vaak in foto’s die ’s avonds zijn gemaakt of onder slecht licht genomen zijn.

Voordat je de foto online plaats is het soms beter om  de afbeelding te verkleinen. Een foto uit een digitale camera kan zo meer dan 2.000 pixels breed zijn.  Op een website wordt vaak een kleiner formaat gebruikt, meerstal foto’s die kleiner zijn dan 1.000 pixels. En soms zelfs nog wel onder de 500 pixels.

Dus zoek voordat je een afbeelding online plaatst uit welk formaat het is en dan het gewenste formaat voor op jouw website. Je kunt het natuurlijk ook altijd aan je webdesigner vragen wat het beste is voor jouw website. Gebruik niet teveel verschillende formaten, dit zorgt ervoor dat de eenheid verdwijnt uit jouw website. Beperk het formaat tot twee a vier verschillende maten.

Een foto die vier keer zo klein is gemaakt is vaak ook vier keer zo klein in zijn bestandsgrootte. De afbeelding kan daarom ook vier keer zo snel ingeladen worden, dit scheelt nogal in de snelheid van je website. Daarnaast voorkom je met het verkleinen van je foto dat de browser van de bezoeker de foto automatisch gaat verkleinen bij het bezoeken. Je hebt dan geen invloed meer op de kwaliteit.

Opslaan voor web

In de meeste bewerkingsprogramma’s gaat het verkleinen heel makkelijk. Nadat je hem verkleind hebt bijvoorbeeld in photoshop kies je de speciale optie ‘opslaan voor web’.  Hiermee helpt photoshop je het ideale formaat in bestandsgrootte en bestandstype te kiezen. Een handige tool om te gebruiken, als je photoshop hebt natuurlijk.

Drie formaten zijn geschikt voor het web: GIF,Jpeg en PNG. Voor foto’s is Jpeg de beste optie. Een Jpeg afbeelding is goed in het zo klein mogelijk opslaan van foto’s terwijl de kwaliteit nog goed blijft.

Bestandsnaam

Tijdens het opslaan moet je natuurlijk de afbeelding ook een naam geven. Gebruik altijd een beschrijvende bestandsnaam. Dit is niet alleen handig voor jezelf om de afbeelding op te zoeken, maar ook voor de zoekmachines om jouw foto te herkennen.

Gebruik geen vreemde tekens in je bestandsnaam, dit kan problemen geven in het weergeven van je foto. Dus geen leestekens of andere vaak minder gebruikte karakters. Dus eigenlijk nooit tekens die je met de Shift of met de Alt toets maakt.

Liever ook geen spaties en hoofdletters in je bestandsnamen. Als je meerdere woorden wilt neerzetten in je bestandsnaam kun je dat bijvoorbeeld met een streepje doen bijvoorbeeld: logo_website.jpg.

Title- en alt-tags

Wanneer je een foto plaatst op je website is het belangrijk om ook direct de ‘Title’ en ‘Alt-tags’ mee te geven. De meeste CMS systemen geven je vaak direct die optie wanneer je een foto upload. Je zou bij beide opties dezelfde woorden in kunnen vullen, maar de betekenis van beide opties is verschillend.

De Alt-tag is de tekst die getoond wordt op het moment dat de afbeelding niet ingeladen kan worden, zodat men toch een idee heeft wat er ongeveer te zien is, als zijnde alternatief voor de afbeelding.

De Title-tag wordt getoond op het moment dat je met je muis over de afbeelding gaat. Deze tag is bedoeld om informatie mee te geven over de afbeelding die je ziet.

Deze tags helpen de zoekmachines om te bepalen waar de foto over gaat. Ook de bezoekers van je pagina hebben er wat aan. Zo krijgen bijvoorbeeld blinde mensen, die de voorlees functie gebruiken de alt-tag te horen als ze een website bezoeken en krijgen ze dus het idee wat voor afbeelding er bij staat.

Hulp nodig?

Heb je hulp nodig met het verkleinen van je afbeelding op je website. Neem dan gerust contact met mij op: info@brendesign.nl

leave a comment

error: Content is protected !!
%d bloggers liken dit: