Kaip optimizuoti savo svetainės vaizdus ir priversti juos dirbti visuose įrenginiuose (reaguojantys vaizdai mobiliesiems, darbalaukiui, planšetiniams kompiuteriams)

Kodėl verta nerimauti dėl vaizdų optimizavimo? Leisk man to paklausti; kada paskutinį kartą matėte svetainę, kurioje nėra jokių vaizdų? "Niekada" būtų teisingas atsakymas. ��‍♂️ Vaizdai yra tiesiog pernelyg svarbūs. Ir tai net ne apie tą apgailėtiną vertę vertybinių popierių nuotrauką, kuri bus jūsų "10 internetinės rinkodaros patarimų" paštu. Vaizdai yra naudingi keliems tikslams. Pagalvokite apie maketus, dizaino elementą, logotipus, profilio paveikslėlius ir, taip pat, tinklaraščio vaizdus.


Jei atvirai, 2020 m. Jūs neturite svetainės, joje nenaudodami bent kelių nuotraukų. Atsižvelgiant į tai, vaizdai nėra taip lengvai suprantami svetainės savininkui. Net atmetus iššūkius, kuriuos vaizdus naudoti ir kur, yra ir tų vaizdų rodymo grynai techniniu požiūriu problemų:

  • Kaip pateikti reaguojančius vaizdus keliuose įrenginiuose?
  • Kaip padaryti, kad jie visuose įrenginiuose atrodytų puikiai?
  • Ir, svarbiausia, kaip įsitikinti, kad jie įkeliami tinkamu laiku?

Į šiuos klausimus šiandien atsakome. Čia yra jūsų pagrindinis vadovas kaip optimizuoti savo svetainės vaizdus ir padaryti juos nuostabius visuose įrenginiuose:

Kaip optimizuoti savo svetainės vaizdus ir priversti juos dirbti visuose įrenginiuose

�� Kodėl klausykite mūsų??

Vaizdai pastaruoju metu mums buvo kritinė tema, ir tai yra dėl vieno iš naujesnių įrankių mūsų šeimoje – Optimole.

„Optimole“ yra vaizdo rinkinio optimizavimo paslauga & įrankis. Manome, kad tai geriausias sprendimas internete ir galime tai įrodyti! Bet tai jau kito laiko pokalbis. Bet kokiu atveju, bėgant metams, mes sužinojome daug apie tai, kaip tinkamai optimizuoti vaizdus. Šiandien norime pasidalinti kai kuriomis iš šių žinių.

�� Kodėl turėtumėte optimizuoti savo svetainės vaizdus

Be to, kad vaizdai atrodo nepriekaištingai, jie taip pat sunaudoja daug vietos diske ir pralaidumą. Tiksliau, vaizdai sudaro nuo 30% iki 85% standartinio tinklalapio dydžio.

greičio bandymas

Tai yra didžiulė reikšmė – ir tai ne taip, kaip pašalinti paveikslėlius – todėl geriausia, ką galime padaryti, tai išmokti optimizuoti vaizdus taip, kad užimtų tik mažiau vietos diske..

Pelnas gali būti didžiulis, ypač dirbant su pakartotiniais vaizdais – vaizdais, kuriuos reikia įkelti į kiekvieną atskirą interneto puslapį. Tai tokie dalykai kaip fonas, dizaino elementai, logotipai, piktogramos ir tt Kartais optimizavus tik vieną fono paveikslėlį jūsų puslapio dydis gali sumažėti 70%.+.

Žr. Šį pavyzdį:

puslapio dydžio palyginimas prieš ir po vaizdo optimizavimo

Bet laikykis, darosi dar blogiau! Jei bendros vaizdų našumo kovos nepakanka, tai yra ir mobilioji sfera ��, ir tai kelia visiškai naujus iššūkius:

Pirmiausia turėtumėte nerodyti to paties vaizdų rinkinio darbalaukio lankytojams ir lankytojams mobiliesiems. Kontekstas yra tik labai skirtingas – tai apima ekrano dydį, orientaciją (dažniausiai vertikaliai) ir net skaitančio žmogaus mąstyseną..

