Kaip optimizuoti savo atvaizdus, ​​kad būtų patogu SEO (pilnas vadovas)

Jūsų svetainės našumas priklauso nuo kelių veiksnių, pradedant nuo pasirinkto konkretaus žiniatinklio prieglobos, vadovaujantis svetainės pritaikymo neįgaliesiems gairėmis, ir baigiant naudojamų vaizdo failų dydžiais..


Formatuojant juos tinkamam dydžiui, kokybė gali sumažėti dėl jūsų atliktų pakeitimų. Geros žinios yra tai, kad keliomis technikomis ir gudrybėmis galite išlaikyti optimalią vaizdo kokybę ir gauti reikiamą dydį.

Kas yra vaizdo optimizavimas?

vaizdo optimizavimo matmenysTinklalapiai gali smarkiai sulėtėti, kai yra didelių vaizdų. Tai gali sutrumpinti krovimo laiką ir paversti bendrą patirtį jūsų svetainės lankytojais.

Failo dydžio sumažinimas yra vaizdo optimizavimas. Tam galite naudoti scenarijų arba papildinį.

Tai lems greitesnį jūsų puslapių įkėlimo laiką. Duomenys apie nuostolingą ir nuostolingą glaudinimą yra du dažniausiai naudojami optimizavimo metodai.

Vaizdo formavimo pranašumai

vidutiniai vaizdo dydžiai žiniatinklyjeManoma, kad apie 54 procentus viso tinklalapio svorio sudaro vaizdai.

Kai dirbate optimizuodami svetainę, jūsų atvaizdai turėtų būti jūsų pirmoji užduotis. Vaizdo formavimo pranašumai:

  • Patobulintas puslapio įkėlimo greitis
  • Greičiau sukuriamos atsarginės kopijos
  • Reikia mažiau serverio vietos
  • Patobulintas SEO naudojant reikiamą SEO papildinį
  • Naudojamas mažesnis pralaidumas

Kaip pagerinti našumą naudojant vaizdo optimizavimą

Tikslas yra tolygiai suderinti priimtiną kokybę ir kuo mažesnį failo dydį. Yra daugiau nei vienas būdas tai padaryti. Prieš įkeldami, vaizdų glaudinimas yra įprasta galimybė. Šiam tikslui galite naudoti įrankį arba papildinį (čia yra keli).

Svarbu atsižvelgti į naudojamą glaudinimo tipą ir failo formatą. Tinkamas derinys leidžia sumažinti savo vaizdo dydį iki penkių kartų.

Eksperimentuokite su skirtingais failų formatais ir glaudinimo tipais, kad nustatytumėte geriausią derinį pagal jūsų poreikius.

Pasirinkite geriausią failo formatą

Norint pasirinkti geriausią failo tipą, svarbu žinoti, kokie jie yra. Tai yra labiausiai paplitę:

  • JPEG: Šis tipas naudoja nuostolingą ir nuostolingą optimizavimą. Pakoregavę kokybės lygį, galite pasiekti tvirtą failo dydžio ir kokybės pusiausvyrą.
  • PNG: Šio tipo failai paprastai būna didesni, tačiau vaizdai yra aukštesnės kokybės. Galite naudoti nuostolingą arba nuostolingą glaudinimą.
  • GIF: Tai idealiai tinka animaciniams vaizdams. Galite naudoti tik nuostolingą glaudinimą. Tam naudojamos tik 256 spalvos.

vaizdo failų formatai

Yra ir kitų variantų, tačiau jie yra vieni iš labiausiai paplitusių ir su jais lengva dirbti. Kitos parinktys yra JPEG XR ir WebP. Ne visos naršyklės palaiko šias dvi, todėl žinokite apie tai.

Tačiau jie gali būti tinkamas pasirinkimas. Pavyzdžiui, palyginti su palyginamu JPEG atvaizdu, naudojant „WebP“ failo dydis vidutiniškai sumažinamas 30 procentų.

Kadangi nėra universalaus šių dviejų parinkčių palaikymo, jūsų programai reikės papildomos logikos jūsų serveriuose arba programoje, kad būtų galima pateikti reikiamus išteklius:

  • Vaizdo optimizavimas yra paslauga, kurią teikia kai kurie CDN, įskaitant WebP ir JPEG XR pristatymą.
  • Norėdami aptikti klientą, pateikite geriausią turimą vaizdo formatą ir patikrinkite palaikomus formatus, jei įmanoma, galite pridėti papildomą programos logiką.
  • Tam tikri atvirojo kodo įrankiai automatizuoja pokalbį, optimizavimą ir tinkamo turto aptarnavimą.

