Kako optimizirati slike za svoju web lokaciju i učiniti ih da rade na svim uređajima (responzivne slike za mobilne uređaje, stolna računala i tablete)

Zašto se truditi optimizirati slike? Da te pitam ovo; kada ste posljednji put vidjeli web stranicu bez ikakvih slika na njoj? "Nikada" bio bi pravi odgovor. ��‍♂️ Slike su jednostavno previše bitne. A čak se i ne radi o toj fotografiji vrijednoj crte koja će ići zajedno s vama "10 savjeta za mrežni marketing" Post. Slike su korisne u više svrha. Razmislite o izgledima, dizajnerskom elementu, logotipovima, profilnim slikama i, da, i blogovskim slikama.


Iskreno, ne možete imati web mjesto 2020. godine a da na njemu ne koristite barem nekoliko slika. Kako se kaže, slike nisu toliko jednostavne za shvatiti vlasnika web stranice. Čak i postavljajući po strani izazove korištenja slika i gdje, postoje i problemi prikazivanja tih slika s čisto tehničkog stajališta:

  • Kako isporučiti odgovarajuće slike na više uređaja?
  • Kako ih učiniti sjajnim na svim tim uređajima?
  • I, najvažnije, kako osigurati da se učitaju u pristojno vrijeme?

Ovo su pitanja na koja danas odgovaramo. Evo vašeg konačnog vodiča kako optimizirati slike za svoju web lokaciju i učiniti da one izgledaju sjajno na svim uređajima:

Kako optimizirati slike za svoju web lokaciju i učiniti ih da rade na svim uređajima

�� Zašto nas slušati?

Slike su u posljednje vrijeme za nas kritična tema, a to je zbog jednog od novijih alata u našoj obitelji – Optimole.

Optimole je usluga optimizacije slike koja se postavlja i zaboravi & alat. Smatramo da je to najbolje takvo rješenje na webu i to možemo dokazati! Ali to je razgovor za drugi put. Bilo kako bilo, tijekom godina naučili smo puno o tome kako pravilno optimizirati slike. Želimo danas s vama podijeliti dio tog znanja.

�� Zašto biste trebali optimizirati slike na svojoj web stranici

Slike, osim što izgledaju sjajno, također zauzimaju znatnu količinu prostora na disku i propusnosti. Preciznije, slike čine nešto od 30% do 85% veličine standardne web stranice.

test brzine

To je ogromno – a nije uklanjanje slika opcija – tako da je najbolje što možemo učiniti umjesto toga naučiti kako optimizirati slike na način koji jednostavno zauzima manje prostora na disku.

Dobici mogu biti ogromni, posebno kad se radi o ponovljenim slikama – slikama koje je potrebno učitati na svakoj pojedinoj web stranici. To su stvari poput pozadine, dizajnerskih elemenata, logotipa, ikona itd. Ponekad optimizacija samo jedne pozadinske slike može rezultirati rezanjem veličine vaše stranice za 70%+.

Pogledajte ovaj primjer:

usporedba veličine stranice prije i nakon što optimizirate slike

Ali čekaj, postaje sve gore! Ako borba za opću performansu slike nije bila dovoljna, tu je i pokretno područje ��, i donosi potpuno novi niz izazova:

Prvo, vjerojatno ne biste trebali prikazivati ​​isti skup slika posjetiteljima radne površine i posjetiteljima mobilnih uređaja. Konteksti su vrlo različiti – to uključuje veličine ekrana, orijentaciju (obično u portretu), pa čak i način razmišljanja osobe koja čita.

povrh toga, podaci sugeriraju da mobilni dizajni s manje slika obično imaju bolji učinak u smislu konverzija.

Kad se sve zbroji, postoji nekoliko stvari o kojima moramo voditi računa o isporuci odazivnih slika na više uređaja:

  • prvo optimizirajte slike za taj određeni uređaj
  • provjerite jesu li slike komprimirane na maksimalno prihvatljivu razinu kako biste zajamčili najbrža vremena učitavanja
  • prikaz optimalnog broja slika s obzirom na uređaj i zaslon