Be to, duomenys rodo kad mobiliųjų telefonų dizainas su mažiau vaizdų konversijų atžvilgiu yra geresnis.

Viską sudėjus, yra keletas dalykų, kuriais turime pasirūpinti teikdami reaguojančius vaizdus į kelis įrenginius:

  • pirmiausia optimizuokite vaizdus tam konkrečiam įrenginiui
  • įsitikinkite, kad vaizdai suspausti iki maksimalaus priimtino lygio, kad būtų galima užtikrinti kuo greitesnį įkėlimo laiką
  • rodyti optimalų vaizdų skaičių atsižvelgiant į įrenginį ir ekraną

��‍♂️ Kaip optimizuoti vaizdus ir pateikti juos naudojant visų tipų įrenginius

Keli komponentai yra tai, kad jūsų vaizdai būtų apdorojami optimaliai ir kuo greičiau pristatomi lankytojui. Šiame vadove apžvelgsime juos visus:

�� Pasirinkite tinkamą formatą

Pradėkime nuo amžiaus klausimo: PNG arba JPG?

Dauguma žmonių sako "JPG visą laiką!" Bet tai nėra teisinga:

PNG vs JPG

Taip, dažniausiai arba bent jau dažniausiai pasitaikančiuose scenarijuose, kur mums gali prireikti vaizdų, JPG užima mažiau vietos diske ir todėl mažesnį pralaidumą..

Bet čia yra raktinis žodis "dažniausiai pasitaikantys scenarijai." Tiesą sakant, jei tai, ką turite, yra sudėtingas vaizdas, turintis daug spalvų ir spalvų perėjimų (dar žinomas kaip "informacija apie spalvas"), tada JPG iš tikrųjų bus geresni. Pagalvokite apie standartines nuotraukas. Jie geriau veikia kaip JPG.

Tačiau, jei turite šiek tiek paprastesnį vaizdą, PNG visada laimi.

Apsvarstykite šį pavyzdį. Čia yra keturi vaizdai:

vaizdas-1-a1 vaizdas: JPG

vaizdas-1-b1-b vaizdas: PNG

vaizdas-2-avaizdas 2-a: JPG

vaizdas-2-bvaizdas 2-b: PNG

  • 1-as vaizdas yra 312 KB
  • vaizdas 2-a yra 196 KB

Pabandykite atspėti kitų dviejų vaizdų dydžius …

Tavo atsakymas:

Neteisinga!

  • 1-b paveikslėlis yra 1,3 MB (tai tikriausiai atspėjote)
  • 2-b paveikslėlis yra 106 KB (palaukite, ką ?!)

Kaip matote, PNG laimi už paprastus, mažai spalvų turinčius vaizdus.

Pagalvokite apie tokius dalykus kaip sąsajos ekrano kopijos, paprastos iliustracijos ir kt.

�� 1-oji pamoka:

Ne visada eik į JPG. Numatykite, koks bus vaizdas pagal jo turinį, tada naudokite tinkamą vaizdo tipą.

Dabar šiek tiek tinkamesnis klausimas: SVG? WebP?

SVG ir WebP

SVG ir „WebP“ yra šiek tiek retesni vaizdų tipai žiniatinklyje, tačiau jie abu yra puikūs, jei juos naudojate taip, kaip turėtų būti naudojami. Leiskite man paaiškinti:

  • SVG yra XML pagrįstas vektorinio vaizdo formatas. Vaizdo turinį galima apibrėžti paprastame XML faile – tame pačiame XML faile, kurį naudojate kitiems pagrindiniams duomenų tvarkymo tikslams. Dėl to SVG yra tinkamas formatas, jei dirbate su paprastu vektoriniu atvaizdu.
  • „WebP“ yra naujas „Google“ formatas. Jie gąsdina, kad „WebP“ yra 25-34% mažesnio dydžio nei palyginami JPEG ir 26% mažesni nei palyginami PNG.

