Argi nemėgstate vaizdų?

Jie gali paversti tekstą įtraukiančia patirtimi, kol jį skaitote. Vaizdai pagerina tinklaraščio įrašą, suteikia daugiau bendrumo ir suteikia toną bei prekės ženklą visai jūsų svetainei.

Ir žinote ką? Mes esame pratę reaguoti į vaizdus. Štai kodėl vaizdų įtraukimas į turinį yra galingas įrankis, kurį galite naudoti rinkodarai savo tinklaraštyje.

Tačiau jei nesate atsargūs, paveikslėliai gali sudaryti daugiau nei pusę (ar net daugiau) viso tinklalapio dydžio. Dar prieš kelerius metus vidutinis tinklalapio dydis buvo 600-700 K. Dabar vidutinis dydis siekia 2 MB ir kasmet vis didėja.

Tai didžiulė suma!

Pagrindinė priežastis, kodėl taip atsitinka, yra ta, kad tinklalapiuose vis dažniau naudojami keli paveikslėliai, o jų dydis ir optimizavimas nėra tinkamai parinkti. Tai reiškia, kad jie neišsaugomi arba nesukompilduojami žiniatinkliui patogiu būdu, o išpučia tinklalapius.

Tačiau dauguma iš mūsų vaizdų optimizavimą palieka kaip antraeilį dalyką ir verčiau mėgaujasi smagiais dalykais, tokiais kaip epinio įrašo kūrimas ar bendravimas su kitais savo nišos tinklaraštininkais.

Tačiau puslapio išpūtimas reiškia, kad nukentės jūsų puslapio įkėlimo greitis. Galbūt manote, kad tai nėra didelė problema, jei naudojate spartųjį ryšį, tačiau daugelis jūsų lankytojų jo nenaudoja. Be to, "Google" nemėgsta lėtai kraunamų puslapių ir tai gali neigiamai paveikti jūsų SEO.

Kodėl reikia optimizuoti vaizdus

Sunkiai dirbate kurdami žvaigždžių turinį, praleidžiate daugybę valandų reklamuodami savo tinklaraštį ir bendraudami su kitais tinklaraštininkais, todėl mažiausiai norite, kad potencialūs lankytojai paliktų jūsų svetainę dar prieš ją įkraunant!

Tyrimai rodo, kad iki 40 % lankytojų paspaudžia mygtuką "atgal", jei svetainės įkėlimas užtrunka ilgiau nei tris sekundes.

Žinau, kad trys sekundės tikrai nėra toks ilgas laikas, bet kai naudojatės mobiliuoju ryšiu ir laukiate, kol bus įkelta svetainė, sekundė gali atrodyti kaip amžinybė.

Kadangi daug lankytojų gali naudotis lėtesniu mobiliuoju ryšiu, tampa aišku, kad reikia sumažinti puslapio dydį. Ir jau žinome, kas yra didžiausias puslapio dydžio išpūtimo kaltininkas - tai jūsų paveikslėliai.

Be reikalo dideli vaizdai taip pat užima vietą jūsų prieglobos paskyroje. Nors kai kurie iš jūsų gali turėti prieglobą su "neribota" saugojimo vieta, daugelis aukščiausios kokybės prieglobos paslaugų teikėjų žemesnės pakopos planuose riboja apie 10 GB saugyklą. Ši vieta gali greitai užsipildyti, ypač jei toje pačioje paskyroje talpinate kelias daug vaizdų turinčias svetaines.

Taigi, kaip galite sužinoti, ar jūsų vaizdai lėtina svetainės greitį? Patikrinkite svetainės greitį naudodami "Google PageSpeed Insights".

Jei "Google" praneša apie neoptimizuotus vaizdus kaip apie problemą, štai ką turite žinoti, kad ją išspręstumėte.

Vaizdų optimizavimo pagrindai

Optimizuodami tinklaraščio vaizdus turite žinoti keletą skirtingų dalykų: failo tipą, vaizdo dydį ir matmenis, vaizdų pateikimo būdą ir vaizdų suspaudimą.

Atidžiau apžvelkime kiekvieną iš šių sričių.

Failo tipas

