Hoe te comprimeren beelden: de gids van een Web Designer

De gemiddelde snelheid van een moderne internetverbinding klinkt erg futuristisch voor webmeesters uit het verleden. In de vroege dagen van het web was de hoeveelheid overgedragen gegevens cruciaal, zowel in termen van tijd als kosten, daarom probeerde alle betrokken bij het online iets online te beelden.

Ironisch genoeg is het probleem tegenwoordig niet weggegaan. Elke keer dat u een script-zware website bezoekt (zoals mainstream World News), trekt het vaak een dozijn megabytes van JavaScript-code, afbeeldingen, video's en Whatnot. Het kan nog steeds pijnlijk traag zijn en zelfs een mooie cent kosten voor sommige mobiele data-gebruikers (dit zou geen probleem moeten zijn als u een fatsoenlijk gebruikt website bouwer , en lekker web hosting moet het voor u in de gaten houden).

In deze tutorial zullen we ontdekken welke manieren om bitmapbestanden voor het web kunnen slanken. Zolang het de goede oude PNG- en JPEG-indelingen gebruikt (zie meer over Afbeeldingsbestandsindelingen Hier, en zorg ervoor dat u uw bestanden rechts opslaat cloud opslag Ook), we zullen zien hoe we ze kleiner kunnen maken zonder de kwaliteit te sluiten, wat heet te maken Open source projecten ​Uiteindelijk hebben we in hoofdzaak kleinere bestanden die er nog steeds goed uitzien, maar minder tijd en gegevens vereisen om te worden weergegeven in webbrowsers van gebruikers.

Lees verder om in de details te duiken. Eerst een snelle opmerking over software. Alle hier genoemde gereedschappen zijn open source - Spring naar de bodem voor een gids voor Hoe de software te krijgen jij hebt nodig.

• De beste WordPress-portfolio-thema's

Kies het juiste formaat

Het klinkt misschien triviaal om nog steeds te zijn over de bestandsgrootte, maar er zijn voldoende voorbeelden waarin een afbeelding ofwel te massief is zonder enig doel of er verschrikkelijk uitziet ondanks dat het klein is. Als u dergelijke fouten wilt voorkomen, kiest u een formaat om een ​​afbeelding op te slaan of te converteren. Het gebruik van JPEG impliceert het breken van een afbeelding in tegels van 8x8 pixels, waarbij elke tegel wordt gecomprimeerd. Het compressiesniveau is afhankelijk van de gebruiker (het is die schuifregelaar wanneer u een afbeelding opslaat), maar meestal maakt JPEG 10: 1 Bestandsgrootte winst mogelijk met een acceptabel verlies in kwaliteit.

Het perceptuele verschil tussen JPEG-bestanden gemaakt met hoge (80-100) en lage (40-60) compressieverhouding is minimaal voor fotografische beelden, maar zeer opvallend voor dingen zoals digitale kunstwerken, pictogrammen en schermafbeeldingen. Daarom wordt het aanbevolen om JPEG voor foto's te kiezen en met iets anders te gaan voor de andere typen bitmapafbeeldingen.

PNG is een van de meest geschikte indelingen voor netwerkafbeeldingen (eigenlijk, dat is wat zijn afkorting betekent). Hoewel het JPEG-formaat altijd verlies is (zelfs met kwaliteitsinstelling op 100), kan het PNG-formaat verlies zijn of niet. Bovendien, zelfs als het is, comprimeert het gegevens door het aantal kleuren in de afbeelding te verminderen, zodat het resultaat vaak nog helder en helder uitziet. Kies dus PNG voor het weergeven van schermgrabben of een andere soort foto's met vaste vulling.

Begin met handige methoden

Het optimaliseren van bitmapbestanden is mogelijk met een stel freeware-tools, dus u hoeft niet op een volwaardige beeldeditor te vertrouwen. Stel je voor dat een dergelijke applicatie is en het is ongelooflijk gemakkelijk te gebruiken. Sleep gewoon een afbeelding (of een stapel afbeeldingen) over het voorstelvenster en gebruik de kleine schuifregelaars om de compressieverhouding aan te passen.

Stel je voor met JPEG-, PNG- en Webp-bestanden en het is ideaal voor het coderen van lossy. Het grootste voordeel is dat het gereedschap interactief is; Het laat meteen zien hoe het beeld met de huidige instellingen zal kijken en de voorgestelde bestandsgrootte weergeeft. Stel je voor dat je goed werkt voor batchverwerking - het kan tenminste alle geopende afbeeldingen meteen opslaan als je dat nodig hebt.

