Afbeeldingen in je website

In je website, heb je te maken met afbeeldingen. Tijdens de meetup gaan we in gesprek met elkaar om na te gaan waar de afbeeldingen allemaal te vinden zijn, wat de uitdagingen zijn en hoe je ermee om kan gaan. Omdat we allemaal met afbeeldingen werken, hebben we ook allemaal tools en oplossingen gevonden voor deze uitdagingen. Het leek ons dan ook zinvol om alle kennis bij elkaar te brengen in deze interactieve meetup.

Waar?

Voor we met afbeeldingen aan de slag kunnen, moeten we weten waar deze zich bevinden. Er zijn de logische plaatsen. Denk daarbij aan de Mediabibliotheek, die de afbeeldingen opslaat in de uploads-map. Daarnaast heb je plugins waar je afbeeldingen aan toevoegt, zoals gallerij-plugins. Een ander deel van de website waar afbeeldingen in gebruikt wordt, is het thema. Als je zelf een thema maakt, heb je deze afbeeldingen volledig zelf onder controle, dus dit zou geen probleem mogen zijn. De laatste plaats waar we al eens afbeeldingen tegenkomen, is het lettertype en in embeds (Flicker, Twitter).

Uitdagingen

Per onderdeel waar we afbeeldingen tegenkomen, gaan we op zoek naar de uitdagingen. Dit is eerder een vlotte opsomming.

Mediabibliotheek

Wat met nieuwe extensies? Denk dan aan SVG of WebP
Beperking in webruimte
Alle afbeeldingen zitten in één overzicht, wat een chaotisch gevoel geeft
Kwaliteit van de afbeeldingen
Wat met ongebruikte afbeeldingen?

Thema

Wat gebeurt er als je van thema wisselt?
Waarmee moet je rekening houden als je afbeeldingen in het thema vervangt?

Oplossingen

Uiteraard is het de bedoeling dat we, naast het identificeren van de problemen, ook met oplossingen komen. Voor zowel de mediabibliotheek als het thema stellen we hieronder enkele oplossingen voor.

Mediabibliotheek

Afbeeldingen in 1 overzicht

Als je een website beheert, verzamel je al snel veel afbeeldingen en deze worden allemaal in 1 overzicht weergegeven. Het geheel wordt daardoor onoverzichtelijk. Dit probleem kan je oplossen door gebruik te maken van plugins. Ze maken allemaal gebruik van mappen of categorieën om de media in te delen. Enkele voorbeelden:

WP Media Folders ( https://wordpress.org/plugins/wp-media-folders/ )
Media Library Asisstant ( https://wordpress.org/plugins/media-library-assistant/ )
Enhanced Media Library ( https://wordpress.org/plugins/enhanced-media-library/ )

Ongebruikte afbeeldingen

Houd je mediabibliotheek opgeruimd, waar mogelijk. Heb je ongebruikte afbeeldingen? Verwijder ze! Elke afbeeldingen heeft ook minstens 1 verwijzing in de database en neemt webruimte in.

Optimaliseer afbeeldingen

Vaak zijn afbeeldingen te groot of bevatten overtollige informatie. We hebben het dan niet enkel over het resizen van de afbeeldingen, maar ook meta-gegevens verwijderen.

Bij het kiezen van de juiste tool om je hiermee te helpen, kan je best rekening houden met volgende aandachtspunten:

Waarvoor zijn de afbeeldingen bedoeld?
Welke formaten zijn er nodig?
- Enkele handvaten bij het kiezen van formaten:
  - 1920 x 1080 px > full HD
  - 2300 px breed > Vaak voorkomende maat om websites op te ontwerpen
De meeste afbeeldingen zouden kleiner moeten kunnen zijn dan 100 KB
Zijn de afbeeldingen na optimaliseren nog voldoende scherp?
Mik, na optimaliseren, op een 72 DPI als waarde. Bij het ontwerpen wordt vaak 300 DPI gebruikt, maar dat is enkel nodig voor drukwerk.

Er zijn veel verschillende oplossingen die je kunnen helpen bij het optimaliseren van afbeeldingen.

Plugins
- Imsanity
- Imagify (gekoppeld met externe dienst)
- Kraken.io (gekoppeld met externe dienst)
- Shortpixel (gekoppeld met externe dienst)
Lokaal op je computer
- Preview (OS X)
- irfanview (Windows)
- Photoshop
- Lightroom
- ImageOptim (OS X)
Online diensten
- Tinyjpg / Tinypng
- ImageOptim
- Kraken.io

De oplossingen, hieronder opgesomd, zijn genoemd tijdens de meetup. Uiteraard bestaan er veel meer oplossingen.

srcset

Een afbeelding in je webpagina wordt weergegeven met een “img”-tag. Deze kan echter maar 1 afbeelding weergeven. Met het attribuut srcset kan je voor verschillende schermformaten, de juiste afbeelding naar de browser sturen, zodat de bezoeker een betere surf-ervaring heeft.

Meer informatie over srcset: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Lazy loading

Een laatste optimalisatie voor het laden van je afbeelding die we aanhaalden, is door het laden van afbeeldingen uit te stellen met lazy loading. Er zijn enkele plugins die je daarbij kunnen helpen. ( https://wordpress.org/plugins/search/lazy+load/ )

Conclusie

Er zijn veel uitdagingen opgesomd, maar minstens zoveel oplossingen. Iedereen zal uitdagingen tegenkomen. Weet dat er meerdere oplossingen en benaderingen voor elke uitdaging bestaan. Ga op zoek of vraag in de community hoe anderen het aanpakken.

Veel succes!

Om af te sluiten

De volgende samenkomst zal zijn op 13 januari. We kozen opnieuw ‘t Borrelhuis als locatie
Praat verder op de WordPress Belgium Slack
Heb je nog een idee voor een talk of onderwerp, let us know!
Er komt nog eens een WordCamp Antwerp aan:
27 – 29 maart 2020!!
- Meer informatie: https://2020.antwerp.wordcamp.org/

Bedankt aan alle aanwezigen om er weer een geslaagde Meetup van te maken.

We kijken al uit naar de volgende editie op 13 januari 2020.