De snelste manier om de prestaties van uw site nu te verbeteren

Het web wordt groter. Het wordt ook langzamer. Het grappige is dat ik elke dag nieuwe sites bezoek om een ​​nieuw product uit te proberen of een blog te lezen, en ik vind steeds dezelfde prestatieproblemen. Ik hoef alleen maar naar DevTools te kijken om te zien dat de meeste afbeeldingen veel te groot zijn.

Wat mij verbijstert is hoe gemakkelijk het is om dit te repareren. De snelste manier om de prestaties van elke site te verbeteren, is om afbeeldingen die worden weergegeven zonder verlies te comprimeren . Het is zelfs zo eenvoudig dat iedereen in uw team, ongeacht de codeerervaring, een deuk in het verbeteren van de prestaties kan maken.

Het comprimeren van afbeeldingen moet automatisch gebeuren

Het gemiddelde paginaformaat is 1.88 MB, waarbij het grootste deel van dat gewicht uit afbeeldingen komt. Dus als het grootste deel van een site afbeeldingen is, moeten we ons concentreren op beeldoptimalisatie voordat we ons concentreren op zaken als database-indexering, caching of andere meer geavanceerde vormen van prestatie-optimalisatie.

De 4 niveaus van beeldoptimalisatie

Er zijn vier belangrijke inspanningen vereist om de afbeeldingsgegevens kleiner te maken. Elk niveau is opgebouwd uit de vorige, dus zorg ervoor level 1 te voltooien voordat je naar level 2 gaat.

Het eerste niveau vereist de minste hoeveelheid werk (wat in minuten kan worden bereikt). Het vierde niveau vereist alle voorgaande stappen, evenals zijn eigen set van taken. Dit kan uren of zelfs dagen in beslag nemen, afhankelijk van hoe beeldintensief je inhoud is.

Elk niveau levert een afnemend rendement op. Het eenvoudig voltooien van één niveau zal meer presteren voor je prestaties dan het volgende niveau. Daarom is het belangrijk om geen stappen over te slaan.

Niveau 1: Compressie zonder verlies

Het eerste wat u moet doen is een kopie van ImageOptim pakken . Deze kleine applicatie is je nieuwe beste vriend. ImageOptim zal elke afbeelding binnen een geselecteerde map scannen en de afbeelding automatisch comprimeren en alle nutteloze gegevens verwijderen.

In de context van deze blog verwijst nutteloze gegevens naar alles wat niet bijdraagt ​​aan de visuele kwaliteit van de afbeelding die wordt weergegeven. In feite verwijst de term verliesloos naar het vermogen om de oorspronkelijke gegevens uit de gecomprimeerde gegevens te reconstrueren zonder de informatie te verliezen die nodig is om die gegevens weer te geven.

Wist je bijvoorbeeld dat een foto de naam van de auteur van die foto kan opslaan? Die opmerking kan nuttig zijn om het auteursrecht van de fotograaf te beschermen, maar het heeft geen effect op hoe uw toepassing er voor de wereld uit zal zien. Die metadata is verliesloos en als je zonder verlies compressie op die JPG-foto zou uitvoeren, zou dit dit en tientallen andere metadatavelden eruit halen .

Wat je misschien niet beseft, is dat dit soort metadata een zeer groot deel van de totale grootte van het beeld vormt. Dit is precies waarom lossless-compressie zo belangrijk is. Het verwijderen van verliesvrije gegevens heeft geen invloed op de visuele kwaliteit van uw afbeeldingen, maar kan de grootte ervan drastisch verminderen . En hoe kleiner de afbeelding, hoe minder uw browser hoeft te downloaden om op te halen van de server waarop de afbeelding wordt gehost.

Daarom zou ImageOptim een ​​goed idee moeten zijn. Het duurt slechts enkele minuten om te werken en biedt mogelijk grote besparingen in grootte zonder kwaliteitsverlies.

Niveau 2: Gerichte compressie met compressie

Het volgende niveau vereist wat meer werk, maar nog meer besparingen. Op dit punt moet u specifieke fixes maken voor elk afbeeldingstype. We zullen dit opsplitsen voor de 3 belangrijkste afbeeldingstypen (en als je geen van deze drie gebruikt, zorg dan dat je de volgende stap bekijkt):

JPG

Als je al een JPG via ImageOptim hebt uitgevoerd, moet je een ander stuk software downloaden. Er zijn extra opties voor JPG's in ImageOptim-voorkeuren, zoals het verwijderen van metagegevens, maar ik heb ontdekt dat het verwijderen van metagegevens van het kleurenprofiel de afbeeldingen in feite inkleurt zodat ze wat meer groen en geel bevatten.

Dus wat zou je moeten kiezen? JpegMini kan zowel verliesvrije als lossy-compressie verwerken en stelt u in staat om de grootte van uw afbeeldingen te wijzigen.

