Afbeeldingen toevoegen aan je blog

25 januari 2025

Afbeeldingen maken je blog posts visueel aantrekkelijker, maar ze kunnen ook de laadtijd vertragen. Hier is hoe je afbeeldingen toevoegt zonder de prestaties te schaden.

Het probleem met afbeeldingen

Grote afbeeldingen kunnen je website traag maken. De oplossing is om verschillende formaten te maken: kleine thumbnails voor snelle laadtijd en grote versies voor detailweergave.

Website snelheid is cruciaal voor gebruikerservaring

Afbeeldingen verwerken met de terminal

Gebruik ImageMagick om verschillende formaten te maken:

Terminal

# Installeer ImageMagick (macOS)
brew install imagemagick

# Maak een thumbnail (400px breed)
convert origineel.jpg -resize 400x images/thumbs/thumbnail.jpg

# Maak een grote versie (max 1200px breed)
convert origineel.jpg -resize 1200x images/full/fullsize.jpg

# Optimaliseer voor web (compressie)
convert origineel.jpg -quality 85 -resize 400x images/thumbs/thumbnail.jpg

HTML structuur

Gebruik deze structuur voor afbeeldingen met modal functionaliteit:

HTML

<div class="image-container">
  <img src="images/thumbs/afbeelding.jpg" 
       alt="Beschrijving" 
       class="image-thumb" 
       onclick="openModal(this)" 
       data-full="images/full/afbeelding.jpg">
  <div class="image-caption">Caption tekst</div>
</div>

CSS voor modal weergave

Minimale styling voor een professionele modal:

CSS

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  cursor: pointer;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}

.image-thumb {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  transition: opacity 0.2s;
}

JavaScript functionaliteit

Eenvoudige modal functionaliteit:

JavaScript

function openModal(img) {
  const modal = document.getElementById('imageModal');
  const modalImg = document.getElementById('modalImage');
  modal.style.display = 'block';
  modalImg.src = img.getAttribute('data-full');
}

function closeModal() {
  document.getElementById('imageModal').style.display = 'none';
}

Best practices

• Gebruik WebP formaat voor betere compressie

• Houd thumbnails onder 50KB

• Voeg alt-tekst toe voor toegankelijkheid

• Gebruik lazy loading voor afbeeldingen onder de fold

Met deze aanpak kun je visueel aantrekkelijke blog posts maken zonder de prestaties te schaden!