Kako optimizirati slike i isporučiti ih na svim vrstama uređaja

Optimalna obrada slika i njihovo što brže isporučivanje posjetitelju sadrži nekoliko komponenti. U ovom ćemo vodiču proći kroz njih sve:

Ick Odaberite ispravni format

Počnimo s pitanjem godina: PNG ili JPG?

Većina ljudi kaže "JPG cijelo vrijeme!" Ali to nije baš ispravno:

PNG u odnosu na JPG

Da, većinu vremena ili barem u najčešćim scenarijima za ono što nam možda treba, JPG-ovi zauzimaju manje prostora na disku, a samim tim i manje propusne širine..

Ali ključna riječ ovdje je "najčešćih scenarija." U stvari, ako imate složenu sliku s puno boja i prijelaza boja (aka. Puno "informacije o boji"), tada će JPG-i doista biti bolji. Zamislite standardne fotografije. Oni djeluju bolje kao JPG-ovi.

No ako imate sliku koja je malo jednostavnija, PNG će pobjeđivati ​​stalno.

Razmotrimo slijedeći primjer. Evo četiri slike:

slika 1-aslika 1-a: JPG

slika 1 bslika 1-b: PNG

slika 2-aslika 2-a: JPG

Slika 2-bslika 2-b: PNG

  • slika 1-a je 312 KB
  • slika 2-a je 196 KB

Pokušajte pogoditi veličine druge dvije slike …

Tvoj odgovor:

pogrešno!

  • slika 1-b je 1,3 MB (ovo ste vjerojatno pogodili)
  • slika 2-b je 106 KB (čekaj, što ?!)

Kao što vidite, PNG pobjeđuje za jednostavne slike s malo boja.

Razmislite o stvarima poput snimaka zaslona, ​​jednostavnih ilustracija itd.

�� Lekcija 1:

Nemojte uvijek ići za JPG. Predvidite koliko će se slika temeljiti na njenom sadržaju i zatim upotrijebite ispravnu vrstu slike.

E sad za malo pravovremenije pitanje: SVG? WebP?

SVG i WebP

SVG i WebP malo su rjeđe vrste slika na webu, ali su sjajne sve dok ih koristite onako kako bi se trebali koristiti. Dopustite mi da pojasnim:

  • SVG je XML zasnovan na vektorskom formatu. Sadržaj slike može se definirati u jednostavnoj XML datoteci – istoj XML datoteci koju biste koristili u druge osnovne svrhe obrade podataka. To čini SVG dobrim formatom, sve dok se bavite jednostavnom vektorskom slikom.
  • WebP je Googleov novi format. Hvale se činjenicom da je WebP 25-34% manji od usporedivih JPEG-ova i 26% manji od usporedivih PNG-ova.

Pa što je ulov? Možete li optimizirati slike tako da ih sve pretvorite u SVG-ove i WebP-ove?

Prvi, SVG. U osnovi, SVG koristite samo ako (A) slika se može učinkovito spremiti kao SVG i (B) ako vam ne smeta što ljudi uzimaju taj SVG i mijenjaju ga.

Kao što rekoh, SVG se temelji na XML-u, što znači da je mijenjanje SVG grafike zaista jednostavno. To nije uvijek nešto što želite – posebno kad se radi o logotipu vašeg branda ili drugim ključnim grafikama.

U većini scenarija, SVG-ovi nisu format koji ćete koristiti vrlo često.

Sada, na WebP. Format je izvrstan i u većini slučajeva doista štedi puno prostora na disku baš onako kako je obećano. Pogledajte ove dvije primjere slike:

jpg slika primjer

primjer webp slike

  • originalna JPG verzija je 204 KB
  • WebP iznosi 58 KB

