Mobiele Navigatie

Het lijkt erop dat we niets leren van het verleden .. Dat de gemiddelde grootte van web pagina’s alleen maar groter en groter wordt 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!

Het leeuwendeel van deze groei wordt veroorzaakt door het gebruik van afbeeldingen op het web, op dit moment meer dan 60% van de grootte van de gemiddelde top 1000 webpagina’s (1144 kB d.d 15 juni 2014)!

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 uw mobiel internet bundel in een klap webvagen.

Afbeeldingen zorgen voor een performance probleem van uw website vanwege een aantal redenen, waaronder:

  • Veel afbeeldingen zijn in het verkeerde formaat. Het zou geweldig 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, .. maar dit is helaas niet het geval.
  • Veel afbeeldingen zijn in de verkeerde afmetingen. Een afbeelding die groter is dan 3000px en 1+ Mb groot is natuurlijk compleet overdreven, .. van de zotte zelfs!
  • Veel afbeeldingen zijn niet gecompresseerd/geoptimaliseerd. 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 optimalisatie en/of compressie die online (web app) kunnen worden gebruikt. Er bestaan 2 soorten compressie:

  • de ‘lossy’ compressie – ‘Lossy’ bestandscompressie resulteert in verlies van data en kwaliteit van de originele versie. Omdat bij lossy compressie gegevens verwijderd worden uit het oorspronkelijke bestand, zal het gecompresserde bestand vaak (veel) minder schijfruimte in beslag nemen dan het origineel.
  • de ‘lossless’ compressie – Lossless bestandscompressie is een type compressie waarbij de oorspronkelijke gegevens volledig worden gereconstrueerd uit de gecomprimeerde gegevens (zoals bijv. een ‘ingepakt’ ZIP-bestand), dus zonder kwaliteitsverschil.

Geef de afbeelding eerst de juiste afmetingen en ga daarna pas de afbeeldingen compresseren, door eerst te compresseren en daarna weer te bewerken wordt de eerdere compressie teniet gedaan!

Web App’s voor Algemene Bestandsformaten

Kraken.io – lossy (40-70% reductie)

Kraken is een robuuste, ultrasnelle afbeelding optimalisatie en compressie tool met ‘best-in-class’ algoritmen. Hierdoor bespaart u bandbreedte en opslagruimte en zullen de laadtijden uw website drastisch verbeteren. Kraken is ook beschikbaar als een gratis WordPress plugin.

Smush.it – lossy (40-60% reductie)

De meeste afbeeldingscompressie services zijn sterk beperkt in het aantal (batch) te uploaden afbeeldingen die moeten worden gecompresseerd, maar Yahoo’s Smush.It is een zeldzame uitzondering. U bent weliswaar beperkt tot het uploaden van bestanden van maximaal 1 MB groot, maar u kunt net zoveel foto’s uploaden als u 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, u 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 — kunt u comprimeren en uw 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 compressie niveaus kunt u kiezen uit: de beste kwaliteit, hoge kwaliteit, normale, kleine bestandsgrootte, zeer kleine bestandsgrootte en minimale bestandsgrootte. U kunt de afbeeldingen ook bijsnijden (of schalen) in deze tool.

Image Optimizer wordt ook geleverd met een downloadbare versie. Als u wilt, kunt u deze lokaal gebruiken in plaats van de online versie.

Web App’s speciaal voor JPEG

JPEGMini – lossy (30-50% reductie)

JPEGMini stelt de kwaliteit van uw JPEG naar de laagste stand het menselijk oog kan verdragen. Verminder de bestandsgrootte van uw foto’s met maximaal 5x, terwijl ze hun oorspronkelijke kwaliteit en JPEG-formaat behouden! U kunt ook een account kopen voor JPEGMini, maar u kunt ook eerst deze tool testen, dit is uiteraard gratis.

Ook gratis is de te downloaden desktop tool, hiermee kunt u lokaal uw JPEG afbeeldingen optimaliseren 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 – u kunt het bestand uploaden en vervolgens het percentage (een waarde tussen 0 tot 99) kiezen voor de compressie. Naast compressie biedt de service ook ‘Image Resize’, zodat u 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.

Web App’s speciaal voor PNG

TinyPNG – lossy (50-70% reductie)

TinyPNG maakt gebruik van slimme lossy compressie technieken om de bestandsgrootte van uw 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!

PUNYpng – lossless (20-40% reductie)

PUNYpng is een web service die naast een lossless compressie voor GIF en JPG afbeeldingen, vooral voor PNG’s wordt gebruikt. Het is een beetje beperkend; u kunt alleen 15 afbeeldingen uploaden per keer, maar de afbeeldingen mogen niet groter dan 150kB groot zijn? Hmmm .., 150kB?

Conclusie

“Friends don’t let friends load 300kB PNG images on their websites no matter how cool the transparent photo of a happy customer waving over a gradient background looks.”
Trent Walton

Respecteer de tijd van uw gebruikers, probeer uw pagina zo klein mogelijk te houden qua bestandsgrootte en met een beetje geluk zullen we het internet steeds een beetje sneller kunnen maken?

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan - AKA Gonzo the Great - Rajtoral is een ervaren grafische en web designer, gespecialiseerd in (front-end) Responsive Web Design, WordPress Ontwikkeling, Logo en Huisstijl ontwerp.

Nog Geen Reacties

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

Groundsailer Media

Colofon