Innhold
- 01. Tapsfri optimalisering
- 02. Korrekte mål
- 03. Lagre på nettet
- 04. Kontroller og fjern bilder
- 05. GIF og PNG
- 06. Nedprøver PNG-er
- 07. Rett filformat
- 08. Cache-Control: ingen transformasjon
- Nginx
- Apache
- 09. CSS og SVG
- 10. Progressive JPEG-er
I dag er etterspørselen etter digitalt sterkere enn noensinne. Det finnes en overflod av tilkoblede enheter, og med internett tilgjengelig overalt, er det tydelig at det ikke er mangel på folk som vil bruke produktene våre. Imidlertid er kunder som tåler lange ventetider mye mindre vanlige, og mye hardt arbeid må fortsatt gjøres på denne fronten.
Hva er DPI? Les den ultimate guiden til bildeoppløsning - inkludert PDF-jukseark!
Båndbredden øker jevnlig i utviklede land, men det samme kan sies om internettbruk i avsidesliggende områder, på offentlig transport og på overbelastet gratis Wi-Fi. I likhet med adopsjon av nettlesere er ikke tilgang til den beste tilgjengelige teknologien et alternativ for alle mennesker til enhver tid. Bevisstheten i dag om hvor viktig det er å være rask er veldig bra. Verktøy, overvåking og ressurser er det beste de noen gang har vært, og de økonomiske konsekvensene av dårlig ytelse er godt kjent. Likevel fortsetter vekten av nettsider å vokse måned etter måned.
Et problem i mange store organisasjoner er ikke at utviklingsteam ikke vet hva som må gjøres, men at forespørsler om å planlegge forbedringer på nettytelsen er sårbare for å bli depriorisert når interessenter konkurrerer om utviklingstid. Bedriftene de betjener, bruker tid til andre aktiviteter, for eksempel å utvikle nye funksjoner.
Hvis du trenger å forbedre hastigheten på produktet ditt raskt, anbefaler jeg at du gjør bildeoptimalisering til det første trinnet, av følgende grunner:
- De aller fleste av den gjennomsnittlige websiden er bilder (64 prosent)
- Optimalisering av bilder vil redusere filstørrelsen mer enn noe annet aspekt av den gjennomsnittlige siden
- Optimalisering av bilder er muligens den enkleste nettytelsesoppgaven du kan gjøre
- Tapsfri bildeoptimalisering etterlater et bilde som ser nøyaktig likt ut, men reduserer filstørrelsen i området 20-40 prosent for PNG og 5-20 prosent for JPEG
- Dens relative letthet betyr at du kan sende et raskere produkt raskere
- Å ha sendt forbedringer som interessenter kan se og du kan referere til, vil bidra til å styrke saken din for å prioritere andre optimaliseringer
Så med deg nå forhåpentligvis overbevist, presenterer jeg deg noen teknikker du kan bruke for å optimalisere bruken av bilder.
01. Tapsfri optimalisering
Hvis du ikke gjør noe annet som jeg foreslår i denne artikkelen, kan du laste ned og bruke enten ImageOptim for OS X eller FileOptimizer for Windows og Linux for å batchoptimalisere bildene dine. Disse applikasjonene krever ikke annet enn at du drar og slipper en mappe med bilder inn i applikasjonen før du vandrer for å lage en kaffe mens de arbeider med magien. Prosessen er uanstrengt, og hvor mye disse appene reduserer bildefilens størrelse - uten noen endring i utseendet overhodet - er ganske utrolig.
02. Korrekte mål
Å bruke feil dimensjoner er en feil som svært få mennesker gjør nå, men det er verdt å nevne for fullstendighet. Det meste av tiden skjer det når du viser et miniatyrbilde for et større bilde andre steder.
img src = "threepwood-retina-2x-large.webp" width = "140" height = "84">
Å bruke et større bilde og sette dimensjoner med kode vil raskt føre til at sidestørrelsen din eksploderer, spesielt når du vurderer hvor mange miniatyrbilder mange sider har.
Forsikre deg om at det faktiske bildet har samme dimensjoner som området det vil vises i.
img src = "threepwood-140x84.webp" width = "140" height = "84">
Responsive bilder er selvfølgelig en annen historie, men det samme prinsippet gjelder for ikke å for eksempel servere og skalere desktop retina-bilder på mobil. For dette problemet er ReSRC.it en utmerket service som gjør prosessen mye enklere.
03. Lagre på nettet
En av de viktigste tingene er å finne det søte stedet mellom filstørrelse og kvalitet når du først eksporterer bildet ditt. Hvert 10. poeng på 0-100-kvalitetsmåleren når du eksporterer en JPEG, gjør en fil 30-50 prosent større, så å vite når du skal velge 70 i stedet for 80, vil for eksempel gi deg større gevinster enn noen optimizer kan.
Veksle mellom å zoome inn og se på bildet i sin naturlige størrelse. Å være nær vil hjelpe deg med å bedømme hvor mye du kan skyve verdien, men områder du kanskje har vært bekymret for på nært hold, vil kanskje ikke være merkbare når du ser på dem i naturlig størrelse. Bytte mellom de to mens du justerer skalaen vil hjelpe deg med å finne den optimale innstillingen.
04. Kontroller og fjern bilder
Det er en god ide å bruke litt tid på å bruke produktet og analysere noen av dine tidligere designbeslutninger - trenger du virkelig hvert bilde?
05. GIF og PNG
PNG ble opprettet som en forbedret, ikke-patentert erstatning for GIF. Så lenge du ikke trenger animasjon, dekker PNG de samme praktiske formålene som GIF - inkludert gjennomsiktighet - men til fordel for mindre filstørrelser (med det bemerkelsesverdige unntaket for ting som 1x1 pikselbilder).
Avhengig av hva du foretrekker og hvor mange GIF-bilder du har, kan du enten eksportere dem fra grafikkappen din som PNG, eller bruke konvertere fra ImageMagick til å batchbehandle dem på kommandolinjen. Som alltid, husk å kjøre de nye bildene du oppretter gjennom en tapsfri optimaliseringsapparat etterpå.
06. Nedprøver PNG-er
Det er en vanlig misforståelse at det eneste bildeformatet som gir halvgjennomsiktige piksler er 24-biters PNG. Halvgjennomsiktige piksler kan faktisk oppnås ved hjelp av en 8-biters PNG og som en ekstra bonus tilbyr de mye lavere filstørrelser enn 24-biters PNG. Du kan nedprøve 24-biters PNG til 8-bit ved hjelp av ImageAlpha for OS X eller PNGyu for Windows.
07. Rett filformat
I dag er det tre store rasteriserte bildeformater å velge mellom: JPEG, PNG og GIF. Her er noen tips som hjelper deg med å velge riktig format:
- Hvis du trenger animasjon, velger du tapsfri GIF
- Hvis bildet er et fotografi, velger du JPEG
- Hvis du trenger et fotografi med gjennomsiktighet, velger du tapsfri PNG
- Hvis ikke, prøv 8-biters PNG først, og fall tilbake til JPEG hvis du ikke er fornøyd med kvaliteten
08. Cache-Control: ingen transformasjon
Har du noen gang lagt merke til at når du får tilgang til et mobilnettverk, er de ellers normale bildene dine så komprimerte at kvaliteten er forferdelig? Dette er fordi noen operatører vil komprimere bildene dine når de passerer gjennom nettverket for å tilfredsstille kunder med reduserte båndbreddekostnader og raskere surfing.
Problemet er at det gjøres dårlig og foregår uavhengig av om bildet allerede er optimalisert. Å deaktivere dette og ta tilbake full kontroll over bildene dine er et enkelt spørsmål om at serveren din inkluderer Cache-Control: no-transform response header når du serverer bilder. Dette kan gjøres på følgende måter:
Nginx
plassering ~ * . (png | jpg | jpeg | gif) $ {add_header "Cache-Control" "public, no-transform"; }
Apache
IfModule mod_headers.c> FilesMatch ". (Png | jpg | jpeg | gif) $"> Overskrift legger til Cache-Control "offentlig, ikke-transform" / FilesMatch> / IfModule>
09. CSS og SVG
Hvis du bruker bilder til å vise relativt enkle linjer og former, har det mange fordeler å erstatte dem med CSS eller SVG. Som ren tekstformat kan disse ha et mye lettere fotavtrykk enn rasterbilder, og - i motsetning til rasterbilder - når du øker størrelsen, er det ingen taggete eller pixelert grafikk. Du kan endre størrelsen på dem samtidig som de opprettholder et utmerket bilde. SVG støttes i alle moderne nettlesere, så ikke vær redd for å prøve.
10. Progressive JPEG-er
Det er to hovedlastestrategier for JPEG. 'Baseline' lastes fra den øverste raden av piksler ned til bunnen, og 'progressive' laster inn et komplett bilde som er ekstremt pikselert og deretter gradvis skjerpes. Avveien her handler ikke så mye om filstørrelse, men om opplevd hastighet. Jeg favoriserer progressiv JPEG av denne grunn.
Du kan bruke konvertere fra ImageMagick til å konvertere input.webp til en progressiv JPEG kalt output.webp.
konvertere -strip -interlace Plane -kvalitet 80 input.webp output.webp
Hvis du vil overskrive input.webp du kan ganske enkelt sette det som output argument også.