Taigi koks laimikis? Ar galite optimizuoti vaizdus paversdami juos visais SVG ir WebP?

Pirmas, SVG. Iš esmės naudokite SVG tik tuo atveju (a) vaizdą galima efektyviai išsaugoti kaip SVG, ir (b) jei neprieštaraujate, kad žmonės imtųsi tos SVG ir ją modifikuotų.

Kaip jau sakiau, SVG yra paremta XML, tai reiškia, kad pakeisti SVG grafiką yra tikrai nesunku. Tai ne visada yra kažkas, ko norite, ypač kai kalbate apie savo prekės ženklo logotipą ar kitą esminę grafiką.

Daugeliu atvejų SVG nėra formatas, kurį naudosite labai dažnai.

Dabar, ant WebP. Formatas yra puikus, ir daugeliu atvejų jis iš tiesų sutaupo daug vietos diske, kaip ir buvo žadėta. Peržiūrėkite šiuos du vaizdų pavyzdžius:

JPG vaizdo pavyzdys

„webp“ vaizdo pavyzdys

  • originali JPG versija yra 204 KB
  • WebP yra 58 KB

Apgaulė ta, kad ne visos naršyklės palaiko „WebP“. Tiesą sakant, jūs net negalite pamatyti aukščiau naudojamo WebP vaizdo. Rašymo metu „WebP“ veikia „Google Chrome“, „Firefox“, „Edge“ ir „Opera“. Žinoma, senesnės versijos nepalaiko formato.

Praktiškai tai reiškia, kad „WebP“ vaizdo pridėjimas nėra toks paprastas dalykas, kaip JPG arba PNG pridėjimas.

Aš turiu galvoje, kad jūs techniškai galite naudoti tokį kodą:

… bet jei naudotojo naršyklė nepalaiko formato, vietoje to bus rodoma pažįstama sulaužyto vaizdo piktograma.

Norėdami efektyviai naudoti „WebP“, turėtumėte pateikti atsarginius vaizdus. Pavyzdžiui:

Tai reiškia daug daugiau darbo. Įsivaizduokite, kad turėsite sukurti tokią žymą kaskart, kai norėsite pridėti WebP vaizdą prie tinklaraščio įrašo ar puslapio. Ir leiskite man sustabdyti jus čia pat, ne, „WordPress“ nepalaiko „WebP“ savitai, taigi jūs tikrai turėsite tai padaryti ranka.

Vis dėlto aš rekomenduoju pereiti šį sudėtingą rankinį WebP maršrutą, kai dirbate su vaizdais, kurie rodomi keliuose jūsų svetainės puslapiuose, ar su vaizdais, kurie yra didžiulio dydžio ir jums reikia visų įrankių, kuriuos turite tam tikru būdu sumažinti..

„Photoshop“ galite išsaugoti vaizdus kaip „WebP“ arba naudoti tokį įrankį kaip „XnConvert“ (Laisvas).

�� 2 pamoka:

Jei norite greitai optimizuoti vaizdus, ​​visiškai nesivarginkite naudoti SVG. Laikas, kurį iššvaistysite kurdamas juos, neapsimoka (nors ir nesutikite, čia yra gerai) alternatyvus take). PNG bus žymiai greičiau naudojami ir ne ką prastesni disko sunaudojimo atžvilgiu.

Naudokite „WebP“ dirbdami su vaizdais, rodomais keliuose puslapiuose, arba su pakankamai dideliais vaizdais. Tai yra, nebent jūs galite tvarkyti WebP apdorojimą automatiškai, o tai galima padaryti naudojant keletą papildomų įrankių. Tokiu atveju visur naudokite „WebP“. Apie tai mes kalbėsime po sekundės.

��️ Suspausti vaizdus

Vaizdo glaudinimas yra tarsi magija. Leiskite man parodyti jums:

Tai yra tas pats JPG vaizdas, išsaugotas tik kitokiu glaudinimo lygiu (dažnai vadinamas kokybės lygiu):

Coon-100%100% kokybė

coon-95 proc.95% kokybė