Dydis ir suspaudimo kokybė

Žemas suspaudimas paprastai suteikia aukštesnę kokybę, tačiau paprastai failai yra didesni. Aukšto suspaudimo atveju yra atvirkščiai. Failai yra mažesni, tačiau kokybė paprastai blogėja.

vaizdo kokybė palyginti su glaudinimu

Idealiu atveju jūs norite iš viso nuo vieno iki dviejų MB bendro savo tinklalapio svorio. Taigi apsvarstykite, kiek vaizdų jums reikia naudoti ir padalinkite šį skaičių iš maždaug 1,5. Tai suteikia jums vieno vaizdo dydį, kuris leidžia pasiekti geriausią įkėlimo greitį.

„Lossless vs. Lossy“ optimizavimas

Tai yra du glaudinimo tipai, kuriuos naudosite. Svarbu suprasti, ką jie daro:

  • lossless vs lossy CompressionNeprarasti: Tai suspaudžia duomenis ir yra filtras. Prieš pateikiant atvaizdą, jis turi būti nesuspaustas. Tačiau kokybė nesumažėja. Yra keli įrankiai, kurie atlieka nuostolingą glaudinimą.
  • Praradęs: Tai pašalina kai kuriuos duomenis ir yra filtras. Atminkite, kiek sumažinote, nes tai pablogins vaizdą. Norėdami sureguliuoti vaizdo kokybės parametrus, galite naudoti įvairius vaizdų redaktorius ir įrankius.

Optimali nuostolingos arba nuostolingos konfigūracijos konfigūracija priklauso nuo jūsų pačių kriterijų, tokių kaip kompromisas tarp įvestų artefaktų ir failo dydžio bei vaizdo turinio.

Nėra vieno universalaus nustatymo, taikomo visiems vaizdams. Galų gale norite pažaisti su skirtingais vaizdais, kad pamatytumėte, kuris yra geriausias.

Vaizdų dydžio keitimas pagal mastelį

Dėka jautrių svetainių puslapių, tokių kaip „WordPress“, savo medijos bibliotekoje gausite kelių dydžių failus. Naršyklė gali pasirinkti geriausią dydį ir jį atsisiųsti. Naršyklės pasirinktas dydis priklauso nuo įrenginio skyros.

dydį paveikslėlį

Originali byla liko neliečiama ir saugoma. Jei norite, kad neišsaugotumėte originalo, jei norite, išsaugokite vietą diske, naudokite papildinius.

Vaizdų pakeitimas ir pašalinimas

Ar jums reikia visų vaizdų tinklalapyje? Jei ne, pašalinkite nereikalingus. Tačiau jei visi susiję su turiniu, apsvarstykite galimybę pakeisti didesnės ar žemesnės kokybės vaizdus geresnėmis parinktimis.

Kai kuriais atvejais interneto šriftai ir CSS efektai gali pakeisti vaizdus, ​​tuo pat metu vis tiek pateikdami gražią puslapio vizualinę estetiką. Naudojant žiniatinklio šriftus, gražios šriftos gali padėti pagerinti patogumą ir suteikti jūsų puslapiams labiau pritaikytą vaizdą.

Tai taip pat gali pagerinti jūsų skaitomumą ir prekės ženklą. Tiesiog įsitikinkite, kad vis tiek galite lengvai ieškoti, pasirinkti ir pakeisti teksto dydį, nesukeliant problemų dėl skaitomumo.

CSS efektai apima elementus, tokius kaip šešėliai ir nuolydžiai. Tai taip pat gali dar labiau skatinti prekės ženklą. Animacijos gali suteikti vizualinio patrauklumo jūsų tinklalapyje kiekvienu mastelio lygiu ir skiriamąja geba. Palyginti su vaizdo failais, tai yra dalis baitų.

Rastriniai ir vektoriniai vaizdai

rastor vs vektorius

Rasteris ir vektorius yra du pagrindiniai vaizdo failų tipai. Rastriniams vaizdams kurti naudojamos „pixel“ programos, skaitytuvas ar fotoaparatas.

Jie yra plačiai naudojami internete ir yra plačiau naudojami. Vektorių vaizdams kurti naudojama vektorinė programinė įranga. Tai būdinga atvaizdams, kurie patenka į fizinius produktus, ir inžinerijos, CAD ir 3D grafikoms.

