Kako optimizirati slike za WordPress, cjeloviti vodič

Kako optimizirati slike za WordPress, cjeloviti vodič

Ljudi na webu nemaju mnogo vremena za konzumiranje podataka – jer postoji toliko mnogo drugih. Postoji toliko podataka da jednostavno nemamo vremena sve ih pročitati! Kao kustos sadržaja za moderni web, vaš zadatak je povećati propusnost. Što se više izražavate s manje riječi, bolje ste na svom poslu.


Zašto su slike (tako vrlo) važne?

Postoji mnogo, mnogo razloga zbog kojih biste (i trebali) koristiti slike u svojim postovima i člancima:

  • Slike služe kao vizualni poticaj za poziv na radnju (CTA). CTA može biti bilo koji zadatak koji vaš posjetitelj želi obaviti. Uobičajeni CTA-ovi uključuju pretplatu na biltene, dijeljenje članka preko društvenih medija ili kupnju vašeg proizvoda.
  • Slike poboljšavaju vezu koju pisac nastoji uspostaviti s čitateljem.
  • Slike prenose više kroz manje.

Stoga je najvažnije da u prezentacijama koristimo prave slike (blog blog, neformalno izvješće, stvarna PowerPoint prezentacija itd.) Kako bismo ostavili trag u čitateljskom umu!

Ali čekaj! Postoji problem!

Slike zauzimaju oko 63% propusnosti koju koriste moderne web stranice, tako da je sve važnije da su pravilno optimizirane za brzinu.

Kašnjenje u učitavanju stranice od jedne sekunde može smanjiti stopu konverzije za 7%

Ustanovili smo da ljudi imaju kratko razdoblje pažnje (jedan od nedostataka moderne stope proizvodnje sadržaja). Čak i ako koristite prave slike, ako se ne učitaju u prihvatljivom vremenskom okviru, interes se gubi.

10 najčešćih pogrešaka optimizacije slike

Većina web lokacija ima problem – koriste izvrsne slike, ali način na koji se slika služi posjetitelju je loš. Velika veličina, loša optimizacija, neispravan format, nepotrebno velike dimenzije (veličine), neodgovarajuće slike i neoprezne SEO greške, neki su od najčešćih problema s kojima se suočavaju moderni web. U današnjem ćemo članku riješiti ove probleme!

1. Velike dimenzije

“Extra pomfrit” nije uvijek dobar

Ovo je klasik. Pretpostavimo da vam je potrebna fotografija veličine 150 × 150 piksela na stranici “Tima” vaše web lokacije. Obično ćete koristiti glavu od 5MP, urediti je i napokon je prenijeti.

Jeste li uočili problem? Neki ljudi izravno prenose stvarnu sliku od 5MP! WordPress tema učitati će cijelu sliku od 5MP (to je 5 x 10 ^ 6 piksela) i tražiti od preglednika da je smanji na potrebnu dimenziju od 150x150px. U osnovi, preglednik prikazuje samo 0,0045% izvorne slike!

Gubite propusnost svojeg i posjetitelja (čak i ako sliku poslužujete putem mreže za isporuku sadržaja poput Stackpath CDN), trošeći više prostora na tvrdom disku i povećavajući vrijeme učitavanja. Nijedna od značajki nije nešto što biste željeli na svojoj web lokaciji.

Uvijek promijenite veličinu (a pod veličinom mislim na smanjivanje) sliku do potrebnih dimenzija, a zatim je prenesite!

ImageResize.org

Za to vam ne treba fantastični softver – postoje besplatni online alati poput ImageResize.org pomoću kojeg možete brzo promijeniti veličinu i optimizirati svoje slike. Samo prenesite i prilagodite postavke fotografija. Kada završite, preuzmite optimiziranu sliku za upotrebu na svojoj web lokaciji. Oni također nude brzu Kompresor slike ako samo želite smanjiti veličinu datoteke.

Korisni alati:

  • IrfanView odlična je besplatna freeware za snimanje veličine veličine slika s naprednim opcijama poput optimizacije, vodenog žiga i obruba.
  • ImageMagick je napredni open-source alat koji se može koristiti u raznim programskim jezicima i operativnim sustavima. Možete napisati vlastitu aplikaciju ili je jednostavno koristiti putem naredbenog retka.
  • ImageOptim (Mac) omogućuje vam da povučete cijele mape i brzo optimizirate više slika.
  • TinyPNG je mrežni alat za kompresiju slike s API-jem.

2. Pogrešan format slike

shutterstock_108312266

Format koji se koristi za sliku igra vitalnu ulogu. Kao opće pravilo, upotrijebite PNG za vektorsku grafiku i računalno generirane slike kao što su isječak slike itd JPEG za fotografije ili slike raznih boja. Detaljno objašnjenje potražite u ovom strašan odgovor StackOverflow.

3. Ne koristite progresivne JPEG datoteke

Bazni (normalni) JPG u odnosu na progresivni JPG

Bazni (normalni) JPG u odnosu na progresivni JPG