Coon-85 proc.85% kokybė

coon-50 proc.50% kokybė

Jei tau patinka dauguma žmonių, pirmieji trys tau atrodo vienodi. Ketvirtasis pradeda ieškoti "truputį blogiau." (Dešiniuoju pelės mygtuku spustelėkite ir "Atidarykite vaizdą naujame skirtuke")

Štai, kiek vietos diske užima kiekvienas iš šių vaizdų:

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

Didžiulis, tiesa ?! Galite pereiti nuo ~ 1 MB iki ~ 500 KB ir visiškai nepastebėti kokybės praradimo, tiesiog pakeisdami glaudinimą nuo 100% iki 95%.

Šis JPG suspaudimas gali būti atliekamas gana automatiškai įvairiais įrankiais, o tai yra puiki žinia. Tačiau ne visi vaizdai yra sukurti vienodai, todėl kartais šalia blogai atrodančių vaizdų gali būti gerai atrodančių vaizdų, net jei jie buvo suglaudinti tokiu pat būdu..

Apskritai, jūs galite padaryti šuolį čia ir sumažinti savo JPG kokybę gana stipriai. Tiesa ta, kad jūsų svetainės lankytojai visur nesirūpina aiškiais vaizdais.

Gerai, turėčiau paaiškinti; taip, kai norite jiems parodyti ką nors, pvz., vaizdą, kuris yra raktas į turinį, pvz., gaminio atvaizdus, ​​viešbučio kambario nuotraukas, tada tikrai jie turėtų būti aiškūs.

Tačiau kitose srityse galite būti šiek tiek ramesni. Pavyzdžiui, fonas nebūtinai turi būti 100% aiškus. Apskritai, visi vaizdai, su kuriais lankytojas nėra tiesiogiai susijęs, gali būti prastesnės kokybės.

Du mano mėgstamiausi įrankiai, kurie gali jums padėti, yra šie:

„ImageOptim“ skirtas darbalaukio glaudinimui „Mac“. Galite tiesiog paimti vaizdą iš darbalaukio, vilkti ir mesti jį į „ImageOptim“, tada įrankis stebuklingai panaudoja ir perrašo šaltinio atvaizdą, kai baigta.

Tada galite gauti šį vaizdą ir įkelti į savo svetainę įprastai.

„ImageOptim“ - puikus įrankis, skirtas optimizuoti vaizdus darbalaukyje

Antrasis įrankis yra Optimole. Šis įrankis iš esmės paaiškina, kaip atvaizdai tvarkomi svetainėse. Šios diskusijos tikslais sakykime, kad ji tikrai efektyvi, kai norite optimizuoti vaizdus, ​​esančius jūsų medijos bibliotekoje..

„optimole“ - puikus įrankis, padedantis optimizuoti vaizdus debesyje

Dabar į PNG. Kaip ir JPG, PNG taip pat gali būti suglaudinti. Tačiau šį kartą kokybės praradimas neturi neigiamos įtakos. PNG galima efektyviai suspausti, naudojant nuostolingus algoritmus.

Kitaip tariant, visada suspauskite PNG!

Peržiūrėkite šiuos tris vaizdus:

kwf-1
kwf-2

kwf-3

Jie atrodo vienodi, bet iš tikrųjų užima:

  • 346 KB
  • 215 KB
  • 100 KB

Pabandykite atspėti, kuri yra kuri.

Trys įrankiai vaizdams suspausti ir padaryti juos mažesnius:

  • „ImageOptim“ vėl. Bet tai reikalauja daug laiko naudojant PNG, taigi, jei turite daug jų apdoroti, galbūt norėsite pasidaryti sau kavos puodelį, kol įrankis veiks..
  • „ImageAlpha“. Daug greičiau nei „ImageOptim“. Tai yra mano PNG failų sprendimas.
  • Optimole. Nenuostabu, kad „Optimole“ taip pat tvarko PNG suspaudimą. Viskas vyksta autopilotu.

�� 3 pamoka:

Suspauskite JPG, kad pasiektumėte priimtiną kokybės lygį, palyginti su vieta diske.

