Sådan optimeres billeder til WordPress, en komplet guide

Sådan optimeres billeder til WordPress, en komplet guide

Folk på nettet har ikke meget tid til at forbruge data – fordi der er så meget af sidstnævnte. Der er så mange data, at vi simpelthen ikke har tid til at læse det hele! Som en indholdskurator for det moderne web er din opgave at maksimere gennemstrømningen. Jo mere du udtrykker med mindre ord, jo bedre er du på dit job.


Hvorfor er billeder (så meget) vigtige?

Der er mange, mange grunde til, at din (og burde) brug af billeder i dine indlæg og artikler:

  • Billeder fungerer som visuelle stimuli til en opfordring til handling (CTA). En CTA kan være enhver opgave, du ønsker, at din besøgende skal udføre. Almindelige CTA’er inkluderer at abonnere på dit nyhedsbrev, dele din artikel over sociale medier eller købe dit produkt.
  • Billeder forbedrer forbindelsen, som forfatteren søger at etablere med læseren.
  • Billeder formidler mere gennem mindre.

Det er derfor meget vigtigt, at vi bruger de rigtige billeder i vores præsentationer (blogindlæg, uformel rapport, faktisk PowerPoint-præsentation osv.) For at efterlade et mærke i læserens sind!

Men vent! Der er et problem!

Billeder udgør omkring 63% af den båndbredde, der bruges af moderne websteder, så det bliver stadig vigtigere, at de er korrekt optimerede til hastighed.

En forsinkelse på et sekund i sideindlæsningstider kan reducere konverteringsfrekvenserne med 7%

Vi har konstateret, at folk har en kort opmærksomhedsspænd (en af ​​ulemperne med den moderne indholdsproduktionshastighed). Selv hvis du bruger de rigtige billeder, hvis de ikke indlæses inden for den acceptable tidsramme, er interessen tabt.

10 mest almindelige billedoptimeringsfejl

De fleste steder har et problem – de bruger fremragende billeder, men den måde, billedet serveres til den besøgende, er dårlig. Stor størrelse, dårlig optimering, forkert format, unødvendigt store dimensioner (størrelser), uansvarlige billeder og uforsigtige SEO-fejl er nogle af de mest almindelige problemer, som det moderne web står overfor. I dagens artikel skal vi behandle disse problemer!

1. Store dimensioner

“Ekstra Fries” er ikke altid godt

Denne er en klassiker. Antag, at du har brug for et 150 × 150 pixelfoto på dit websteds “Team” -side. Normalt bruger du et 5MP-hovedbillede, redigerer det lidt og til sidst uploader det.

Opdagede du problemet? Nogle mennesker uploader det faktiske 5MP-billede direkte! WordPress-temaet indlæser hele 5MP-billedet (det er 5 x 10 ^ 6 pixels) og beder browseren om at skrumpe det til den krævede dimension 150x150px. I det væsentlige viser browseren kun 0,0045% af det originale billede!

Du ender med at spilde både din og din besøgende båndbredde (selvom du betjener billedet via et Content Delivery Network som Stackpath CDN), bruger mere harddiskplads og øger belastningen. Ingen af ​​funktionerne er noget, du vil have på dit websted.

Ændre størrelsen på billedet (og ved at ændre størrelsen på dem) mener jeg, at billedet reduceres til de krævede dimensioner og upload det derefter!

ImageResize.org

Du behøver ikke fancy software for at gøre dette – der er gratis online værktøjer som ImageResize.org du kan bruge til hurtigt at ændre størrelsen på og optimere dine billeder. Upload bare og juster dine fotoindstillinger. Når du er færdig, skal du downloade dit optimerede billede til brug på dit websted. De tilbyder også en hurtig Billedkompressor hvis du bare vil reducere filstørrelsen.

Nyttige værktøjer:

  • IrfanView er et fremragende freeware til batch-størrelse på dine billeder med avancerede muligheder som optimering, vandmærke og grænser.
  • ImageMagick er et avanceret open source-værktøj, der kan bruges i forskellige programmeringssprog og operativsystemer. Du kan skrive din egen app eller blot bruge den via kommandolinjen.
  • ImageOptim (Mac) giver dig mulighed for at trække hele mapper og hurtigt optimere flere billeder.
  • TinyPNG er et online billedkomprimeringsværktøj med en API.

2. Forkert billedformat

shutterstock_108312266

Det format, der bruges til billedet, spiller en vigtig rolle. Brug som tommelfingerregel PNG til vektorgrafik og computergenererede billeder såsom clipart osv. Brug JPEG til fotografier eller billeder med forskellige farver. For en detaljeret forklaring, se dette fantastisk StackOverflow svar.

3. Brug ikke progressive JPEG’er

Baseline (Normal) JPG versus Progressive JPG

Baseline (Normal) JPG versus Progressive JPG