Vaizdai žiniatinklyje paprastai išsaugomi PNG arba JPEG formatu, o jei tai animacija - GIF formatu. Kam nepatinka tie linksmi animaciniai GIF failai, sklandantys žiniatinklyje!

Dabar tai techniškai gerai jei vaizdus išsaugosite bet kuriuo formatu, lankytojo naršyklė be vargo parodys jūsų tinklalapį, tačiau jei norite geriausios kokybės ir optimizavimo, laikykitės šių taisyklių:

• JPEG - naudokite nuotraukoms ir dizainui, kuriame vaizduojami žmonės, vietos ar daiktai.
• PNG - geriausiai tinka grafikai, logotipams, daug teksto turinčiam dizainui, ekrano nuotraukoms ir kai reikia vaizdų su skaidriu fonu.
• GIF - jei reikia animacijos, kitu atveju naudokite PNG

Taigi, kodėl egzistuoja skirtingi formatai?

PNG tradiciškai naudojamas logotipams ir grafikai išsaugoti, nes išsaugo originalaus vaizdo kokybę - niekas nenori neryškaus teksto ir pikseliuotų formų. Tačiau jei pabandysite išsaugoti nuotrauką kaip PNG, ji atrodys nuostabiai, bet gauto failo dydis bus ne toks didelis.

Tradiciškai nuotraukoms išsaugoti naudojamas JPEG formatas. Dalis vaizdo duomenų išmetama, kad būtų galima sukurti gerokai mažesnį failą, bet kadangi nuotraukose yra daug įvairių spalvų ir natūralių variacijų, kokybės praradimo žmogaus akis paprastai nepastebi.

Vėliau išsamiau aptarsime suspaudimą, bet kol kas, jei prisimenate tik du dalykus, prisiminkite: JPEG - nuotraukoms ir PNG - tekstui ir (arba) grafikai.

Vaizdų matmenys

Ar kada nors įkėlėte žiniatinklio puslapį ir pastebėjote, kad mažą paveikslėlį (pavyzdžiui, gal galvos nuotrauką) atsisiunčiate labai lėtai? Pavyzdžiui, taip lėtai, kad matote kiekvieną eilutę? Galvojate sau, kaip tokį mažą paveikslėlį galima taip ilgai atsisiųsti?

O kai tai nutinka dideliam antraštės paveikslėliui, yra dar blogiau, nes tai gali sustabdyti viso puslapio įkėlimą.

Taip atsitinka todėl, kad tinklaraštininkas netinkamai pakeitė ir optimizavo savo nuotrauką, o mūsų galvos nuotraukos pavyzdžio atveju galėjo įkelti visos raiškos JPEG failą tiesiai iš savo DSLR fotoaparato.

Tai didžiulis failas!

Žiniatinklio naršyklė (paprastai) sumažina paveikslėlio matmenis, kad jis gražiai tilptų tinklalapyje. Tai, kas ekrane atrodo mažas paveikslėlis, iš tikrųjų gali būti didžiulė 10 megapikselių nuotrauka, kurią naršyklė realiuoju laiku sumažina.

Kai kurios žiniatinklio leidybos platformos automatiškai sukuria kelis skirtingo dydžio visos raiškos vaizdo variantus, tačiau jei taip nėra, prieš tai turėtumėte pakeisti vaizdų dydį vaizdų redaktoriuje, pavyzdžiui, "Photoshop", "Lightroom", "Pixlr" ar net "MS Paint". Tai gali reikšti skirtumą tarp 50 K ir 5 MB failo.

Pavyzdžiui, "WordPress" automatiškai sukurs tris (ar daugiau, priklausomai nuo temos) įkelto paveikslėlio kopijas, kurių visi matmenys bus skirtingi ir kurias galėsite naudoti tinklaraščio įrašuose, o ne visada naudoti viso dydžio paveikslėlį.

Jei turite įprotį įkelti didžiulius nuotraukų vaizdus ir norite sutaupyti vietos savo prieglobos paskyroje, "WordPress" įskiepis "Imsanity" jums padės.

Jis pakeičia originalaus paveikslėlio dydį ir pakeičia jį į tinkamesnį, todėl net jei į įrašą įterpsite viso dydžio paveikslėlį, tai nebus taip blogai.

Įjungus "Imsanity" taip pat galima ieškoti esamų vaizdų ir atitinkamai keisti jų dydį.