Suspauskite savo PNG visada.

�� Pateikite tinkamų matmenų vaizdus

Tai turbūt pats svarbiausias aspektas "reaguojantys vaizdai" mįslė. Kaip mes žinome, yra dešimtys, jei ne šimtai skirtingų ekrano dydžių, ir mes kažkaip turime įsitikinti, kad mūsų vaizdai atrodys puikiai visuose juose.

Lengvas sprendimas? Pateikite didelį atvaizdą … jis visada gali būti sumažintas, tiesa? Na, techniškai, tai yra teisinga, tačiau praktiškai tai sunaudos daug pralaidumo ir privers jūsų svetainę įkelti iš lėto daugumoje įrenginių..

Geresnis sprendimas yra išmatuoti visus vaizdus iki tinkamo dydžio, kuris yra priimtinesnis įprastiems įrenginiams, ir atitinkamai juos aptarnauti.

Kaip ir galima tikėtis, norint tai pasiekti, reikia skirtingų to paties įvaizdžio versijų.

Vienas iš būdų tai pasiekti yra pradėti nuo savo dizaino pagrindo pločio ir didžiausio vaizdo dydžio, kurį galima naudoti, ir tada sumažinti mastelį iš ten, kur naudojami bendrieji įrenginiai ir pertraukos taškai..

Pvz., Dauguma svetainių neviršija 1100 pikselių žymos, kad turinio bloko plotis būtų didesnis, todėl galite manyti, kad maksimalus vaizdas, kurį tokiu atveju galima parodyti, yra ir 1100 pikselių pločio..

Tada galite sukurti 800 pikselių ir 550 pikselių (bendrąsias vertes) ribinius taškus planšetinių kompiuterių ir mobiliųjų įrenginių scenarijuose. Nors tai neduos 100% puikių rezultatų visuose įrenginiuose, jūs bent jau protingai optimizuojate ir kontroliuojate savo vaizdus.

Turėdami tai už nugaros, dabar turite sukurti keletą skirtingų paveikslėlių, kuriuos norite naudoti savo svetainėje, versijų.

Čia pateiktas pavyzdys, kaip valdyti tikrąjį rodymo kodą:

„Srcset“ atributas stebuklingas tuo, kad naršyklė peržiūri, kas jame yra, ir tada pasirenka geriausią vaizdą pagal naudojamą įrenginį.

Dar vienas pritaikymas, kurį galite pamatyti aukščiau, yra dydžių atributas. Tai paaiškina naršyklei, kaip vaizdas turėtų elgtis tam tikruose ekranuose. Šiame scenarijuje vaizdas bus 1100 pikselių, kai bus žiūrima į didesnius nei 1100 pikselių ekrano laukus, o mažesniuose įrenginiuose jis užims visą rodinį.

Toks sprendimas užtikrina, kad vaizdas neužima viso 3840 taškų pločio 4K ekrano. Tačiau žiūrint mobiliajame telefone, jis vis tiek užims visą ekraną.

Tai, kad veiksmingai naudojate atributą „size“ (dydžiai), suteikia jūsų vaizdams galimybę reaguoti.

⭐ Pro triukas: eikite į vaizdus, ​​kurių matmenys yra 10% mažesni nei reikia, tada leiskite naršyklei juos padidinti. Tai sutaupys šiek tiek papildomos vietos ir pralaidumo. Pvz., Jei jums reikia 500 × 500 pikselių vaizdo, galite jį padidinti iki 450 × 450 pikselių ir leisti naršyklei padidinti jį iki 500. Tai priklauso nuo atvaizdo, bet dažniausiai vartotojas nepastebės.

�� 4 pamoka:

Savo dizainui naudokite tinkamus vaizdo dydžius.

Kurti lūžio taškus.

Sukurkite kelias to paties vaizdo versijas, kad padengtumėte lūžio taškus.

Rodydami vaizdus naudokite „srcset“ ir „atributus“.

Optimizuokite vaizdus tinklainės ir HiDPI ekranuose

