Het lijkt erop dat we niets leren van het verleden .. De gemiddelde grootte van web pagina’s is alleen maar groter en groter geworden. Dit mag geen nieuws zijn voor velen van ons, maar dat betekent niet dat de nieuwste bevindingen minder alarmerend zijn.
Volgens HTTP Archive, is de gemiddelde top 1000 webpagina 1808 KB groot (d.d. 15 juni 2014), vergeleken met 1067 KB in juni 2012. Dit komt neer op een groeipercentage van bijna 170% in slechts 2 jaar!
Tegenwoordig worden er dan ook veel meer eisen aan afbeeldingen op het web gesteld. Afbeeldingen moeten nu ook ingelezen kunnen worden op HD apparaten (High Density of Retina displays) waarbij ze dus groot genoeg in afmeting moeten zijn om scherp te worden weergegeven, maar ze moeten ook klein genoeg qua bestandsgrootte zijn zodat ze niet jouw mobiel internet bundel in een klap wegvagen.
Afbeelding compressie is daarom een no-brainer; niet-gecomprimeerde en niet-geoptimaliseerde afbeeldingen zorgen namelijk voor een performance probleem van je website vanwege een aantal redenen:
- Veel afbeeldingen zijn in het verkeerde formaat. Het zou goed zijn als iedereen die verantwoordelijk is voor het maken van afbeeldingen voor het web wist wanneer een JPEG, PNG en wanneer een GIF te gebruiken.
- Veel afbeeldingen zijn in de verkeerde afmetingen. Een afbeelding die groter is dan 3000px en 1+ Mb groot is natuurlijk compleet overdreven. Verklein de afbeelding naar het formaat wat wordt gebruikt.
- Veel afbeeldingen hebben geen compressie. Een correct gekozen afbeeldingsformaat en juiste afmetingen zijn een goede eerste stap. Compressie is de volgende stap. Er zijn een heleboel solide afbeelding compressie tools gratis op het internet aanwezig, maar helaas niet iedereen gebruikt ze.
- Veel afbeeldingen worden gehost op meerdere locaties, bijv. op de server, in de cloud, of via een andere (3rd party) service. Dit verhoogt het risico van extra vertraging en mogelijke storingen.
In dit artikel wil ik vooral kijken naar tools voor afbeelding compressie die je online (web app) kan gebruiken. Er bestaan 2 soorten compressie:
- de ‘lossy’ compressie – ‘Lossy’ afbeelding compressie resulteert in verlies van data en kwaliteit van de originele versie. Omdat bij lossy afbeelding compressie gegevens verwijderd worden uit het oorspronkelijke bestand, zal het gecomprimeerde bestand vaak (veel) minder schijfruimte in beslag nemen dan het origineel.
- de ‘lossless’ compressie – Lossless afbeelding compressie is een type compressie waarbij de oorspronkelijke gegevens volledig worden gereconstrueerd uit de gecomprimeerde gegevens (zoals bijv. een ‘ingepakt’ ZIP-bestand), dus zonder kwaliteitsverschil.
Hieronder staan een aantal handige app’s voor afbeelding compressie die ik zelf heb getest:
Algemene App’s voor afbeelding compressie
Kraken.io – lossy (40-70% reductie)
Kraken is een robuuste, ultrasnelle afbeelding compressie tool met ‘best-in-class’ algoritmen. Hierdoor bespaar je bandbreedte en opslagruimte en zullen de laadtijden van jouw website drastisch verbeteren. Kraken is ook beschikbaar als een gratis WordPress plugin.
Smush.it – lossy (40-60% reductie)
De meeste afbeelding compressie services zijn sterk beperkt in het aantal (batch) te uploaden afbeeldingen die moeten worden gecompresseerd, maar Yahoo’s Smush.It is een zeldzame uitzondering. Je bent weliswaar beperkt tot het uploaden van bestanden van maximaal 1 MB groot, maar je kunt net zoveel foto’s uploaden als je wilt. Smush.it is ook beschikbaar als een gratis WordPress plugin.
Compressor.io – lossy/lossless
Compressor.io ondersteunt de meeste bestandsformaten zoals: JPEG, PNG, GIF en SVG(!). Compressor.io heeft niet veel opties, je kunt stiekem alleen maar kiezen voor het type compressie (lossy of lossless). In termen van kwaliteit, zegt mijn gevoel dat het drastisch verschilt per (type) afbeelding, over het algemeen waren de resultaten wel een beetje teleurstellend!
Compressnow – lossy (% zelf instellen)
Compressnow werkt met GIF, JPG, JPEG en PNG. Echter, achtergrond transparantie bij de PNG-afbeelding lukt niet, .. sterker nog, het beeld wordt omgezet van PNG naar JPG! Dat was nogal een afknapper en dan druk ik me nog zeer diplomatisch uit!
Image Otimizer – lossy (% zelf instellen)
Met Image Otimizer — ook een gratis online service — kun je comprimeren en je beeldbestanden optimaliseren via een makkelijke interface. Ik heb deze compressie tool gebruikt met PNG en JPEG, ik weet niet of deze ook nog andere bestandsformaten ondersteund omdat dit nergens staat vermeld?
Voor afbeelding compressie niveaus kun je kiezen uit: de beste kwaliteit, hoge kwaliteit, normale, kleine bestandsgrootte, zeer kleine bestandsgrootte en minimale bestandsgrootte. Je kunt de afbeeldingen ook bijsnijden (of schalen) in deze tool.
Image Optimizer wordt ook geleverd met een downloadbare versie. Als je wilt, kun je deze lokaal gebruiken in plaats van de online versie.
JPEG App’s voor afbeelding compressie
JPEGMini – lossy (30-50% reductie)
JPEGMini stelt de kwaliteit van je JPEG naar de laagste stand het menselijk oog kan verdragen. Verminder de bestandsgrootte van je foto’s met maximaal 5x, terwijl ze hun oorspronkelijke kwaliteit en JPEG-formaat behouden! Je kunt ook een account kopen voor JPEGMini, maar je kunt ook eerst deze tool testen, dit is uiteraard gratis.
Ook gratis is de te downloaden desktop tool, hiermee kun je lokaal je JPEG afbeeldingen optimalisatie in bulk aanpakken wat een stuk sneller gaat dan de online versie.
JPEG-Optimizer – lossy (0-99% reductie)
Zoals de naam al impliceert, JPEG-Optimizer werkt alleen met JPG-bestanden. De interface is eenvoudig en duidelijk – je kunt het bestand uploaden en vervolgens het percentage (een waarde tussen 0 tot 99) kiezen voor de compressie. Naast afbeelding compressie biedt de service ook ‘Image Resize’, zodat je met 1 tool alle benodigde aanpassing voor afbeeldingen op het web kunt maken.
Update: TinyJPG – lossy (>70% reductie)
TinyJPG verkleint de bestandsgrootte van JPEG-afbeeldingen. Elk geüploade beeld wordt geanalyseerd om de best mogelijke JPEG compressie toe te passen. Het resultaat is een goede kwaliteit van de afbeelding zonder verspilling van opslag of bandbreedte! Deze nieuwe compressie tool voor JPEG-afbeeldingen is eind november 2014 geïntroduceerd.
PNG App’s voor afbeelding optimalisatie
TinyPNG – lossy (50-70% reductie)
TinyPNG maakt gebruik van slimme lossy compressie technieken om de bestandsgrootte van jouw PNG-bestanden te verminderen. Door het selectief verminderen van het aantal kleuren in de afbeelding zijn er minder bytes nodig om de gegevens op te slaan. Het effect is bijna onzichtbaar, maar het maakt een zeer groot verschil in bestandsgrootte!
Trent Walton
Conclusie
Respecteer de tijd van je gebruikers, probeer je pagina zo klein mogelijk te houden qua bestandsgrootte. Maar afbeelding compressie zorgt er met een beetje geluk voor dat we het internet steeds een beetje sneller kunnen maken?
Deel dit Bericht:
Nog Geen Reacties
Sorry, maar het is niet (meer) mogelijk te reageren op dit artikel.