Trik je u tome što svi preglednici ne podržavaju WebP. U stvari, čak ni ne možete vidjeti webP sliku koju sam gore koristio. U vrijeme pisanja usluge WebP radi u preglednicima Google Chrome, Firefox, Edge i Opera. Naravno, starije verzije ne podržavaju format.

To u praksi znači da dodavanje WebP slike nije tako jednostavno kao dodavanje JPG ili PNG.

Tehnički, možete koristiti takav kod ovako:

… ali ako korisnikov preglednik ne podržava format, umjesto toga prikazat će poznatu ikonu slomljene slike.

Da biste učinkovito koristili WebP, trebali biste osigurati zamjenske slike. Na primjer:

To znači puno više posla. Zamislite da morate stvoriti takvu oznaku svaki put kada želite dodati webP sliku u blog blog ili stranicu. I dopustite da vas zaustavim tu, ne, WordPress ne podržava WebP izvorno, tako da ćete to doista morati raditi rukom..

Ipak preporučam da idete po ovoj kompliciranoj ručnoj WebP ruti kad god se bavite slikama koje se pojavljuju na više stranica unutar vaše web lokacije ili slikama ogromnih veličina i treba vam svaki alat koji vam je potreban da na neki način smanjite veličinu.

Slike možete spremiti kao WebP u Photoshop ili koristiti takav alat XnConvert (besplatno).

�� Lekcija br. 2:

Uopće se nemojte koristiti SVG-ove ako želite brzo optimizirati slike. Vrijeme koje ćete izgubiti stvarajući ih se neće isplatiti (iako se ne slažete; evo dobro alternativni uzeti). PNG-i će se mnogo brže koristiti i neće biti mnogo lošiji u pogledu potrošnje diskovnog prostora.

Koristite WebP kada bavite slikama koje se pojavljuju na više stranica ili slikama koje su dovoljno velike. To je slučaj ako ne možete automatski upravljati WebP obradom, što se može učiniti s nekim dodatnim alatima. U takvom se slučaju upotrebljava WebP svugdje. O tome ćemo razgovarati u sekundi.

Stisnite slike

Kompresija slike je poput magije. Da ti pokažem:

To je ista JPG slika, spremljena samo na drugačijoj razini kompresije (koja se često naziva i razina kvalitete):

krtica-100%100% kvaliteta

krtica-95%95% kvaliteta

krtica-85%85% kvaliteta

krtica-50%50% kvaliteta

Ako ste poput većine ljudi, tada vas prva tri izgledaju isto. Četvrti počinje gledati "malo gore." (Desnim klikom kliknite i "Otvorite sliku u novoj kartici")

Evo koliko prostora na disku zauzima svaka od ovih slika:

  • 100% kvaliteta: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Ogromno, zar ne ?! Možete prijeći od ~ 1 MB do ~ 500 KB bez primjetnog gubitka u kvaliteti, samo promjenom kompresije sa 100% na 95%.

Ovim komprimiranjem JPG-a mogu se baviti prilično automatski raznim alatima, što je odlična vijest. No, nisu sve slike stvorene iste, pa ponekad možete dobiti slike u redu uz slike lošeg izgleda iako su prošle isti postupak kompresije..

Sveukupno, možete napraviti korak dalje ovdje i prilično značajno smanjiti kvalitetu svojih JPG-ova. Istina je da posjetitelji vaše web lokacije svuda ne brinu za oštre slike.

Ok, trebao bih pojasniti; da, kad im želite nešto pokazati – poput slike koja je ključna za dio sadržaja, npr. slike proizvoda, fotografije hotelske sobe – onda budite sigurni da bi one trebale biti oštre.

Ali u drugim područjima možete biti malo opušteniji. Na primjer, pozadine ne moraju biti 100% jasne. Općenito, sve slike s kojima posjetitelj nije izravno angažiran mogu biti slabije kvalitete.

Dva moja omiljena alata koji vam mogu ovdje pomoći su:

ImageOptim za kompresiju radne površine na Macu. Možete jednostavno zgrabiti sliku sa radne površine, povući je i staviti na ImageOptim, a zatim alat učini svoju magiju i prebrisu izvornu sliku kada je gotov.

Zatim možete dobiti tu sliku i normalno je prenijeti na svoju web lokaciju.

ImageOptim - izvrstan alat za optimizaciju slika na radnoj površini

Drugi alat je Optimole. Ovaj alat uvelike redefinira kako se slike rade na web stranicama. U svrhu ove rasprave, recimo samo da je zaista učinkovita kada želite optimizirati slike u vašoj medijskoj biblioteci.

optimole - izvrstan alat za optimizaciju slika u oblaku

Sada na PNG-ove. Baš poput JPG-ova, i PNG-ovi se mogu komprimirati. Ali ovaj put, nema nedostataka u pogledu gubitka kvalitete. PNG-ovi se mogu učinkovito komprimirati pomoću algoritama bez gubitaka.

Drugim riječima, uvijek stisnite svoje PNG-ove!

Pogledajte ove tri slike:

KWF-1
KWF 2

KWF-3

Izgledaju isto, ali zapravo zauzimaju:

  • 346 KB
  • 215 KB
  • 100 KB

Pokušajte pogoditi što je to.

Tri alata za komprimiranje slika i njihovo smanjenje:

  • ImageOptim opet. Ali ovo zahtijeva puno vremena s PNG-ovima, pa ako ih imate mnogo za obradu, možda biste htjeli napraviti sebi šalicu kave dok alat radi.
  • ImageAlpha. Mnogo brži od ImageOptima. Ovo je moje rješenje za PNG-ove na radnoj površini.
  • Optimole. Ne iznenađuje, Optimole se također nosi s kompresijom PNG-a. Sve se događa na autopilotu.

�� Lekcija # 3:

Stisnite JPG-ove kako biste postigli prihvatljivu razinu kvalitete u odnosu na prostor na disku.

Uvijek komprimirajte svoje PNG-ove.

Ve Poslužite slike ispravnih dimenzija

To je možda najvažniji aspekt cjeline "responzivne slike" zagonetka. Kao što znamo, postoje desetke, ako ne i stotine različitih veličina zaslona, ​​i nekako se moramo pobrinuti da naše slike izgledaju sjajno na svima njima.

Jednostavno rješenje? Poslužite veliku sliku … uvijek se može smanjiti, zar ne? Pa, tehnički je to točno, ali u praksi će to izgubiti veliku propusnost i učiniti da se vaše web mjesto stvarno sporo učitava na većini uređaja.

Bolje rješenje je rasporediti sve slike na odgovarajuće veličine koje preferiraju najčešće uređaji i zatim ih služiti u skladu s tim.

Kao što biste očekivali, za postizanje ove slike potrebne su vam različite verzije iste slike.

Jedan od načina da se to postigne je započeti s osnovnom širinom vašeg dizajna i najvećom veličinom slike koja se može upotrijebiti, a zatim od tamo smanjite neke uobičajene uređaje i točke prijeloma.

Na primjer, većina web lokacija ne prelazi oznaku od 1100 px za širinu bloka sadržaja, tako da možete pretpostaviti da je i najveća slika koja se u tom slučaju može prikazati i 1100 px u širinu..

Zatim možete stvoriti prijelomne točke za 800 px i 550 px (uobičajene vrijednosti) za pokrivanje scenarija tableta i mobilnih uređaja. Iako vam ovo neće dati 100% savršene rezultate na svim uređajima, vi se barem u razumnoj mjeri optimizirate i svoje slike držite pod nadzorom.

S ovim iza sebe, sada morate stvoriti pregršt različitih verzija svake slike koje želite koristiti na svojoj web lokaciji.

Evo primjera kako postupati sa stvarnim kodom prikaza:

Čarolija atributa srcset je da preglednik pregledava što je u njemu, a zatim bira najbolju sliku na osnovu uređaja koji se koristi.