Met betrekking tot het lijmen, gebruik maken van de juiste beeldformaat . Als u een afbeelding van 512x512 pixels hebt, maar de afbeelding alleen in een 64x64 canvas wordt gebruikt, schaalt u die afbeelding kleiner. Bezorgd over Retina-displays? Bekijk niveau 4 voor meer informatie.

Nog een tip: verlaag de beeldkwaliteit voor JPG's standaard tot 80% . JPG is een lossy-formaat in het algemeen, maar een zeer diepgaande analyse van de JPG-compressiekwaliteit laat zien dat er vrijwel geen verschil is in de visuele kwaliteit, maar significante besparingen in de bestandsgrootte .

PNG

Voordat u iets moet downloaden, moet u PNG-metagegevens strippen in ImageOptim. Dit is veilig om te doen voor PNG's en ik heb nog een PNG-afbeelding te zien die eruitziet door het verwijderen van metagegevens.

OptiPNG is de volgende PNG-optimizer na ImageOptim. Het heeft veel meer algoritmen voor het comprimeren van PNG's en probeert veel meer opties om een ​​echt optimale PNG-bestandsgrootte te krijgen.

Naast compressie zijn PNG's veel gevoeliger voor het gebruik van de juiste kleurprofielen . Als u een zwart-wit PNG gebruikt, bespaart een kleurloos profiel u veel ruimte. Van daaruit kiest u de juiste kleurenpaletgrootte om het aantal kleuren tot een acceptabel bereik te beperken. Toepassingen zoals Photoshop laten u een voorbeeld zien wanneer u uw afbeelding opslaat. Speel daarom met kleurenpaletgroottes totdat u iets ziet dat het aantal kleuren vermindert zonder de beeldkwaliteit te verminderen.

GIF

Nogmaals, ImageOptim zal een degelijke taak leveren door alle soorten afbeeldingen te optimaliseren, inclusief GIF's. Echter, voor een meer aangepaste compressietechniek, neem een ​​kijkje in FileOptimizer met de extra plug-ins voor GifSicle en GifSicle Lossy . Deze combinatie lijkt goed werk te leveren van het handhaven van de beeldkwaliteit terwijl het bestand drastisch wordt verkleind.

Niveau 3: Converteren naar het juiste afbeeldingstype

Op dit moment hebt u al de meest geavanceerde compressie-optimalisatietechnieken uitgeput. En hoewel deze programma's al het werk voor u doen in een kwestie van seconden, is het misschien de waarheid dat u uw afbeeldingen mogelijk helemaal moet verwijderen als ze de verkeerde afbeeldingsindeling hebben.

Hoe weet je of ze het juiste formaat hebben? Volg deze eenvoudige vragenlijst en sla je afbeelding vervolgens op in het nieuwe bestandsformaat (en herhaal dan niveau 1 en 2 om je nieuwe afbeeldingen te comprimeren!).

Lijkt het op een foto? Gebruik een JPG

JPG's waren bedoeld om met foto's te worden gebruikt. Als je avatars van je team hebt, foto's van je kantoor of andere echte afbeeldingen, zorg er dan voor dat ze in het JPG-formaat zijn.

Lijkt het op een door een computer gegenereerde afbeelding of tekening? Gebruik een PNG

Al het andere kan een PNG zijn. Andere indelingen bieden mogelijk een betere kwaliteit, maar als u een web- of afbeeldingstoepassing gebruikt, zal een PNG dit doen en wordt het universeel gelezen door elke soort toepassing. De enige uitzondering hierop zijn pictogrammen ...

Lijkt het op een pictogram? Gebruik een SVG

Pictogrammen worden ook door de computer gegenereerd, maar het verschil is dat pictogrammen over het algemeen naast typografie worden gebruikt. Als u denkt dat de afbeelding wordt gebruikt in een menu, op een knop of als symbool voor iets, is dit waarschijnlijk een pictogram en kunnen pictogrammen profiteren van SVG's omdat ze kunnen worden geschaald samen met uw type en 0 betrouwbaarheid verliezen. Ze zien er net zo helder uit als uw lettertypen en zullen ook veel kleiner zijn als SVG's.

Ondersteunt u de nieuwste browsers en geeft u niet om Firefox? Gebruik WebP, JPEG 2000 en JPEG XR

Ten slotte is er een duw voor de volgende generatie beeldformaten. JPG en PNG bestaan ​​al meer dan twintig jaar en het wordt hoog tijd dat we een aantal nieuwe formaten hebben die innoveren om de beeldkwaliteit te behouden zonder onze applicaties te laten opdrogen. Beter nog, ze vereisen niet dat je tussen het beeldtype kiest. WebP werkt bijvoorbeeld uitstekend voor zowel foto's als computer-gegenereerde afbeeldingen.

