Om je TYPO3-website te optimaliseren voor afbeeldingen en de laadtijden te verbeteren zonder merkbaar kwaliteitsverlies, kun je de volgende stappen nemen: 1. Gebruik van geoptimaliseerde afbeeldingsformaten: - Converteer je productfoto's, galerijen en banners naar efficiënte formaten zoals WebP of AVIF. Deze formaten bieden vergelijkbare kwaliteit bij kleinere bestandsgroottes. 2. Automatische beeldcompressie instellen: - Maak gebruik van TYPO3's ingebouwde afbeeldingsprocessing of externe tools (zoals ImageMagick of GraphicsMagick) om afbeeldingen te comprimeren zonder kwaliteitsverlies. 3. Lazy Loading toepassen: - Laad afbeeldingen pas wanneer ze in beeld komen door lazy loading toe te passen. Dit vermindert de initiële laadtijd. 4. Afbeeldingsresolutie optimaliseren: - Zorg dat afbeeldingen niet groter zijn dan nodig voor de weergave. Gebruik bijvoorbeeld verschillende afbeeldingsversies voor mobiel en desktop. 5. Use srcset en sizes attributen: - Implementeer responsive images zodat browsers de juiste afbeeldingsgrootte kiezen afhankelijk van het apparaat. 6. Caching en CDN: - Gebruik een Content Delivery Network (CDN) voor snellere levering van afbeeldingen en stel caching headers goed in. 7. TYPO3-specific instellingen: - Maak gebruik van TYPO3's Image Processing API om automatisch geoptimaliseerde afbeeldingen te genereren. - Controleer of de `Configuration/TypoScript/Constants.typoscript` en `setup.typoscript` correct zijn ingesteld voor beeldoptimalisatie. 8. Plugins en extensies: - Overweeg het gebruik van extensies zoals `autoImageResize` of `imager` die geautomatiseerd afbeeldingen kunnen optimaliseren en schalen. 9. Test en monitor: - Gebruik tools zoals Google PageSpeed Insights, GTmetrix of Lighthouse om de laadtijden te meten en verdere optimalisaties te identificeren. Door deze stappen te volgen, kun je de laadtijden aanzienlijk verbeteren zonder dat de beeldkwaliteit merkbaar verslechtert.