Još jedna prilagodba koju možete vidjeti iznad je atribut veličine. Ovaj govori pregledniku kako se slika treba ponašati na određenim ekranima. U ovom će slučaju slika biti 1100 px ako se gleda na prikazima većim od 1100 px, dok će na manjim uređajima zauzeti cijeli vidni okvir.

Ova vrsta rješenja osigurava da slika ne zauzima čitav 4K zaslon širok 3840 piksela. Međutim, on će i dalje zauzimati cijeli zaslon kada ga pregledate na mobilnom.

Ova učinkovita upotreba atributa veličine omogućuje vam da vaše slike stvarno odgovore.

⭐ Pro trik: potražite slike dimenzija 10% manje od potrebnih, a zatim pustite preglednik da ih poveća. Tako ćete uštedjeti dodatni prostor i širinu pojasa. Na primjer, ako vam je potrebna slika veličine 500 × 500 px, možete smanjiti sliku na 450 × 450 px, a zatim dopustite pregledniku da je skalira do 500. To ovisi o slici, ali u većini slučajeva korisnik neće primijetiti.

�� Lekcija br. 4:

Koristite ispravne veličine slike za svoj dizajn.

Stvorite prijelomne točke.

Izradite više verzija iste slike da pokrijete prijelomne točke.

Za prikaz slika koristite atribute srcset i veličine.

Optimizirajte slike za Retina i HiDPI zaslone

Drugi kraj spektra dimenzija slike tiče se slika prilagođenih HiDPI.

Priča je da zasloni na radnoj površini postaju sve veći i veći, a njihovi se pikseli sve više gube. Nije rijetkost ovih dana imati 4K zaslon upakiran u 15-inčno prijenosno računalo. 4K rezolucija je 3840 × 2160 px, tako da svaki od tih piksela mora biti stvarno malen.

To stvara probleme web lokacijama. U osnovi, ako je vaša web lokacija definirana kao 1100 px tada, u normalnim uvjetima, ona bi zauzela samo otprilike 25% dostupnih nekretnina na ekranu od 4K. Ovo nije optimalno. Srećom, stvari ne funkcioniraju tako.

Da ne bi došlo do problema, ti se zasloni visokih rezolucija ponašaju kao da su upola manji (ja pojednostavljujem, ali čujte me van). Dakle, umjesto da vaša web lokacija široka 1100 px zauzima mali dio HiDPI ekrana, povećava se i udvostručuje, uzimajući 2200 px i puno bolje ispunjavajući zaslon.

Ovaj postupak omogućuje zaslonima da postaju oštriji i oštriji bez da sve izgleda sitno.

Međutim, ova praksa nije bez svojih grešaka. Uglavnom, vaše slike imaju ogroman udarac. Tekst se lako povećava bez gubitka kvalitete. Fontovi su imuni na skaliranje. Slike nisu. Kao izravni rezultat svaka će slika koja nije spremna za HiDPI zaslone izgledati zamagljeno i jako!

Da biste to popravili, morate isporučiti umanjene slike za svaki omjer zumiranja. Evo nekoliko jednostavnih kodova:

(Ako preglednik ne podržava srcset, koristit će se standardni src.)

Sad kad kažem "umanjene slike," Zapravo mislim da bi trebao krenuti s drugog kraja. Započnite s ogromnom slikom (označite je 3x), zatim je smanjite i smanjite je (u 2x), a na kraju je napravite 1x i koristite je kao zadanu sliku.

�� Lekcija br. 5:

Provjerite jesu li vaši logotipi, slike robne marke i sve slike korištene u vašim postovima i stranicama spremne za HiDPI zaslone.

Odgodite učitavanje slike

To je u principu jednostavno; sve slike koje se nalaze iznad preklopa trebaju se odmah učitati (pri učitavanju stranice). Sve ostalo se može odgoditi za kasnije, pa čak i jedno "lijeno opterećen."

