Hvordan optimalisere bilder for WordPress, en komplett guide

Folk på nettet har ikke mye tid til å konsumere data – fordi det er så mye av det siste. Det er så mye data at vi rett og slett ikke har tid til å lese alt! Som innholdskurator for det moderne nettet er oppgaven din å maksimere gjennomstrømningen. Jo mer du uttrykker med mindre ord, jo bedre er du på jobben din.


Hvorfor er bilder (så veldig) viktige?

Det er mange, mange grunner til at du vil (og burde) bruke bilder i innleggene og artiklene dine:

  • Bilder fungerer som visuelle stimuli for en handlingsfremmende handling (CTA). En CTA kan være hvilken som helst oppgave du vil at besøkende skal utføre. Vanlige CTA-er inkluderer å abonnere på nyhetsbrevet ditt, dele artikkelen din over sosiale medier eller kjøpe produktet ditt.
  • Bilder forbedrer forbindelsen forfatteren søker å få til med leseren.
  • Bilder formidler mer gjennom mindre.

Derfor er det viktig at vi bruker de riktige bildene i presentasjonene våre (blogginnlegg, uformell rapport, faktisk PowerPoint-presentasjon osv.) For å sette merke i leserens sinn!

Men vent! Det er et problem!

Bilder tar rundt 63% av båndbredden som brukes av moderne nettsteder, så det blir stadig viktigere at de er riktig optimalisert for hastighet.

En forsinkelse på ett sekund i lastetidene for sider kan redusere konverteringsfrekvensene med 7%

Vi har slått fast at folk har et kort oppmerksomhetsspenn (en av ulempene med den moderne innholdsproduksjonstakten). Selv om du bruker de riktige bildene, hvis de ikke lastes innenfor den akseptable tidsrammen, går interessen tapt.

10 Vanlige bildeoptimaliseringsfeil

De fleste nettstedene har et problem – de bruker utmerkede bilder, men måten bildet blir servert til besøkende er dårlig. Stor størrelse, dårlig optimalisering, feil format, unødvendig store dimensjoner (størrelser), ikke svarer bilder og uforsiktige SEO-feil, er noen av de vanligste problemene det moderne nettet står overfor. I dagens artikkel skal vi ta opp disse problemene!

1. Store dimensjoner

“Extra Fries” er ikke alltid bra

Dette er en klassiker. Anta at du trenger et bilde på 150 × 150 piksler på nettstedets “Team” -side. Vanligvis bruker du et 5MP-hodeskudd, redigerer det litt og til slutt laster det opp.

Fant du problemet? Noen mennesker laster direkte opp det faktiske 5MP-bildet! WordPress-temaet laster inn hele 5MP-bildet (det er 5 x 10 ^ 6 piksler) og ber nettleseren om å krympe det til den nødvendige dimensjonen på 150x150px. I hovedsak viser nettleseren bare 0,0045% av det originale bildet!

Du ender opp med å kaste bort både din og den besøkende båndbredde (selv om du serverer bildet via et Content Delivery Network som Stackpath CDN), bruker mer harddiskplass og øker lastetiden. Ingen av funksjonene er noe du vil ha på nettstedet ditt.

Endre størrelse alltid på størrelse (og ved å endre størrelse, mener jeg å redusere størrelsen) på bildet til de nødvendige dimensjonene og deretter laste det opp!

ImageResize.org

Du trenger ikke fancy programvare for å gjøre dette – det er gratis verktøy online ImageResize.org Du kan bruke til å raskt endre størrelse på og optimalisere bildene. Bare last opp og finjustere fotoinnstillingene. Når du er ferdig, last ned det optimaliserte bildet du vil bruke på nettstedet ditt. De tilbyr også en rask Bildekompressor hvis du bare vil redusere filstørrelsen.

Nyttige verktøy:

  • IrfanView er et utmerket freeware til å endre størrelsen på bildene dine med avanserte alternativer som optimalisering, vannmerke og grenser.
  • ImageMagick er et avansert open-source verktøy som kan brukes i en rekke programmeringsspråk og operativsystemer. Du kan skrive din egen app eller ganske enkelt bruke den via kommandolinjen.
  • ImageOptim (Mac) lar deg dra hele mapper og raskt optimalisere flere bilder.
  • TinyPNG er et online komprimeringsverktøy med et API.

2. Feil bildeformat

shutterstock_108312266

Formatet som brukes til bildet spiller en viktig rolle. Bruk som en generell tommelfingerregel PNG for vektorgrafikk og datamaskingenererte bilder som utklipp etc. Bruk JPEG for fotografier eller bilder med en rekke farger. For en detaljert forklaring, sjekk ut dette kjempebra StackOverflow svar.

3. Bruker ikke progressive JPEG-er

Baseline (Normal) JPG versus Progressive JPG

Baseline (Normal) JPG versus Progressive JPG