Kitas vaizdo matmenų spektro galas yra apie „HiDPI“ tinkančius vaizdus.

Istorija ta, kad darbalaukio ekranai tampa vis didesni ir didesni, o jų taškai vis labiau tankinami. Šiomis dienomis nėra neįprasta turėti 4K ekranas supakuotas į 15 colių nešiojamąjį kompiuterį. 4K skiriamoji geba yra 3840 × 2160 taškų, taigi kiekvienas iš šių taškų turi būti tikrai mažas.

Tai sukuria problemų svetainėms. Iš esmės, jei jūsų svetainė būtų apibrėžta kaip 1100 pikselių pločio, normaliomis sąlygomis ji užimtų tik maždaug 25% turimo 4K ekrano nekilnojamojo turto. Tai nėra optimalu. Laimei, viskas neveikia taip.

Kad būtų išvengta problemos, šie didelės raiškos ekranai veikia taip, lyg būtų perpus mažesni (aš tiesiog supaprastinu, bet girdžiu). Taigi vietoj jūsų 1100 pikselių pločio svetainės, užimančios nedidelę HiDPI ekrano dalį, ji padidinama dvigubai daugiau, ji užima 2200 pikselių ir ekraną užpildo daug geriau.

Šis procesas leidžia ekranams išlikti ryškesniems ir aštresniems, o proceso metu viskas atrodo maža.

Tačiau ši praktika nėra be trūkumų. Svarbiausia, kad jūsų atvaizdai sužavėtų. Tekstas lengvai keičiamas, neprarandant kokybės. Šriftai neatsparūs pleiskanojimui. Vaizdai nėra. Dėl tiesioginio rezultato kiekvienas vaizdas, kuris nėra paruoštas HiDPI ekranams, atrodys neryškus!

Norėdami tai išspręsti, turite pateikti mastelio atvaizdus pagal kiekvieną mastelio keitimo koeficientą. Štai keletas paprastų kodų:

(Jei naršyklė nepalaiko „srcset“, bus naudojamas standartinis src.)

Dabar, kai sakau "mastelio vaizdai," Aš iš tikrųjų turiu omenyje, kad turėtumėte pradėti nuo kito galo. Pradėkite nuo didžiulio atvaizdo (pažymėkite jį 3x), tada sumažinkite jį ir sumažinkite (iki 2x) ir galiausiai padarykite 1x, naudokite kaip numatytąjį vaizdą.

�� 5 pamoka:

Įsitikinkite, kad jūsų logotipai, prekės ženklo atvaizdai ir visi jūsų įrašuose bei puslapiuose naudojami vaizdai yra paruošti HiDPI ekranams.

⌛ Atidėti vaizdo įkėlimą

Iš esmės tai paprasta; visi vaizdai, esantys virš aplanko, turėtų būti nedelsiant įkelti (įkeliant puslapį). Visa kita galima atidėti vėlesniam laikui ir netgi "tingus pakrautas."

Tingus įkėlimas yra vaizdo įkėlimas pagal pareikalavimą. T. y., Vaizdai įkeliami tik per sekundę, kol vartotojui jų nereikia – ne anksčiau, ne vėliau. Ir tai "ne anksčiau, ne vėliau" dalis čia yra svarbiausia.

Idealiu atveju vaizdas turėtų būti įkeltas prieš pat įsukant į peržiūros sritį. Reiškia, vartotojui neturėtų reikėti matyti vietos žymeklio, kol pasirodys vaizdas. Jei taip atsitiks, jie gali slinkdami perduoti vaizdą nesugebėdami laiku įkelti – tai nėra puikus būdas optimizuoti vaizdus.

Nepaisant to, tingų krovimą yra kažkas, ką lengva padaryti „WordPress“ svetainėse. Galite tingiai įkelti „JavaScript“ / „jQuery“ ir netgi galite patys parašyti to kodą, jei norite. Arba galite gauti papildinį, pvz a3 tingus krūvis, arba galite naudoti Optimole, kuriame yra tingus pakrovimo modulis.