Lažno učitavanje je učitavanje slike na zahtjev. Na primjer, slike se učitavaju samo djelić sekunde prije nego što ih korisnik treba – ni prije, ni kasnije. I to "ni prije, ni kasnije" dio je ovdje ključan.

U idealnom bi se slučaju slika trebala učitati netom prije nego što se provuče u vidno polje. Znači, korisnik ne bi trebao vidjeti rezervirano mjesto prije nego što se slika pojavi. Ako se to dogodi, oni mogu pomicati sliku bez da se uspije učitati u vremenu – što nije sjajan način za optimizaciju slika.

Kako se kaže, lijeno učitavanje nešto je jednostavno za napraviti na WordPress web lokacijama. Možete se lijeno učitati s JavaScript / jQuery, a čak možete i sami napisati kôd za to ako želite. Alternativno, možete dobiti dodatak poput a3 Lijeno opterećenje, ili možete koristiti Optimole, koji sadrži modul za lijeno učitavanje.

�� Lekcija br. 6:

Lažne slike učitavaju se ispod nabora.

�� Dostavljajte slike putem CDN-a

Mreža isporuke sadržaja poput je šifre za brzinu web lokacije. Varate jer više ne ubrzavate web mjesto, nego nekome drugom govorite da preuzme teret i dostavi podatke web lokacije posjetitelju za vas..

�� Ovdje smo detaljnije razgovarali o CDN-ima, provjerite.

TL; DR je da CDN-ovi iskorištavaju mrežu poslužitelja koji svi drže kopiju vaše web lokacije i zatim je dostavljaju posjetitelju iz najbližeg raspoloživog mjesta. Ovo će uvijek biti brže od isporuke s vašeg glavnog poslužitelja.

Slikovni CDN-ovi djeluju gotovo isto, ali fokusiraju se samo na, pogađate, slike.

Većinu vremena operacija je s vašeg gledišta besprijekorna. Sve slike na vašoj web lokaciji zamjenjuju se njihovim CDN verzijama (što znači da se URL-ovi slika mijenjaju).

  • Ruksak za letenje ima ugrađen popularni CDN za slike. Možete ga koristiti besplatno, što je sjajno. Glavno ograničenje je da djeluje samo sa slikama u vašim postovima, na stranicama i s prikazanim slikama. Ne djeluje na slike koje čine vaš dizajn (dijelovi teme, izgled itd.). To su slike koje bi zaista mogle koristiti neki CDN-in.
  • Optimole ima ugrađeni CDN kao dio glavne značajke optimizacije slike. Ovo nije ograničeno samo na vaše postove i stranice.

�� Lekcija br. 7:

Priključite svoju web lokaciju na slikovni CDN (Jetpack ili Optimole) ili opći CDN (MaxCDN / StackPath).

Služite malim slikama korisnicima na sporim vezama

Nije bitna samo veličina zaslona kada odlučuje o vrsti slike koju bi korisnik trebao vidjeti. Vjerojatno je još važnije da su na sporoj internetskoj vezi, stvarno ne žele čekati 10 sekundi da se slika učita.

U tim je slučajevima puno bolja ideja smanjiti kvalitetu slika u zamjenu za vrijeme učitavanja. Korisnici koji se sporije povezuju cijenit će da slike uopće mogu vidjeti.

To se može dogoditi pomoću mrežnog API-ja za informacije. Evo zgodnog vodiča o tome kako sve to funkcionira ako ga želite implementirati rukom.

Ako želite da se njime upravlja autopilotom, Optimole!

�� Lekcija br. 8:

Poslužujte manje i komprimirane slike korisnicima na sporijim internetskim vezama.

�� Alati alata za alate!