Zeker, hier is een praktisch optimalisatieplan voor TYPO3 10.4 om afbeeldingen sneller te laden zonder zichtbaar kwaliteitsverlies. ### 1. Gebruik het ingebouwde Image Optimization Framework (IOF) TYPO3 10.4 heeft een krachtig, ingebouwde optimalisatiemotor. Controleer eerst of deze correct is ingesteld. * **Ga naar:** `BE > Instellingen > Configure Opties > [BE][graphics_processing]` * **Stel in:** Zorg dat `processor` is ingesteld op `graphicsmagick` of `imagemagick`. GraphicsMagick is vaak sneller. * **Standaardformaten:** TYPO3 optimaliseert automatisch JPEG, PNG en GIF. Zorg ervoor dat de paden naar deze tools correct zijn geconfigureerd in de Install Tool. ### 2. Schakel over naar Moderne, Lichtgewicht Bestandsformaten (belangrijkste winst) De grootste snelheidswinst haal je door het juiste formaat te gebruiken. Voor foto's (productfoto's, banners) is **WebP** het nieuwe goud. * **Wat is WebP?** Een formaat van Google dat afbeeldingen 25-35% kleiner maakt dan JPEG bij gelijkwaardige kwaliteit. Het wordt ondersteund door alle moderne browsers (Chrome, Firefox, Edge, Safari). * **Hoe activeer je het in TYPO3 10.4?** TYPO3 10.4 kan WebP automatisch genereren. Voeg dit toe aan je `config.yaml` of `AdditionalConfiguration.php`: ```php // in config/system/sites/your-site-name/config.yaml # of in AdditionalConfiguration.php $GLOBALS['TYPO3_CONF_VARS']['GFX']['processor_enabled'] = true; $GLOBALS['TYPO3_CONF_VARS']['GFX']['processor'] = 'GraphicsMagick'; $GLOBALS['TYPO3_CONF_VARS']['GFX']['file_extensions'] = 'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,webp'; $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] = 'gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,webp'; ``` Gebruik daarna in je Fluid Templates of TypoScript de `.webp` variant: ```typoscript lib.myImage = IMAGE lib.myImage { file = fileadmin/user_upload/product.jpg file.width = 800 # Genereer een WebP-versie naast de JPEG additionalParams = -quality 85 -define webp:lossless=false # Gebruik het <picture> element voor fallback layoutKey = srcset sourceCollection { 10 { width = 800 srcset = 800w mediaQuery = (min-width: 1024px) dataKey = desktop } 20 { width = 400 srcset = 400w mediaQuery = (max-width: 1023px) dataKey = mobile } } } ``` **Belangrijk:** Bied altijd een JPEG/PNG fallback aan voor oudere browsers via het `<picture>`-element. ### 3. Implementeer Responsieve Afbeeldingen (srcset) Laad nooit een grote afbeelding voor een klein scherm. Gebruik `srcset` zodat de browser de juiste grootte kiest. * **In TypoScript:** Gebruik het `sourceCollection` voorbeeld hierboven. * **In Fluid (met ViewHelpers):** De `<f:image>` ViewHelper ondersteunt `srcset` uit de doos. ```html <f:image src="{file}" width="800" alt="Productfoto" srcset="400-400w, 800-800w, 1200-1200w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" /> ``` TYPO3 genereert automatisch afbeeldingen op 400px, 800px en 1200px breed. De browser kiest de meest efficiënte. ### 4. Optimaliseer Compressie-instellingen Kwaliteit en bestandsgrootte zijn een balans. Voor productfoto's is 80-85% JPEG-kwaliteit vaak perfect. * **Stel kwaliteit in via TypoScript:** ```typoscript config.images.quality = 85 ``` ### 5. Gebruik Lazy Loading voor Galerijen Laad afbeeldingen die "beneden de vouw" staan pas als de gebruiker er naar toe scrollt. * **Native Browser Ondersteuning:** Gebruik het `loading="lazy"` attribuut. De `<f:image>` ViewHelper in recente TYPO3-versies ondersteunt dit. ```html <f:image src="{file}" width="400" loading="lazy" alt="..." /> ``` ### 6. Caching Headers Instellen (Serverconfiguratie) Zorg ervoor dat afbeeldingen lang in de browser-cache van de bezoeker blijven. Dit is een serverinstelling (bijv. in je `.htaccess` file voor Apache): ```apache <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/webp "access plus 1 month" </IfModule> ``` ### Stappenplan voor Implementatie: 1. **Back-up:** Maak altijd een back-up van je website en database. 2. **Controleer IOF:** Verifieer in de Install Tool dat GraphicsMagick/ImageMagick werkt. 3. **Activeer WebP:** Pas de configuratie aan en test of `.webp` afbeeldingen worden gegenereerd. 4. **Pas Templates aan:** Werk je Fluid templates aan om `srcset` en `loading="lazy"` te gebruiken, beginnend bij galerijen. 5. **Optimaliseer Banners:** Pas de kwaliteit en breedte van banners aan zodat ze niet groter zijn dan nodig. 6. **Test Uitgebreid:** Gebruik Google PageSpeed Insights of GTmetrix om de voor- en nadata te meten. Controleer of de afbeeldingen er op verschillende apparaten nog steeds goed uitzien. Door deze stappen te volgen, zal de laadsnelheid van je TYPO3 website aanzienlijk verbeteren, terwijl de visuele kwaliteit van je productfoto's, galerijen en banners uitstekend blijft.