Vektoriniai vaizdai nepriklauso nuo skiriamojo gebos ir mastelio. Kai naudojamos geometrinės figūros, vektorius yra idealus. Kai vaizdai yra sudėtingi ir pasižymi daugybe detalių bei netaisyklingų formų, pirmenybė teikiama rastriniams vaizdams.

Rastrinė grafika užkoduoja kiekvieno pikselio atskiras vertes stačiakampio formos tinklelyje, kad būtų atvaizdas. Vektorinė grafika vaizduoja vaizdą, naudodama taškus, linijas ir daugiakampius.

Didelės skyros ekrano pasekmės

Svarbu atskirti du skirtingus taškų tipus, kurie apima įrenginio ir CSS taškus. Viename CSS taške gali būti keli įrenginio taškai. Detalė ekrane tampa smulkesnė, kai daugiau įrenginio taškų.

CSS taškas vs įrenginio taškasNorint visiškai išnaudoti didesnį įrenginio taškų skaičių, vaizdo ištekliai turi būti išsamesni.

Ši užduotis yra idealiai tinka vektoriniams vaizdams, nes jie gali duoti ryškių rezultatų kai teikiama bet kokia skiriamąja geba.

Kadangi rastriniai atvaizdai koduojami taškais už vieną pikselį, jie yra sudėtingesni. Taip yra tuo metu, kai didėja pikselių rastrinių failų dydis.

Taigi norint gauti naudos iš didelės skiriamosios gebos ekranų, reikia aukštos raiškos vaizdų. Vektoriniai vaizdai yra geriausiai tinka aukštos skiriamosios gebos ekranams nes jie visada teikia aiškių rezultatų dėl to, kad nėra skiriamoji geba.

Tiesiog nepamirškite, kad nepriklausomai nuo raiškos, vaizdo optimizavimo būdai yra vienodi.

Vektorinių vaizdų optimizavimas

Scalable Vector Graphics (SVG) palaikomos visose šiuolaikinėse naršyklėse.

Tai idealiai tinka dvimatėje grafikoje, o formatas pagrįstas XML atvaizdu. SVG failus galima sukurti rankiniu būdu, naudojant jums labiausiai patinkančią teksto rengyklę arba naudojant daugumą vektorinių programinės įrangos tipų.

Kad sumažintumėte SVG failų dydį, jie turėtų būti suvienodinti. GZIP turėtų būti naudojamas glaudinant SVG failus.

Rastrinių vaizdų optimizavimas

Pikselių tinklelis sudaro rastrinį vaizdą. Atskiri taškai yra ant dviejų matmenų tinklo. Pavyzdžiui, 10 000 pikselių seka sudaro 100 x 100 pikselių atvaizdą. Kiekvienas pikselis užkoduoja informaciją apie skaidrumą ir spalvas.

rastrinis sunkusisRGBA reikšmės saugomos kiekviename taške. Jie apima:

  • Raudonas kanalas
  • Mėlynas kanalas
  • Žalias kanalas
  • Alfa (skaidrumo) kanalas

Naršyklėje vidutiniškai paskirstomi 256 atspalviai (reikšmės). Viename kanale tai reiškia aštuonis bitus. Viename taške tai yra keturi baitai. Tai leidžia apskaičiuoti failo dydį naudojant tinklelio matmenis. Nereikia daug laiko, kol failas tampa labai didelis.

Taigi, norint sumažinti vaizdo failo dydį, yra keletas strategijų:

  • Sumažinkite vaizdo gilumą. Tai galite padaryti naudodami mažesnį spalvų padėklą.
  • Optimizuokite duomenis, kuriuos kaupia atskiri pikseliai.

Įrankiai ir parametrų derinimas

Nėra tobulo vaizdo įrankio, optimizavimo parametrų rinkinio ar formato, kuris veiktų kiekvieną vaizdą. Vaizdo turinys ir jo techniniai bei vaizdiniai reikalavimai nulems, ką turėtumėte naudoti.

Suradę gerą nustatymų rinkinį, ateityje jį galėsite naudoti panašiems vaizdams, kad sutaupytumėte laiko. Tačiau įsitikinkite, kad niekada negalvojate, kad norint suglaudinti visus vaizdus, ​​turėtų būti naudojami tie patys nustatymai.