Het nadeel is dat de ondersteuning gefragmenteerd is over apparaten en browsers. WebP is gemaakt door Google, dus het is natuurlijk alleen ontworpen voor Chrome en Chrome mobiel. JPG heeft ook geëvolueerde formaten, maar JPEG2000 wordt alleen ondersteund door Apple (Safari en Safari Mobile), terwijl JPEG XR alleen wordt ondersteund door Microsoft (IE en IE Edge).

Hoe zit het met Firefox? Er is geen next-gen-formaat voor deze browser, maar ze hebben wel een 2-jarig bugticket om WebP te implementeren en het is toegewezen, maar wie weet wanneer dit zal landen.

Niveau 4: Bronsets en fallbacks

Als je de juiste afbeelding hebt gekozen en je hebt het helemaal gecomprimeerd, moet je ervoor zorgen dat het op het juiste apparaat wordt weergegeven in de juiste beeldverhouding. Ik zinspeelde hierop terug in niveau 2, maar als je je zorgen maakt over Retina-schermen zoals MacBook Pro's of zelfs x3-kwaliteit voor de nieuwste iPhones, wil je in al deze indelingen meerdere kopieën van je afbeelding maken.

Als je avatars in een 64 x 64 JPG-indeling gebruikt, moet je ook kopieën maken van dimensie 128 x 128 voor Retina en 192 x 192 voor Retina x3. De beste manier om dit te doen, is om te beginnen met een grotere afbeelding en verkleinen, in plaats van opschalen . Ken je die misdaaddrama's waarbij ze de hacker vragen " Zoom! Enhance! "? We weten allemaal dat dit niet werkt in het echte leven, en datzelfde geldt voor uw afbeeldingen - u kunt geen duidelijkheid toevoegen waar er geen was in de eerste plaats.

Begin in plaats daarvan met de oorspronkelijke bronafbeelding (zeg 512x512) en schaal naar 192, sla een kopie op, vervolgens 128, sla een andere kopie op en vervolgens 64 en bewaar die laatste kopie. Dit zal resulteren in een minder wazige, zij het nog steeds lossy (omdat je informatie verwijdert in de vorm van pixelgetrouwheid) set van afbeeldingen.

Met al deze dubbele, geschaalde afbeeldingen, hoe verbinden we dit allemaal? Het afbeeldingskenmerk dat bekend staat als srcsetredding komt:

Srcsetis best geweldig. Het zal altijd standaard naar het originele 1xvergrootglas gaan zoals een normale afbeeldingstag zou doen. Als het echter de andere afbeeldingen vindt, past het deze toe op de gegeven beeldverhoudingen voor uw apparaat. Met andere woorden, als u de foto op een 2015 MacBook Pro bekijkt, zal de browser selecteren avatar-md.jpg, maar als u op een iPhone X zit, selecteert deze avatar-lg.jpg. En als je in een militaire bunker zit die IE8 gebruikt, zal het terugvallen naar avatar-sm.jpg.

Sizesis een andere eigenschap voor responsieve afbeeldingen, maar deze is afhankelijk van de breedte van het apparaat in plaats van de pixeldichtheid. Het formaat is hetzelfde:

U geeft een afbeelding, spatie, de grootte op waarop de afbeelding moet worden weergegeven, met een wdescriptor voor de srcset, en vervolgens, met behulp van het sizesattribuut, geeft u de mediaquery op waarop de verschillende bronnen moeten worden gebruikt.

Het enige nadeel? Srcsetwordt niet ondersteund in IE . Het wordt ondersteund in IE Edge en het sizeskenmerk wordt overal ondersteund. Volgens mij is dit geen reden om ons zorgen te maken omdat alle Retina-apparaten die IE gebruiken al nieuw genoeg zijn om IE Edge te ondersteunen. Iets dat IE11 en down nog nodig heeft, heeft waarschijnlijk toch geen Retina-display (tenzij het is verbonden met een extern beeldscherm met hoge densiteit), dus u zult waarschijnlijk niet tegen dit probleem aanlopen als een echte blocker voor u.

Iets is beter dan niets

Dit is geen uitputtende lijst van beeldoptimalisatietechnieken en het is ook niet bedoeld als een prescriptieve formule. Zelfs als u ImageOptim alleen in al uw afbeeldingen in uw toepassing uitvoert, bespaart u mogelijk 60-80% van wat uw gebruikers moeten downloaden.

Afbeeldingen, audio en video, niet uw broncode, zullen verreweg de grootste ruimte voor uw toepassing vormen. Het effectief kiezen, comprimeren en weergeven van uw afbeeldingen heeft een duidelijke impact op zowel de applicatiegrootte als de prestaties voor uw eindgebruikerservaring. Het beste deel is dat het slechts een paar downloads en nog een paar seconden in beslag neemt om je afbeeldingen door een zeer eenvoudige set van gereedschappen te laten lopen die een onmiddellijke verbetering zullen bieden zonder in te boeten aan kwaliteit.