�� 6 pamoka:

Juokingai įkelkite vaizdus, ​​esančius žemiau matomos ribos.

�� Pateikite vaizdus per CDN

Turinio pateikimo tinklas yra tarsi svetainės greičio apgaulingas kodas. Jūs sukčiaujate, nes ne tiek pagreitinate savo svetainę, kiek sakote kitam asmeniui, kad jis imtųsi krovinių ir pateiktų svetainės duomenis lankytojui už jus..

�� Čia išsamiau kalbėjome apie CDN, patikrinkite.

TL; DR yra tai, kad CDN naudojasi serverių, kurie visi saugo jūsų svetainės kopiją, tinklu ir tada pristato jį lankytojui iš artimiausios galimos vietos. Visada tai bus greičiau nei pristatymas iš pagrindinio serverio.

Vaizdo CDN veikia beveik taip pat, tačiau jie koncentruojasi tik į vaizdus, ​​jūs jau spėjote.

Didžiąją laiko dalį operacija jūsų požiūriu yra vientisa. Visi jūsų svetainės vaizdai pakeičiami jų CDN priglobtomis versijomis (tai reiškia, kad vaizdo URL pasikeičia).

  • Reaktyvinė skraidyklė turi populiarų vaizdo CDN, pastatytą tiesiai. Galite naudoti nemokamai, o tai puiku. Pagrindinis apribojimas yra tas, kad jis veikia tik su jūsų žinučių, puslapių ir rodomų vaizdų vaizdais. Jis neveikia jokių vaizdų, kurie sudaro jūsų dizainą (temos dalys, išdėstymas ir tt). Tai yra tie vaizdai, kurie tikrai galėtų panaudoti CDN.
  • Optimole turi integruotą CDN kaip pagrindinės vaizdo optimizavimo funkcijos dalį. Tai ne tik jūsų įrašai ir puslapiai.

�� 7 pamoka:

Prijunkite savo svetainę prie vaizdo CDN („Jetpack“ ar „Optimole“) arba bendrojo CDN („MaxCDN“ / „StackPath“).

Slow Lėtais ryšiais pateikite mažesnius vaizdus vartotojams

Ne tik ekrano dydis yra svarbus nustatant, kokį vaizdą vartotojas turėtų pamatyti. Tikriausiai dar svarbiau, jei jie naudojasi lėtu interneto ryšiu, jie tikrai nenori laukti 10 sekundžių, kol vaizdas bus įkeltas..

Tokiuose scenarijuose yra daug geresnė idėja sumažinti savo vaizdų kokybę mainais už įkelties laiką. Lėtesnį ryšį turintys vartotojai įvertins, kad išvis gali matyti vaizdus.

Tai galite padaryti pasinaudodami tinklo informacijos API. Čia yra šauni pamoka apie tai, kaip viskas veikia, jei norite tai įgyvendinti rankomis.

Jei norite, kad jis būtų tvarkomas naudojant autopilotą, dar kartą, Optimole!

�� 8 pamoka:

Pateikite mažesnius ir labiau suglaudintus vaizdus vartotojams, turintiems lėtesnį interneto ryšį.

�� Įrankiai įrankiai įrankiai!

Pakeliui paminėjau keletą įrankių, kuriuos galite naudoti, kad jūsų svetainės vaizdo pateikimas būtų efektyvesnis. Čia yra jų santrauka:

  • Optimole – leidžia automatiškai optimizuoti vaizdus, ​​juos suglaudina, pasirenka tinkamą lankytojo peržiūros srities vaizdo dydį, pateikia vaizdą per CDN, tingus įkelia vaizdus, ​​dirba lėčiau ryšio greičio.
  • „ImageOptim“ ir „ImageAlpha“ Tvarkykite darbalaukio vaizdų glaudinimą „Mac“. Tu gali naudoti „TinyPNG“ ant Win. Tai darykite prieš įkeldami vaizdus į savo svetainę.
  • „XnConvert“ – leidžia konvertuoti vaizdus į WebP.
  • a3 tingus krūvis įskiepis – tingus įkelkite visus vaizdus.
  • Reaktyvinė skraidyklė įskiepis – tiekiamas su nemokamu vaizdo CDN.
  • „MaxCDN“ / „StackPath“ – bendras CDN, kuris rūpinsis ne tik vaizdais, bet ir visa jūsų svetaine.