Sužinoję apie keletą bendrų įrankių, galite padėti jums padaryti teisingą pasirinkimą. Šie keturi yra vieni iš dažniausiai naudojamų:

  • Gifas: Tai leidžia jums optimizuoti ir kurti įvairius GIF vaizdus.
  • Optipng: Tai naudojama norint be nuostolių optimizuoti PNG.
  • Jpegtran: Tai leidžia jums optimizuoti JPEG vaizdus.
  • Pngquant: Tai naudojama siekiant nuostolingai optimizuoti PNG.

Pateikite mastelio vaizdą

Atliekant vaizdo optimizavimą reikia atsižvelgti į du pagrindinius kriterijus:

  • Bendro vaizdo vaizdo pikselių skaičiaus optimizavimas.
  • Optimizavimas, kiek baitų yra reikalingas kiekvienam vaizdo taškui koduoti.

vaizdo formato medisVaizdo failo dydis sumažėja iki bendras pikselių skaičius, padaugintas iš bendro baitų, reikalingų individualiam pikselių kodavimui. Štai tai. Atminkite tai, kai dirbate norėdami nustatyti optimalų vaizdo failų dydį savo svetainėje.

Dėl šios priežasties efektyviausias ir lengviausias būdas optimizuoti vaizdus yra įsitikinti, kad neišsiunčiate daugiau pikselių, kurių jums būtinai reikia norint parodyti turtą naršyklėje numatytu dydžiu..

Taigi, ne tik pasikliaukite savo naršykle, kad pakeistumėte vaizdų dydį. Dėl to jie gali būti rodomi mažesne raiška. Jis taip pat naudoja daug papildomų procesoriaus išteklių.

Paprastai neįmanoma garantuoti tikslaus kiekvieno pristatyto turto ekrano dydžio. Vis dėlto svarbu įsitikinti, kad išlaikytumėte kuo mažiau visų nereikalingų vaizdo elementų.

Taip pat būtina, kad jūsų didelis turtas būtų pristatytas kuo arčiau jo ekrano dydžio.

Vaizdo optimizavimo kontrolinis sąrašas

Visa čia pateikta informacija leidžia optimizuoti vaizdus, ​​kad jūsų tinklalapiai būtų greitesni. Jūs vis tiek galėsite naudoti gražius vaizdus, ​​tačiau jie nepadarys reikšmingo sulėtėjimo, atsižvelgiant į jūsų puslapio įkėlimo laiką.

Tai padarys jūsų lankytojus laimingus ir pagerins bendrą jūsų svetainės funkciją. Optimizuodami vaizdus atsižvelkite į šiuos kontrolinio sąrašo punktus:

  • Apsvarstykite vektorinius formatus, nes jie veikia didelės skiriamosios gebos ir keliuose įrenginiuose, nes jie nėra mastelio ir skyros.
  • Visas SVG turtas turėtų būti suspaustas ir sumažintas. Tai pašalina nereikalingus metaduomenis.
  • Jei norite naudoti rastrinius formatus, žaiskite naudodamiesi optimaliausiais kokybės nustatymais. Tai gali sutaupyti nemažai baitų.
  • Kiekvienam turtui išsiaiškinkite savo funkcinius reikalavimus ir pasirinkite geriausią rastrinių vaizdų formatą.
  • Automatizuodami bet kada galite užtikrinti nuoseklų vaizdo optimizavimą.
  • Pateikite mastelio atvaizdus, ​​kad natūralus vaizdo ir ekrano dydis būtų kuo panašesni.

Apibendrinant galima pasakyti, kad įvaizdį galima optimizuoti tiek mokslo, tiek meno srityje. Aukštai sukurti algoritmai ir metodai yra mokslas.

Tai, kad nėra galutinių atsakymų dėl atskirų vaizdų glaudinimo, yra menas. Galų gale turėtumėte žaisti ir eksperimentuoti. Tai leidžia jums pasirinkti geriausią vaizdų failų pasirinkimą ir tai, kaip jie prisideda prie jūsų tinklalapio greičio.

Didėjant trečiųjų šalių svetainių kūrėjų, tokių kaip „Wix“, populiarumui ir rafinuotumui, dizaineriams nesunku pasidaryti aplaidžiam, tačiau susitelkite ties gerų vaizdo optimizavimo procesų kūrimu ir palaikymu, nesvarbu, ar sumažinti šabloną, ar kurti svetainę nuo nulio..

Nuorodos ir įvaizdžio kreditai:

  • „PicupMedia.com“
  • Kompiuterija.HomeDNS.org
  • „CognitiveSEO.com“
  • „StackOverflow.com“
  • „EngineThemes.com“
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map