For den almindelige mand er JPEG’er af to typer – Baseline og Progressive. Visuelt er begge dele ens. Forskellen ligger i den måde, de er indlæst på:

  • Baseline JPEG har kun et lag – der indeholder hele billedet. På anmodning indlæses hele billedet på én gang.
  • Progressive JPEGs komponerer billedet med flere lag. Et progressivt JPEG-billede indlæses lag for lag, som gradvist øges i kvalitet, hvilket i sidste ende giver dig et tab uden visning.
IrfanView understøtter batchkonvertering med progressiv JPEG

IrfanView understøtter batchkonvertering med progressiv JPEG

Alle større billedresizers giver dig mulighed for at gemme billeder som Progressive JPEG.

4. Brug ikke Lazy Load

Lazy-Loading er en fremragende ressourcebesparelse teknik, hvor et billede kun indlæses, når den besøgende ruller ned til billedets visningsramme. Overvej en artikel – “15 af de mest brændstofeffektive biler i 2014”. Naturligvis vil denne artikel indeholde mindst 15 billeder. Og uanset skærmenhedens højde – skærm, tablet eller smartphone kan du ikke passe alle 15 billeder i visningsrammen. Du skal rulle ned for at se alle billederne.

Når Lazy Loading er aktiveret, indlæses billeder kun, når en besøgende er i nærheden af ​​billedet. Med andre ord begynder billederne at indlæses, lige når du ruller ned for at se det. De første par billeder indlæses dog øjeblikkeligt, da du allerede er i visningsrammen. Lazy Loading sparer båndbredde i begge ender og forbedrer belastningstiden! Du kan bruge Lazy Loading i WordPress med BJ Lazy Load Plugin.

5. Brug ikke et CDN

cdn-netværk

Brug af et Content Delivery Network (CDN) vil betjene billedet fra en server, der fysisk er tættest på den besøgende. Hvis en besøgende fra Indien anmoder om et billede, og CDN har en POP (punkt for tilstedeværelse, eller blot en server) i Tokyo og New York, vil billedet blive serveret fra serveren placeret i Tokyo.

Når du har betydelig trafik, skal du konfigurere et CDN med WordPress for at sænke din belastningstid og få den samlede ydelse. Her hos WPExplorer anbefaler vi CloudFlare. For nyfødte websteder anbefaler vi en liste over gratis CDN-tjenester, du kan prøve.

6. Ikke at erklære attributten ‘alt’

Attributten ‘alt’ beskriver billedet til søgemaskinen. Den tekst, du indtaster i dette felt, vises for brugeren, hvis billedet ikke kan indlæses. Mange mennesker har en tendens til at lade disse felter være tomme. Dette er meget skadeligt for SEO, og du mister trafikken. Du skal altid prøve at inkludere dit websteds søgeord i alt-tagget for dine billeder.

7. Ikke optimering af billeder

blyant-farveblyanter-point

Optimerede billeder er 40% lettere end normale billeder. Dette forbedrer belastningstiden og sparer båndbredde. Fra Freddys liste over de bedste WordPress Image Optimization Plugins, vil vi anbefale WPSmush.it for at optimere dine billeder. Kraken.io er også en fantastisk online mulighed for at komprimere billeder på en jiffy. Vi bruger det hele tiden her på WPExplorer til at optimere fremhævede billeder, før vi uploader dem til indlæg og temademonstrationer.

8. Modtagelige billeder

Responsiv webdesign er her

Responsiv webdesign er her

Selv hvis dit websted reagerer, betyder det ikke, at dine billeder er. Det betyder, at det øverste billede, du bruger til en 22 ”desktopskærm, også serveres til en 5” iPhone. Når du uploader et billede, ændrer størrelsen på WordPress det i flere versioner – Miniaturebillede, Medium, Fuld størrelse osv. Dette kan ændres af udvikleren. Et godt kodet tema vil tjene den “mellemstore” version af billedet og derved gemme båndbredde.

Det Picturefill.WP plugin erstatter billedmærker med en ny element, der vil tjene forskellige billeder baseret på medieforespørgsler. Det er temmelig eksperimentelt (det betyder, at der er bugs) og bør ikke bruges på et live site.

9. Billedtekst

Billedtekster er ikke altid nødvendige, skønt det i nogle tilfælde kræves – f.eks. Skærmbilleder i en tutorial. Billedtekstbilleder hjælper læserne med at forstå emnet bedre, mens du øger din SEO.

10. Billedfilnavn

Tænk på filnavnet fra en søgemaskins synspunkt. Brug den samme tekst, som du ville gøre i ‘titel’-tagget på billedet. Prøv også at inkludere dine søgeord, der er mest relevante for dit websted.

Konklusion

hero-11

Image SEO er kritisk vigtigt for ethvert websted – gammelt eller nyt. Folk der implementerer image SEO korrekt (det kan til tider være ganske dagligdags), skal du få en betydelig mængde organisk trafik (den bedste form for trafik) i lange løb.

Har du en fantastisk optimeringsteknik? Fyr løs!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map