Vaizdų aptarnavimas

Tai, kaip lankytojams pateikiate vaizdus, savaime nėra susiję su jų optimizavimu, tačiau tai gali turėti didelę įtaką puslapio įkėlimo laikui.

Dauguma tinklaraštininkų vaizdus pateikia tiesiai iš savo prieglobos paskyros, ir tai paprastai yra gerai, tačiau jei iš tikrųjų norite iš svetainės išspausti kiekvieną našumo bitą, tada vaizdų priegloba turinio pristatymo tinkle (angl. Content Delivery Network, CDN) gali būti labai svarbi.

CDN sudaro strategiškai išdėstyti žiniatinklio serveriai, esantys duomenų centruose visame pasaulyje. Šiuose serveriuose talpinamos dubliuotos jūsų vaizdų kopijos, o kai lankytojo naršyklė paprašo vaizdo iš jūsų svetainės, CDN automatiškai nukreipia naršyklę į geografiškai artimiausią serverį.

Tai reiškia, kad, pavyzdžiui, lankytojams iš Europos vaizdai bus pateikiami iš vietinio Europos serverio, o ne iš JAV ar kitų šalių. Kadangi sumažėja atsako laikas ir tinklo vėlavimas, vaizdai atsisiunčiami daug greičiau, todėl sutrumpėja puslapio įkėlimo laikas.

"Blogging Wizard" naudoja "Sucuri" (ji apima ugniasienę saugumui užtikrinti ir CDN), tačiau yra ir kitų kokybiškų paslaugų teikėjų, pavyzdžiui, "Amazon" "Cloudfront" arba "KeyCDN". Net populiarioji "CloudFlare", kuri nėra griežtai CDN, siūlo nemokamą CDN ir ją lengva nustatyti daugumoje bendrųjų prieglobos paketų.

Vaizdo suspaudimas

Optimizuojant vaizdus, niekas taip nesumažina failo dydžio kaip pažangus nuostolingas vaizdų glaudinimas.

Dauguma vaizdų redagavimo įrankių, tokių kaip "Visme" ar "Photoshop", išsaugo failus naudodami nuostolingą JPEG suspaudimą, nes jis geriausiai sumažina failo dydį. Taigi, nors vaizdo kokybė šiek tiek sumažėja, naudojant nuostolingą vaizdų suspaudimą didžiuliai vaizdai sumažinami iki žiniatinkliui tinkamo dydžio.

Esu tikras, kad daugelis, kurie naudoja "Photoshop", gali peržiūrėti jos Išsaugoti žiniatinkliui funkciją, kuri yra pagrindinė ir galutinė vaizdų optimizavimo priemonė. Net ir internetinės vaizdų redagavimo priemonės, tokios kaip "PicMonkey" ar "Visme", taip pat optimizuoja vaizdus.

Bet ar žinojote, kad yra įrankių, kurie gali paimti "optimizuotą" vaizdą iš "Photoshop" ar kitų redagavimo įrankių, jį sutrinti ir suspausti dar 40 % (ar daugiau) ir vis dar ar ji atrodo beveik identiška žmogaus akiai?

Štai keletas nemokamų ir mokamų įrankių, padėsiančių sutrumpinti vaizdus iki tinklapiui tinkamos būklės.

Darbalaukio įrankiai

"ImageAlpha" / "ImageOptim

"Mac" kompiuterio naudotojams "ImageOptim" yra nemokama darbalaukio priemonė, kurią kasdien naudoju PNG vaizdams - dažniausiai ekrano nuotraukoms - optimizuoti prieš juos įkeldamas. Šiomis priemonėmis lengva naudotis, tiesiog vilkite ir nuleiskite failus, tačiau vienu metu reikia daryti po vieną vaizdą.

Profesionalų patarimas : Techniškai išprususiems vartotojams siūloma "ImageOptim-CLI", kurioje vienu metu galite optimizuoti visą vaizdų aplanką.

"ImageAlpha" yra nuostolingas PNG glaudintuvas ir gali daryti stebuklus mažinant PNG failus, o "ImageOptim" atlieka pažangų suspaudimą be nuostolių (su nuostolių galimybe) ir iš PNG, JPEG ir GIF failų pašalina nereikalingus metaduomenis.