Za običnog čovjeka, JPEG su dvije vrste – osnovni i progresivni. Vizualno su oboje isti. Razlika leži u načinu na koji su učitani:

  • Osnovni JPEG ima samo jedan sloj – koji sadrži cijelu sliku. Na zahtjev se cijela slika učitava u jednom potezu.
  • Progresivni JPEG sastavljaju sliku s više slojeva. Progresivna JPEG slika učitava se sloj po sloj, koji se postupno povećava u kvalitetu, što vam u konačnici daje prikaz bez gubitaka.
IrfanView podržava paketnu pretvorbu s progresivnim JPEG-om

IrfanView podržava paketnu pretvorbu s progresivnim JPEG-om

Svi glavni izmjenjivači slike omogućuju vam spremanje slika u obliku progresivnog JPEG-a.

4. Ne koristite Lazy Load

Lazy-Učitavanje je izvrstan ušteda resursa tehnika u kojoj se slika učitava samo kad se posjetitelj pomakne do okvira slike. Pogledajte članak – “15 automobila koji najefikasnije troše u 2014. godini”. Ovaj će članak, naravno, sadržavati najmanje 15 slika. I bez obzira na visinu uređaja za prikaz – monitor, tablet ili pametni telefon, ne možete stati na svih 15 slika u okviru prikaza. Za pregled svih slika morate se pomaknuti prema dolje.

Ako je omogućeno Lazy Loading, slike će se učitavati samo kada je posjetitelj u blizini slike. Drugim riječima, slike se počinju učitavati tek kad se pomaknete prema dolje da biste ih pregledali. No prvih nekoliko slika učitavaju se trenutačno jer ste već u okviru pregleda. Lazy Loading štedi propusnost na oba kraja i poboljšava vrijeme učitavanja! Lazy Loading možete koristiti u WordPress-u pomoću BJ Lazy Load Plugin.

5. Ne koristi CDN

CDN-mreža

Korištenjem mreže za isporuku sadržaja (CDN) poslužit će se slika s poslužitelja koji je fizički najbliži lokaciji posjetitelja. Ako posjetitelj iz Indije zahtijeva sliku, a CDN ima POP (točku prisutnosti ili jednostavno poslužitelj) u Tokiju i New Yorku, slika će se poslužiti sa poslužitelja koji se nalazi u Tokiju.

Kada imate značajan promet, postavite CDN s WordPressom kako biste smanjili vrijeme učitavanja i stekli ukupne performanse. Ovdje na WPExplorer, preporučujemo CloudFlare. Za novorođena mjesta preporučujemo popis besplatnih CDN usluga koje biste mogli isprobati.

6. Ne deklariranje atributa ‘alt’

Atribut ‘alt’ opisuje sliku tražilice. Tekst koji unesete u ovo polje bit će prikazan korisniku u slučaju da se slika ne može učitati. Puno ljudi ima tendenciju da ta polja ostave prazna. To je vrlo štetno za SEO, a vi gubite na prometu. Uvijek pokušajte uključiti ključne riječi web lokacije u alt oznaku slika.

7. Ne optimiziranje slika

olovke bojice točaka

Optimizirane slike su 40% svjetlije od uobičajenih slika. To poboljšava vrijeme učitavanja i štedi propusnost. S Freddyjeve liste najboljih dodataka za optimizaciju slike WordPressa, preporučujemo WPSmush.it da optimizirate svoje slike. Kraken.io također je sjajna internetska opcija za komprimiranje slika u trenutku. Ovdje koristimo stalno na WPExplorer-u da optimiziramo istaknute slike prije nego što ih pošaljemo u postove i demo teme.

8. Odzivne slike

Ovdje je odgovorni web dizajn

Ovdje je odgovorni web dizajn

Čak i ako vaša web lokacija reagira, ne znači da su vaše slike. To znači da se zaglavlje slike koje koristi za 22 “ekran radne površine također poslužuje na 5” iPhoneu. Kada prenesete sliku, WordPress promijeni veličinu slike u više verzija – sličica, srednja, puna veličina itd. Programer može to promijeniti. Dobro kodirana tema poslužit će verziji slike srednje veličine i tako uštedjeti propusnost.

Picturefill.WP dodatak će zamijeniti slikovne oznake novim element koji bi poslužio različite slike na temelju medijskih upita. Prilično je eksperimentalna (to znači da postoje greške) i ne bi se trebala upotrebljavati na web mjestu uživo.

9. Naslovi slika

Naslovi nisu uvijek potrebni, iako su u nekim slučajevima potrebni – poput snimaka zaslona u vodiču. Slike naslova pomažu čitateljima da bolje razumiju temu, istovremeno pojačavajući vaš SEO.

10. Naziv datoteke slike

Razmislite o nazivu datoteke s gledišta tražilice. Upotrijebite isti tekst kao u oznaci “title” slike. Također, pokušajte uključiti ključne riječi koje su najrelevantnije za vaše web mjesto.

Zaključak

heroj-11

SEO se slika od presudne je važnosti za bilo koju web stranicu – staru ili novu. Ljudi koji implementiraju image SEO propisno (može biti prilično svakodnevni), stand da dobijete značajnu količinu organskog prometa (najbolja vrsta prometa) u dugoročno gledano.

Imate fenomenalnu tehniku ​​optimizacije? Otpustiti vatru!

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