For den vanlige mannen er JPEG av to typer – Baseline og Progressive. Visuelt er begge deler like. Forskjellen ligger i måten de er lastet på:

  • Baseline JPEG har bare ett lag – som inneholder hele bildet. Når du blir bedt om det, lastes hele bildet på en gang.
  • Progressive JPEG-er komponerer bildet med flere lag. Et progressivt JPEG-bilde lastes lag for lag, som gradvis øker kvaliteten, og til slutt gir deg en tapsfri visning.
IrfanView støtter batchkonvertering med progressiv JPEG

IrfanView støtter batchkonvertering med progressiv JPEG

Med alle større bildebehandlere kan du lagre bilder som Progressive JPEG.

4. Bruker ikke Lazy Load

Lazy-Loading er en utmerket ressurssparing teknikk der et bilde lastes bare når den besøkende ruller ned til visningsrammen til bildet. Tenk på en artikkel – “15 av de mest drivstoffeffektive bilene i 2014”. Naturligvis vil denne artikkelen inneholde minst 15 bilder. Uansett høyden på skjermenheten – skjerm, nettbrett eller smarttelefon, kan du ikke få plass til alle 15 bildene i utsiktsrammen. Du må bla nedover for å se alle bildene.

Når Lazy Loading er aktivert, lastes bilder bare når en besøkende er i nærheten av bildet. Med andre ord begynner bildene å laste akkurat når du blar ned for å se dem. De første bildene lastes imidlertid øyeblikkelig, siden du allerede er i visningsrammen. Lazy Loading sparer båndbredde i begge ender og forbedrer lastetiden! Du kan bruke Lazy Loading i WordPress med BJ Lazy Load Plugin.

5. Bruker ikke et CDN

cdn-nettverk

Bruke et innholdsleveringsnettverk (CDN) vil tjene bildet fra en server som er fysisk nærmest besøkende. Hvis en besøkende fra India ber om et bilde, og CDN har en POP (nærværspunkt, eller ganske enkelt en server) i Tokyo og New York, vil bildet bli servert fra serveren i Tokyo.

Når du har betydelig trafikk, bør du konfigurere et CDN med WordPress for å senke lastetiden og få generell ytelse. Her på WPExplorer, anbefaler vi Cloudflare. For nyfødte nettsteder vil vi anbefale en liste over gratis CDN-tjenester du kan prøve.

6. Ikke erklærer ‘alt’-attributtet

Attributtet ‘alt’ beskriver bildet for søkemotoren. Teksten du skriver inn i dette feltet vises for brukeren i tilfelle bildet ikke kan lastes inn. Mange mennesker har en tendens til å forlate disse feltene tomme. Dette er veldig skadelig for SEO, og du mister trafikken. Du bør alltid prøve å ta med søkeordene til nettstedet ditt i alt-taggen til bildene dine.

7. Ikke optimaliser bilder

blyant-fargestifter-poeng

Optimaliserte bilder er 40% lettere enn vanlige bilder. Dette forbedrer lastetiden og sparer båndbredde. Fra Freddys liste over de beste WordPress Image Optimization Plugins, vil vi anbefale WPSmush.it for å optimalisere bildene dine. Kraken.io er også et flott online alternativ for å komprimere bilder på en jiffy. Vi bruker det hele tiden her på WPExplorer for å optimalisere funksjoner før vi laster dem opp til innlegg og temademonstrasjoner.

8. Responsive bilder

Responsive Web Design er her

Responsive Web Design er her

Selv om nettstedet ditt er responsivt, betyr det ikke at bildene dine er det. Det betyr at overskriftsbildet du bruker på en 22-tommers skrivebordsskjerm også serveres til en 5 ”iPhone. Når du laster opp et bilde, endrer størrelsen på WordPress det i flere versjoner – Thumbnail, Medium, Full Size, etc. Dette kan endres av utvikleren. Et godt kodet tema vil tjene “Medium” -versjonen av bildet, og dermed spare båndbredde.

De Picturefill.WP plugin vil erstatte bildekoder med en ny element som vil tjene forskjellige bilder basert på mediesøk. Det er ganske eksperimentelt (det betyr at det er feil) og bør ikke brukes på et live nettsted.

9. Bildetekster

Bildetekst er ikke alltid nødvendig, selv om det i noen tilfeller er påkrevd – for eksempel skjermbilder i en tutorial. Bildetekst hjelper leserne å forstå emnet bedre, samtidig som du øker SEO.

10. Filename

Tenk på filnavnet fra en søkemotors synspunkt. Bruk den samme teksten som du ville gjort i “tittelen” -koden på bildet. Prøv også å inkludere søkeordene dine som er mest relevante for nettstedet ditt.

Konklusjon

hero-11

Image SEO er kritisk viktig for ethvert nettsted – gammelt eller nytt. Folk som implementerer image SEO riktig (det kan være ganske dagligdags til tider), stå for å få en betydelig mengde organisk trafikk (den beste typen trafikk) i lang løp.

Har du en fantastisk optimaliseringsteknikk? Fyr løs!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me