Uz put sam spomenuo i niz alata koji možete koristiti za učinkovitiju isporuku slika na vašoj web lokaciji. Evo sažetka toga:

  • Optimole – omogućava vam da automatski optimizirate slike, komprimira ih, odabere pravu veličinu slike za posjetiteljski prozor, posluži sliku putem CDN-a, lijeni se učitavaju slike, radi s sporijim brzinama veze.
  • ImageOptim i ImageAlpha – podnijeti kompresiju slike na radnoj površini na Macu. Možeš koristiti TinyPNG na Win. Učinite to prije prijenosa slika na vaše web mjesto.
  • XnConvert – omogućuje vam pretvaranje slika u WebP.
  • a3 Lijeno opterećenje dodatak – lijeni učitavanje svih slika.
  • Ruksak za letenje dodatak – dolazi s besplatnim CDN-om za slike.
  • MaxCDN / StackPath – općeniti CDN koji će se brinuti za cijelu stranicu, a ne samo za slike.

alate za optimizaciju slika

�� Daljnje čitanje:

  • Zamislite vs WP Smush vs ShortPixel vs Optimole: Koji je najbolji za optimizaciju WordPress slika? Usporedba između glave
  • Besplatne slike za blogove – kako ih dobiti & koristite ih učinkovito (upozorenje! neočiti savjeti, na temelju podataka)
  • 11 načina za ubrzanje performansi WordPress-a
  • Optimizacija brzine web stranice: kako to učiniti u 2019. godini
  • Najbrži WordPress hosting – početnički vodič za njegovo pronalaženje

��‍♂️ TL; DR:

Evo sažetka svih pojedinačnih lekcija,

Lekcija 1:

Nemojte uvijek ići za JPG. Predvidite koliko će se slika temeljiti na njenom sadržaju i zatim upotrijebite ispravnu vrstu slike.

Lekcija br. 2:

Uopće se nemojte koristiti SVG-ove ako želite brzo optimizirati slike. Vrijeme koje ćete stvoriti otpada neće vam se isplatiti (iako se ne možete složiti). PNG-i će se mnogo brže koristiti i neće biti mnogo lošiji u pogledu potrošnje diskovnog prostora.

Koristite WebP kada bavite slikama koje se pojavljuju na više stranica ili slikama koje su dovoljno velike. To je slučaj ako ne možete automatski upravljati WebP obradom, što se može učiniti s nekim dodatnim alatima. U takvom se slučaju upotrebljava WebP svuda. O tome ćemo razgovarati u sekundi.

Lekcija # 3:

Stisnite JPG-ove kako biste postigli prihvatljivu razinu kvalitete u odnosu na prostor na disku.

Uvijek komprimirajte svoje PNG-ove.

Lekcija br. 4:

Koristite ispravne veličine slike za svoj dizajn.

Stvorite prijelomne točke.

Izradite više verzija iste slike da pokrijete prijelomne točke.

Za prikaz slika koristite atribute srcset i veličine.

Lekcija br. 5:

Provjerite jesu li vaši logotipi, slike robne marke i sve slike korištene u vašim postovima i stranicama spremne za HiDPI zaslone.

Lekcija br. 6:

Lažne slike učitavaju se ispod nabora.

Lekcija br. 7:

Priključite svoju web lokaciju na slikovni CDN (Jetpack ili Optimole) ili opći CDN (MaxCDN / StackPath).

Lekcija br. 8:

Poslužujte manje i komprimirane slike korisnicima na sporijim internetskim vezama.

Javite mi što mislite o cijelom izazovu da optimizirate slike za web što je više moguće. Također, što radite sa svojim slikama kako bi se brže učitale? Podijelite u komentarima.

Ne zaboravite se pridružiti našem tečaju o ubrzanju ubrzanja stranice WordPress. Pomoću nekih jednostavnih ispravki možete smanjiti vrijeme učitavanja za čak 50-80%:

Izgled, prezentacija i montaža od strane Karol K.

* Ovaj post sadrži partnerske veze, što znači da ako kliknete na jednu od veza proizvoda i kupite proizvod, primit ćemo malu naknadu. Bez brige, i dalje ćete plaćati standardni iznos, tako da nema troškova.

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