įrankiai vaizdams optimizuoti

�� Papildoma literatūra:

  • Įsivaizduokite „WP Smush“ vs „ShortPixel“ prieš „Optimole“: kuris yra geriausias „WordPress“ vaizdų optimizavimui? Galvų palyginimas
  • Nemokami dienoraščių vaizdai – kaip juos gauti & efektyviai juos naudoti (perspėjimas! neabejotini patarimai, paremti duomenys)
  • 11 būdų, kaip pagreitinti „WordPress“ veikimą
  • Svetainės greičio optimizavimas: kaip tai padaryti 2019 m
  • Greičiausias „WordPress“ priegloba – pradedančiojo vadovas, kaip jį rasti

��‍♂️ TL; DR:

Pateikiame visų aukščiau pasidalintų pamokų santrauką:

1-oji pamoka:

Ne visada eik į JPG. Numatykite, koks bus vaizdas pagal jo turinį, tada naudokite tinkamą vaizdo tipą.

2 pamoka:

Jei norite greitai optimizuoti vaizdus, ​​visiškai nesivarginkite naudoti SVG. Laikas, kurį iššvaistysite kurdamas juos, neapsimoka (nors nesutikite). PNG bus žymiai greičiau naudojami ir ne ką prastesni disko sunaudojimo atžvilgiu.

Naudokite „WebP“ dirbdami su vaizdais, rodomais keliuose puslapiuose, arba su pakankamai dideliais vaizdais. Tai yra, nebent jūs galite tvarkyti WebP apdorojimą automatiškai, o tai galima padaryti naudojant keletą papildomų įrankių. Tokiu atveju visur naudokite „WebP“. Apie tai mes kalbėsime po sekundės.

3 pamoka:

Suspauskite JPG, kad pasiektumėte priimtiną kokybės lygį, palyginti su vieta diske.

Suspauskite savo PNG visada.

4 pamoka:

Savo dizainui naudokite tinkamus vaizdo dydžius.

Kurti lūžio taškus.

Sukurkite kelias to paties vaizdo versijas, kad padengtumėte lūžio taškus.

Rodydami vaizdus naudokite „srcset“ ir „atributus“.

5 pamoka:

Įsitikinkite, kad jūsų logotipai, prekės ženklo atvaizdai ir visi jūsų įrašuose bei puslapiuose naudojami vaizdai yra paruošti HiDPI ekranams.

6 pamoka:

Juokingai įkelkite vaizdus, ​​esančius žemiau matomos ribos.

7 pamoka:

Prijunkite savo svetainę prie vaizdo CDN („Jetpack“ ar „Optimole“) arba bendrojo CDN („MaxCDN“ / „StackPath“).

8 pamoka:

Pateikite mažesnius ir labiau suglaudintus vaizdus vartotojams, turintiems lėtesnį interneto ryšį.

Praneškite man, ką jūs manote apie visą iššūkį kuo labiau optimizuoti vaizdus žiniatinkliui. Be to, ką jūs darote su savo atvaizdais, kad jie būtų greičiau įkeliami? Dalinkis komentaruose.

Nepamirškite prisijungti prie avarijos kurso, kaip pagreitinti jūsų „WordPress“ svetainę. Taikydami keletą paprastų pataisų galite sumažinti įkrovimo laiką net 50–80%:

Maketas, pristatymas ir redagavimas – Karolis K.

* Šiame įraše yra filialų nuorodos, tai reiškia, kad jei spustelėsite vieną iš produktų nuorodų ir nusipirksite produktą, gausime nedidelį mokestį. Vis dėlto nesijaudinkite, vis tiek mokėsite standartinę sumą, todėl iš jūsų nereikės mokėti.

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