PNG paveikslėlius pirmiausia paleidžiu per programą "ImageAlpha":

Čia mano ekrano nuotraukos vaizdas buvo sumažintas nuo 103 iki 28 tūkst.

Tada paleidau jį per "ImageOptim" ir sutaupiau papildomus 10 %.

JPEGmini

JPEG failus optimizavau naudodamas darbalaukio programą "JPEGmini", kurią galima naudoti ir "Mac", ir "Windows".

"Lite" versija leidžia nemokamai optimizuoti iki 20 vaizdų per dieną, o norint panaikinti šį apribojimą, reikia sumokėti 19,99 USD.

Profesionalų patarimas : Pažengę naudotojai, norintys integruoti "JPEGmini" į "Photoshop" arba "Lightroom" įskiepį, gali įsigyti "Pro" versiją už 99,99 USD.

Internetiniai / debesijos / SaaS įrankiai

TinyPNG

Jei ieškote aukštos kokybės internetinės vaizdų glaudinimo priemonės, "TinyPNG" (nepaisant pavadinimo, ji taip pat optimizuoja JPEG failus) yra žiniatinklio programa, kuri leidžia į naršyklę vilkti iki 20 5 MB ar mažesnių vaizdų ir optimizuoti juos visus iš karto.

Jie taip pat turi kūrėjų API ir "WordPress" įskiepį, kuris gali automatiškai optimizuoti vaizdus juos įkėlus.

"TinyPNG" suteikia 500 nemokamų vaizdų optimizavimo operacijų per mėnesį, o po to, priklausomai nuo apimties, ima 0,002-0,009 USD už vieną vaizdą.

Dabar 500 paveikslėlių per mėnesį gali atrodyti daug, bet jei atsižvelgsite į tai, kad "WordPress" dažnai sukuria 3-5 skirtingų dydžių kiekvieno paveikslėlio variantus, 500 paveikslėlių neatrodo daug. kad daugelis Daug rašantiems tinklaraštininkams. Laimei, vieno vaizdo kaina yra draugiška biudžetui.

EWWW vaizdo optimizatorius

Jei nesate pasirengę leisti pinigų ir nenorite rūpintis rankiniu vaizdų optimizavimu, nemokamas "WordPress" įskiepis "EWWW Image Optimizer" gali automatiškai optimizuoti įkeltus vaizdus.

Galite pasirinkti "Premium" prenumeratą, kuri atlieka glaudinimą be nuostolių, tačiau nemokama versija atlieka tik glaudinimą be nuostolių, todėl sutaupoma ne tiek daug. Tačiau tai padės sutaupyti laiko ir yra geriau nei nieko.

Pastaba: Išsamią informaciją rasite mūsų pranešime apie vaizdų glaudinimo įrankius.

Apibendrinimas

Kai kurie prognozuoja, kad iki 2017 m. vidutinis tinklalapio dydis priartės prie 3 MB, todėl dabar pats laikas pradėti optimizuoti vaizdus.

Atminkite, kad ne visi lankytojai naudosis sparčiuoju ryšiu, o puslapio išpūstas vaizdas ir lėtas puslapio įkrovimo laikas gali turėti įtakos jūsų pozicijai "Google" paieškoje. Kad palengvintumėte krūvį, jau šiandien pradėkite optimizuoti vaizdus.

Atkreipkite dėmesį į vaizdų matmenis ir per dideles nuotraukas arba skaitmeniniu fotoaparatu padarytus vaizdus sumažinkite iki tinkamo dydžio.

Tada pasinaudokite šiuolaikinio vaizdų suspaudimo privalumais naudodami darbalaukio programas, tokias kaip "JPEGmini", arba debesų įrankius, tokius kaip "TinyPNG" ar "Kraken", ir, jei įmanoma, integruokite juos į "WordPress" naudodami įskiepį.

Galiausiai, jei jūsų leidybos platforma automatiškai sukuria sumažinto dydžio originalaus paveikslėlio variantus, tinklaraščio įrašui pasirinkite vieną iš jų, o ne originalų pilno dydžio paveikslėlį.

Susijęs skaitymas: 7 būdai, kaip sumažinti PDF failų dydį.