En stor del av å maksimere nettstedets hastighet er å optimalisere bildene dine. Og fra og med versjon 5.8 støtter WordPress nå WebP-bildeformatet. Dette filformatet er 30 % mindre enn JPEG eller PNG, noe som betyr at bilder lastes raskere.
Å bruke et overlegent filformat er selvfølgelig bare én måte å optimalisere bildene dine på. Du kan fortsatt få så mye mer når det gjelder ytelse fra optimaliserte JPEG- og PNG-bilder. Faktisk er det mange verktøy som gjør dette enkelt.
I dag vil jeg dekke en rekke måter å optimalisere bilder og forbedre nettstedets hastighet.
Hva er WebP?
WebP er et bildeformat opprettet av Google i 2010. Det er mindre enn mer tradisjonelle filformater som JPEG og PNG, samtidig som det tilbyr overlegen komprimering uten tap og tap.
Som et resultat er nettsteder som bruker WebP raskere enn de som ikke gjør det. Så hvordan fungerer det?
Uten å bli for teknisk bruker tapsfull WebP-komprimering en prediktiv kodingsteknikk. I hovedsak ser den på bare en liten del av koden i nærliggende pikselblokker og forutsier hvordan resten av den vil se ut.
Mens den tapsfrie WebP-komprimeringen bruker bildedataene den allerede har sett for å rekonstruere bildet.
Bare husk at ikke alle nettlesere støtter WebP som filformat. Den gode nyheten er at de fleste av de store gjør det, som inkluderer Google Chrome, Firefox, Microsoft Edge og Opera.
Dette dekker over 95 % av all nett- og mobiltrafikk, så du har ikke mye å bekymre deg for.
De beste pluginene for å optimalisere bilder
I denne artikkelen skal jeg gå over noen av de beste pluginene for å optimalisere bildene dine for WebP. Deretter skal jeg gå gjennom noen verktøy du kan bruke akkurat nå for å begynne å lage strømlinjeformede bilder for nettstedet ditt.
1. EWWW Image Optimizer
Hvis du noen gang har sett på nettstedets hastigheter og gått «ewww», kan det være lurt å gi EWWW Image Optimizer et forsøk. Den spesialiserer seg på å optimalisere bilder i WordPress og støtter en rekke filformater inkludert WebP.
Og viktigst av alt, det fungerer også på alle bilder fra andre plugins. Dette betyr ingen kompatibilitetsproblemer!
Programtillegget lar deg velge hvilken type komprimering som skal brukes for hver filtype, og ja, du kan ha forskjellige alternativer for forskjellige filer. Etter det kan du bruke en massehandling for å begynne å optimalisere bildene dine.
Individuell bildeoptimalisering er veldig rask, vanligvis under ett minutt, med mindre filen er veldig stor. Når det er sagt, hvis du går gjennom en massehandling, forvent at prosessen tar flere minutter, spesielt på større nettsteder.
2. Smush
Smush er den mest populære bildeoptimereren i WordPress med over én million aktive installasjoner. Og det er fordi det går utover bare å optimalisere bilder. I stedet legger den til andre funksjoner som lat lasting for å øke sidehastigheten.
Naturligvis er brødet og smøret til pluginet bildeoptimalisering, som det utmerker seg med.
Den dekker alle de populære filtypene, men det er verdt å nevne at WebP ikke er tilgjengelig i gratisversjonen. Når det er sagt, gjør rekkevidden til denne plugin-en opp for det. I motsetning til mange andre optimaliseringsplugins, går det utover mediebiblioteket.
Alle bilder som befinner seg utenfor mediebiblioteket vil automatisk bli optimalisert. Den håndterer også bildestørrelse under komprimeringsprosessen, slik at du kan slå to fluer i en smekk. Og du kan se all optimaliseringsstatistikk direkte i bildeblokken.
3. ShorPixel Image Optimizer
ShortPixel Image Optimizer er et freemium bildeoptimaliseringsprogram. Den tilbyr brukere 100 tokens hver måned, der ett bilde krever ett token. Den viktigste forskjellen er imidlertid at disse gratis tokens gir deg tilgang til premium komprimering.
Til sammenligning må du kjøpe Pro-versjonen i andre plugins for å matche kvaliteten.
Nå er det ett stort problem med dette systemet, og det er måten WordPress håndterer bilder på. WordPress lager faktisk flere kopier av bildene dine i forskjellige størrelser, og hver av disse størrelsene tar faktisk opp et token. Dermed er det faktisk ikke et en-til-en-forhold.
Når det er sagt, for en ny nettside er dette et ganske godt verktøy å bruke siden du sannsynligvis ikke trenger å optimalisere 100 bilder i måneden. Spesielt på en mindre blogg. Det kan også bidra til å konvertere JPEG, PNG eller GIF til WebP-formatet.
4. Komprimerer JPEG- og PNG-bilder
Samtidig som Komprimer JPEG- og PNG-bilder ikke faktisk håndtere WebP-filformatet, det gjør en utmerket jobb med JPEG- og PNG-filer. Og for mange nettsider er dette mer enn nok, spesielt hvis du ikke bruker redigeringsprogramvare som støtter WebP.
Når det er sagt, er det mange gratis redigeringsverktøy som gjør det, så sørg for å sjekke ut den delen nedenfor.
Denne plugin tilbyr 500 komprimeringer gratis hver måned. Det støter imidlertid på det samme problemet som den siste plugin-en; den optimerer alle bildekopiene. Dermed er det mye nærmere 100 bilder, men det er mer enn nok for nyere nettsider.
Det er også verdt å merke seg at denne plugin er fullt kompatibel med WooCommerce, men anbefaler å være forsiktig. WooCommerce ser ut til å prøve å regenerere bildemetadataene ved hvert sidebesøk. Dette kan ende opp med å spise opp de månedlige kredittene dine.
5. Optimus – WordPress Image Optimizer
Optimus WordPress Image Optimizer er et annet flott verktøy å vurdere når du vil optimalisere bilder i WordPress. Det kan bidra til å redusere bildestørrelsen med opptil 70 %, noe som absolutt kan bidra til å øke hastigheten på sidene dine.
Nå er det verdt å merke seg at selv om det er et gratis alternativ, er det mest sannsynlig ubrukelig for mange nettsteder.
Dette er fordi det er en begrensning på 100KB, som de fleste filer naturlig vil overskride, spesielt de som må optimaliseres. Dessuten fungerer mange av innstillingene kun i Pro-versjonen, så du kommer til å ende opp med å betale på et tidspunkt.
Når det er sagt, er tjenestene plugin-en tilbyr flotte og bildereduksjonen er ganske merkbar. Det fungerte med alle større bildefiltyper, inkludert WebP. Massehandlingen er enkel å bruke og tiden er rimelig, men som alltid tar større nettsteder lengre tid.
6. Imagify – Optimaliser bildene dine og konverter WebP
Tenk deg er et fantastisk alternativ for nettsteder som leter etter et freemium-alternativ for å optimalisere bilder. Det gir deg en stor månedlig grense som ikke måles i antall bilder, men i stedet etter størrelsen på dem.
Hver måned kan du optimalisere opptil 20 MB med bilder gratis. Og det kan være mye for utviklere som vet hvordan de skal administrere bilder.
Den støtter alle standard filtyper inkludert PDF-er og vil lage en WebP-fil, forutsatt at du krysser av i boksen hver gang den optimerer et bilde. Den tilbyr brukere tre optimaliseringsnivåer: Normal, Aggressiv og Ultra.
Hvert nivå forbedrer komprimeringsfunksjonaliteten, og hvis du ikke er fornøyd, kan du bruke sikkerhetskopieringsalternativet for å få tilbake originalen og velge et annet optimaliseringsnivå. Dette hjelper deg å se hva som fungerer best for bildene dine.
7. WebP Express
Hvis du ønsker å konvertere alle bildene på nettstedet ditt til WebP-filformatet, finnes det ikke noe bedre alternativ enn WebP Express plugg inn. Den tilbyr nettsteder en rekke måter å gjøre dette på og viser dem bare på nettlesere som støtter WebP.
For besøkende som ikke bruker nettlesere som gjør det, noe som er sjeldent, vil de se den originale JPEG- eller PNG-versjonen.
Denne plugin-en bruker WebP Convert-biblioteket til å konvertere JPG- og PNG-filer til WebP. Noen nettsteder kan ha et problem avhengig av deres webserver. I slike tilfeller må du kanskje bruke en skyløsning, som pluginet gir muligheter for.
Bare husk at dette er premiumfunksjoner. Sluttresultatet er en mye raskere nettside, men husk noen få begrensninger. Gravatar-bilder vil for eksempel ikke bli konvertert fordi de er lagret på Gravatar-serverne.
Du må være vert for bildet for at pluginet skal fungere.
WebP-redigeringsverktøy
Nå hvis du bruker Photoshop eller andre redigeringsverktøy, vil du kanskje legge merke til at de fleste av dem ikke støtter WebP-formatet. Odds er at dette kommer til å endre seg med tiden som et resultat av at WordPress tar i bruk filformatet, men når er fortsatt et mysterium.
I mellomtiden trenger du et verktøy for å lage og redigere WebP-bilder, og heldigvis er det mange gratis alternativer tilgjengelig som:
- Picosmos
- Paint.Net
- RealWorld Paint
- JPEGView
Den jeg virkelig anbefaler er imidlertid PhotoPea.
Photopea
Når det kommer til Photoshop-alternativer, er det ikke noe bedre alternativ enn Photopea. Det ser nesten identisk ut med Photoshop, så brukerne skal føle seg hjemme. Det er imidlertid to viktige forskjeller.
Photopea støtter naturlig WebP-bildefilformatet og er helt gratis å bruke.
Faktisk trenger du ikke engang å opprette en konto for å bruke denne programvaren. Photopea fungerer direkte gjennom nettleseren din, men alle filene er lagret på datamaskinen din, noe som kan gjøre det vanskelig å bytte datamaskin. Selv om dette løses enkelt med skylagring.
Og som du kanskje forventer, siden den ikke har en dedikert app på datamaskinen din, kan ytelsen være noe mangelfull. Kompliserte bilder med mange lag kan ta flere minutter med innlasting.
Likevel er Photopea gratis og fungerer utrolig bra med PSD og andre bildefiler for å konvertere til WebP.
Lazy Loading er din beste venn
Selv med WebP er det selvfølgelig grenser for hvor lite bildet ditt kan bli. Det er imidlertid andre teknikker du kan dra nytte av for å optimalisere lastetidene dine ytterligere med hensyn til bilder, med Lazy Loading i forkant.
Lazy loading er en teknikk der bare bildene som er synlige vil lastes. Tenk deg for eksempel en lang side som inneholder mange bilder. Er det fornuftig for besøkende å vente på at bildene nederst skal lastes inn?
De fleste vil nok si nei, og det er nettopp det som er lat lasting. Den laster bare det en besøkende kan se når en side lastes.
Hvis de velger å rulle nedover, noe vi må innse, ikke alle gjør det, vil resten av bildene lastes mens de ruller. Dette kan drastisk øke hastigheten på sider med mange bilder fordi mengden av første lasting reduseres.
Bedre optimalisering, raskere hastigheter, bedre opplevelse
Det burde være en selvfølge, men en raskere nettside er bare en bedre opplevelse. Og enda viktigere, det er det besøkende forventer i 2021.
Et av hovedproblemene de fleste nettsteder møter kommer fra dårlig optimaliserte bilder. Mange nybegynnere klarer ikke å gjenkjenne hvordan bildestørrelser skal se ut og bruker ofte til og med filer som er over en megabyte.
I virkeligheten bør bilder sjelden overstige et par hundre kilobyte.
Den gode nyheten er at det aldri har vært enklere å optimalisere bilder, og WordPress har massevis av plugins som kan hjelpe deg med det. Ikke bare vil dette forbedre besøkendes opplevelse, men det vil gi søkemotorrangeringen et løft.
Hastighet er en av de få faktorene vi vet med sikkerhet når det kommer til søk, og det er fordi Google fortalte det til alle.
Har du tenkt å bruke WebP-filformatet på WordPress-nettstedet ditt? Hvordan optimaliserer du for øyeblikket bilder for nettet?