Onnodig te zeggen, er zijn tientallen, zo niet honderden, van andere JPEG- en PNG-optimalisers, waaronder enkele handige online services (zoals Tinyjpg ​Maar haast je nog niet - we hebben iets beters onze huls.

Geavanceerde compressietechnieken

Op het eerste gezicht lijkt het erop dat we niet veel meer een hapje uit lossy JPEG-bestandsgroottes kunnen nemen, iets dat onmiddellijk kan worden bewezen door nutteloze pogingen om afbeeldingen te vergroten met behulp van zip of een andere compressie-techniek. Maar hier komt Guetzli, een slimme Zwitserse cookie en een verfijnde perceptuele encoder voor JPEG.

Guetzli maakt een gemiddelde JPEG kleiner met 20 tot 30 procent door de compressiedichtheid te vergroten. Het geheim is dat het algoritme zich bewust is van de manier waarop mensen waarnemen wat ze zien, dus het resulterende beeld ziet er nog steeds goed uit voor het oog. Guetzli is een commandolijngereedschap met platformlijsten, dat de volgende syntaxis gebruikt:

guetzli [--quality Q] [--verbose] original_image output_jpeg_image

De originele afbeelding kan png of jpeg zijn, terwijl de uitvoer altijd JPEG is. Daarom kunt u Guetzli gebruiken om PNG naar JPEG te converteren dankzij de state-of-the-art compressie. De kwaliteit moet tussen 0-100 vallen. Guetzli is een ongelooflijk resource-heavy-software; Het verbruikt bijna 300 MB geheugen per 1 megapixel en ook veel CPU-stroom. We hopen dat uw Super-geoptimaliseerde JPEG's de opwarming van de aarde niet zal boost ...

Draagbare netwerkafbeeldingen zijn een ander verhaal, zolang het is ontworpen voor verliesvrij beeldcodering. Wanneer u een afbeelding opslaat als PNG in een beeldeditor zoals GIMP, hebt u een compressieverhoudingschuif met waarden van 0 tot 9. Hier betekent 0 geen compressie en het maakt het beeld alsof het is opgeslagen als een TIFF. 9 spreekt 9 de meeste van de onnodige kleurinformatie weg en resulteert in een bestand dat 15-20 keer kleiner is dan TIFF.

Deze keer proberen we een al klein PNG-bestand (met verhouding van 9) nog kleiner te maken. Voor dit doel gebruiken we ZOPFLI, een andere open-source-tool die opnieuw roots heeft in Google Labs. Zopfli is een compressor van hoge kwaliteit voor deflate, GZIP en ZLIB-gegevens die coderen.

Het interessante deel is dat ZOPFLI twee encoders in één bundel bevat: het algemene binaire en de dedicated 'Zopflipng'-tool. Dit laatste is precies wat we nodig hebben! ZopFlipng is een deflate-gebaseerde encoder met bepaalde algoritmen die belast zijn met het WEBP-formaat. Het is slim genoeg om automatisch de beste strategie te kiezen met behulp van scanline-codes en het verwijderen van verschillende onnodige brokken in PNG. Gebruik het met deze eenvoudige syntaxis:

zopflipng original_png output_png

Zopflipng kan waarschijnlijk de taak nog beter doen met de volgende expliciete opties:

 Zopflipng---iteraties = 500 --Filters = 01234MEPB --Lossy_8bit --Lossy_transparent original_png
output_png 

De prijs die u betaalt, is hetzelfde als bij Guetzli: het gereedschap kost veel tijd om een ​​afbeelding te verwerken, vooral als het groot is. Hoe meer iteraties die u gebruikt, hoe langer het zal duren, maar 500 is een redelijk aantal. De winst van de bestandsgrootte met Zopfli ligt tussen 8 en 20 procent, wat erg goed is voor visueel perfecte afbeeldingen. Kortom, het verkrijgen van 8 procent is gebruikelijk voor screenshots, terwijl 20 procent mogelijk is met foto's (wanneer u ze als PNGS moet opslaan).

Upgrade naar NEAST-GEN-bestandsindelingen

Formeel gaat dit deel verder dan de reikwijdte van PNG en JPEG, maar het is erg praktisch, omdat u bestandsconversie on-the-fly kunt organiseren. Wat we hier bedoelen, gebruikt alternatieve en nieuwe beeldformaten die beter presteren dan de beste industrienormen (lees webp).

Eén is FLIF, een nieuw verliesloos beeldformaat op basis van de Maniac (meta-adaptieve nabij-nul gehele rekenmethode, die kan overtreffen op PNG, FFV1, verliesvrije Webp, verliesvrije BPG en verliesloze JPEG 2000 in termen van compressieverhouding. FLIF is beschikbaar voor alle platforms en sommige beeldviewers ondersteunen het al, maar het heeft een lange weg om de mainstream te raken. Op dit moment is het logisch met behulp van FLIF voor opslag of aan de serverzijde. Het kan gedragen als een efficiënt archiveringsformaat. U moet de code van de GitHub-pagina van het project pakken en het compileren. Zodra je de flikker Binair geïnstalleerd, gebruik de volgende opdracht om een ​​PNG-afbeelding te coderen:

 FLIF -E Original_png Output_Flif 

Vervangen -E met -d en plaats de bestanden in omgekeerde volgorde om uw afbeelding terug te keren naar PNG. In termen van gereedschappen zijn er nu de FLIF WIC API-component voor Windows, de QT FLIF-plug-in voor Linux en de PHEW-beeldviewer en de QuickLook-plug-in voor MacOS (zie het gedeelte Links voor details). In vergelijking met het beeld dat eerder door Zopflipng werd gemarteld, vermindert FLIF zijn bestandsgrootte verder naar beneden met ~ 10 procent. Indrukwekkende resultaten!

Onze laatste held is Lepton, een ander open-source-formaat royaal gepubliceerd door de Dropbox-ontwikkelaars. Lepton doet met JPEG wat flif doet met PNG. Lepton kan JPEG's met maximaal 22 procent in de verliesloze modus slanken, wat betekent dat de encoder geen kwaliteitsverlies veroorzaakt in vergelijking met het oorspronkelijke JPEG-bestand. Onder de capuchon impliceert Lepton slimme technieken van het comprimeren van die 8x8 JPEG-blokken. In plaats van nullen en exemplaren te schrijven, codeert Lepton Bitmap-gegevens met behulp van de VP8-rekenkundige coder, die context rond elk blok respecteert.

Onze test bewees Lepton zeer efficiënt en snel. Het opdracht leek op het volgende:

 Lepton Original.jpg Uitgang.lep 

En in een tweede of twee produceerde het gereedschap het .EP-bestand dat met bijna een kwart van het origineel kleiner was. In vergelijking met het tijdrovende Guetzli is Lepton snel snel. U kunt Lepton op dezelfde manier gebruiken die Dropbox doet. Met het formaat kunt u de opslagkosten met 20 tot 25 procent verlagen en omdat het zo pittig is, kunt u on-the-fly codering / decoderingssequenties doen zonder grote nadelen. Trouwens, het decoderingsopdracht is even eenvoudig, het hoeft alleen maar de twee bestanden te wisselen en het resulterende bestand is identiek aan de originele JPEG:

 Lepton Original.lep Output.jpg 

Gebruik de beschreven technieken om de gebruikersgegevensopslag te optimaliseren of de laadsnelheden van uw webprojecten verder te verbeteren.

Hoe de software te krijgen

Elk stuk software beschreven in deze tutorial is open source, dus je kunt het vrij gebruiken. Het is niet nodig om alles uit bronnen te compileren, omdat de meeste van de onderstaande instrumenten binaire downloads hebben. Hier is hoe u de software krijgt en uitgevoerd.

Grijp het Guetzli-binair hier ​Het is het gemakkelijkste om te doen. Zopfli geeft alleen de code (bouw het met 'Make') op Github ​Het kan echter wijzer zijn om het door de Node.js Package Manager te krijgen:

  NPM Install Node-Zopfli 

Enkele handige links voor FLIF:

• Flow-hub : Referentie-implementatie, bronnen en Windows-binaries
• XNView MP : Een cross-platform foto-viewer met ingebouwde flif-ondersteuning
• qt-flow-plug-in : Een hemel voor Linux-gebruikers
• opluchting : Een kijker en QuickLook plug-in voor MacOS
• Lepon : Broncode en Windows-binaries

Dit artikel is oorspronkelijk gepubliceerd in kwestie 316 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop hier nummer 316 of Abonneer hier ​

Gerelateerde artikelen:

• De ultieme gids voor beeldresolutie
• Hoe een glitch-tekst en beeldeffecten in CSS te maken
• De handleiding van de ontwerper voor het effectiever gebruiken van afbeeldingen
• 4 Essential Image Optimization Tips