» » Afbeeldingen, hoe werk je ermee

Afbeeldingen, hoe werk je ermee

Geplaatst in: Zoekmachines | 0

Afbeeldingen zijn vaak verantwoordelijk voor de meeste gedownloade bytes op een pagina. Het resultaat is dat het optimaliseren van afbeeldingen vaak de grootste bytebesparingen en prestatieverbeteringen oplevert: hoe minder bytes de browser moet downloaden, hoe minder concurrentie er is voor de bandbreedte van de cliënt en hoe sneller de browser inhoud op het scherm kan downloaden en weergeven.

Het vinden van de optimale indeling en optimalisatiestrategie voor uw beeldmateriaal vereist zorgvuldige analyse in vele dimensies: type gegevens dat wordt gecodeerd, beeldformaatmogelijkheden, kwaliteitsinstellingen, resolutie en meer. Bovendien moet u overwegen of sommige afbeeldingen het beste in een vectorindeling kunnen worden gebruikt, of de gewenste effecten via CSS kunnen worden bereikt en hoe u geschikt geschaalde activa voor elk type apparaat kunt leveren.

Optimalisaties voor GIF-, PNG- en JPEG-afbeeldingen

GIF- , PNG- en JPEG- indelingen maken 96% van het totale beeldverkeer van het internet. Vanwege hun populariteit biedt PageSpeed ​​Insights specifieke optimalisatieaanbevelingen. Voor uw gemak kunt u de geoptimaliseerde afbeeldingen rechtstreeks downloaden van PageSpeed ​​Insights (dat gebruikmaakt van de beeldoptimalisatiebibliotheek van modpagespeed.com ).

U kunt ook hulpmiddelen gebruiken, zoals de bekeerling binaire gemaakt door ImageMagick die vergelijkbaar zijn optimalisaties van toepassing kan zijn – zie voorbeeld hieronder instructies.

Als u hulpprogramma’s van derden gebruikt, moet u er rekening mee houden dat de transformatie uw afbeeldingen mogelijk groter maakt, als die van u al zeer goed zijn geoptimaliseerd. Gebruik in dat geval uw originelen.

GIF en PNG zijn verliesloze indelingen, omdat het compressieproces de afbeeldingen niet visueel wijzigt. Voor stilstaande beelden bereikt PNG een betere compressieratio met een betere visuele kwaliteit. Voor geanimeerde afbeeldingen, overweeg het gebruik van videoelement in plaats van een GIF, voor een betere compressie.

  • Converteer altijd GIF naar PNG tenzij het origineel geanimeerd of klein is (minder dan een paar honderd bytes).
  • Verwijder voor zowel GIF en PNG het alfakanaal als alle pixels ondoorzichtig zijn.

U kunt bijvoorbeeld een binair bestand gebruiken om uw GIF- en PNG-afbeeldingen te optimaliseren met de volgende opdracht (parameters tussen haakjes zijn optioneel):

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png

cuppa.png
cuppa.png (1,763 Bytes)

convert cuppa.png -strip cuppa_converted.png

cuppa_converted.png
cuppa_converted.png (856 Bytes)

JPEG is een verlieslatend formaat. Het compressieproces verwijdert visuele details van de afbeelding, maar de compressieverhouding kan 10x groter zijn dan GIF of PNG.

  • Verlaag de kwaliteit naar 85 als deze hoger was. Met een kwaliteit groter dan 85 wordt het beeld snel groter, terwijl de visuele verbetering klein is.
  • Reduceer Chroma sampling tot 4: 2: 0, omdat het menselijke visuele systeem minder gevoelig is voor kleuren in vergelijking met luminantie.
  • Gebruik een progressief formaat voor afbeeldingen van meer dan 10k bytes. Progressive JPEG heeft meestal een hogere compressieverhouding dan baseline JPEG voor grote afbeeldingen en heeft de voordelen van progressieve rendering.
  • Gebruik grijsschaalkleurenruimte als de afbeelding zwart-wit is.

U kunt bijvoorbeeld binaire conversie gebruiken om uw JPEG-afbeeldingen te optimaliseren met de volgende opdracht (parameters tussen haakjes zijn optioneel):

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

puzzle.jpg
puzzle.jpg (13,501 Bytes)

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

puzzle_converted.jpg
puzzle_converted.jpg (4,599 Bytes)