Ali ne obožujete slik?

Besedilo lahko spremenijo v zanimivo izkušnjo med branjem. Slike izboljšajo objavo na spletnem dnevniku, jo naredijo bolj deljivo ter določajo ton in blagovno znamko celotnega spletnega mesta.

In veste kaj? Ljudje se odzivamo na slike. Zato je vključitev slik v vsebino močno orodje, ki ga lahko uporabite pri trženju svojega bloga.

Če niste previdni, lahko slike predstavljajo več kot polovico (ali več) celotne velikosti spletne strani. Še pred nekaj leti je bila povprečna velikost spletne strani 600-700 K, zdaj pa je povprečna velikost 2 MB in se vsako leto povečuje.

To je ogromno!

Glavni razlog za to je, da se na spletnih straneh vse pogosteje uporablja več slik, ki niso ustrezno dimenzionirane in optimizirane. To pomeni, da niso shranjene ali sestavljene na spletu prijazen način, temveč povečujejo obseg strani.

Večina od nas pa optimizacijo slik pusti na stranskem tiru in raje uživa v zabavnih stvareh, kot je ustvarjanje epske objave ali mreženje z drugimi blogerji v svoji niši.

Vendar pa preobsežnost strani pomeni, da se zmanjša hitrost nalaganja strani. Če uporabljate visokohitrostno povezavo, se vam to morda ne zdi pomembno, vendar številni obiskovalci niso. Poleg tega Google ne mara počasnega nalaganja strani in to lahko negativno vpliva na vašo SEO.

Zakaj morate optimizirati slike

Trdo si prizadevate za ustvarjanje vrhunske vsebine in nešteto ur porabite za promocijo svojega bloga in mreženje z drugimi blogerji, zato je zadnja stvar, ki si jo želite, da bi potencialni obiskovalci zapustili vašo spletno stran, še preden se naloži!

Študije kažejo, da do 40 % obiskovalcev klikne gumb nazaj, če se spletno mesto nalaga več kot tri sekunde.

Vem, tri sekunde res niso tako dolge, vendar ko ste v mobilni povezavi in čakate, da se spletno mesto naloži, se sekunda lahko zdi kot večnost.

Ker veliko vaših obiskovalcev uporablja počasnejše mobilne povezave, je jasno, da morate zmanjšati velikost strani. In že vemo, kaj je največji krivec za preveliko velikost strani - to so vaše slike.

Nepotrebno velike slike prav tako zasedajo prostor na računu za gostovanje. Čeprav imajo nekateri izmed vas gostovanje z "neomejenim" prostorom za shranjevanje, vas številni ponudniki vrhunskega gostovanja omejujejo na približno 10 GB prostora za shranjevanje pri nižjih paketih. Ta prostor se lahko hitro zapolni, še posebej če na istem računu gostujete več spletnih mest z veliko slikami.

Kako lahko ugotovite, ali vaše slike upočasnjujejo delovanje spletnega mesta? Preverite hitrost spletnega mesta z orodjem Google PageSpeed Insights.

Če Google kot težavo navede neoptimizirane slike, morate vedeti, kaj morate vedeti, da jo odpravite.

Osnove optimizacije slik

Pri optimizaciji slik v blogu se morate zavedati nekaj različnih stvari: vrste datoteke, velikosti in dimenzij slik, načina prikazovanja slik ter stiskanja slik.

Podrobneje si oglejmo vsako od teh področij.

Vrsta datoteke

Slike na spletu so običajno shranjene v datotečnem formatu PNG ali JPEG - ali GIF za animacijo. Kdo ne obožuje teh zabavnih animiranih GIF-ov, ki krožijo po spletu!

Zdaj je tehnično v redu če slike shranite v obeh oblikah, brskalnik obiskovalca ne bo imel težav s prikazom vaše spletne strani, vendar se za najboljšo kakovost in optimizacijo držite naslednjih pravil:

• JPEG - uporabite za fotografije in oblikovanje, na katerih so predstavljeni ljudje, kraji ali stvari.
• PNG - najboljši za grafike, logotipe, zasnove z veliko besedila, posnetke zaslona in kadar potrebujete slike s prozornim ozadjem.
• GIF - če potrebujete animacijo, sicer uporabite PNG

Zakaj obstajajo različni formati?

PNG se tradicionalno uporablja za shranjevanje logotipov in grafike, saj ohranja kakovost izvirne slike - nihče si ne želi zamegljenega besedila in pikčastih oblik. Toda če poskusite shraniti fotografijo kot PNG, bo videti čudovito, vendar bo velikost datoteke manj kot čudovita.

Za shranjevanje fotografij se tradicionalno uporablja JPEG. Nekaj slikovnih podatkov se zavrže, da se ustvari bistveno manjša velikost datoteke, ker pa fotografije vsebujejo veliko različnih barv in naravnih variacij, je izguba kakovosti človeškemu očesu običajno neopazna.

O stiskanju bomo podrobneje govorili pozneje, zdaj pa si zapomnite le dve stvari: JPEG za fotografije in PNG za besedilo/grafijo.

Dimenzije slik

Ste že kdaj naložili spletno stran in opazili, da se majhna slika (na primer posnetek glave) prenaša tako počasi, da lahko vidite vsako vrstico? Pomislili ste, kako se lahko tako majhna slika prenaša tako dolgo?

Če se to zgodi z veliko sliko v glavi, je še huje, saj lahko ustavi nalaganje celotne strani.

Razlog za to je, da bloger ni ustrezno spremenil velikosti in optimiziral svoje slike, v primeru našega primera posnetka glave pa je morda naložil sliko JPEG polne ločljivosti neposredno iz fotoaparata DSLR.

In to je ogromna datoteka!

Spletni brskalnik sliko (običajno) pomanjša od njenih prvotnih dimenzij, da se lepo prilega svojemu mestu na spletni strani. Kar se zdi majhna slika na zaslonu, je lahko v resnici velika 10-megapikselska fotografija, ki jo je brskalnik v realnem času pomanjšal.

Nekatere platforme za spletno objavljanje samodejno ustvarijo več različic slike polne ločljivosti v različnih velikostih, če pa ne, morate velikost slik predhodno spremeniti v urejevalniku slik, kot so Photoshop, Lightroom, Pixlr ali celo MS Paint. To lahko pomeni razliko med 50-kilogramsko in 5 MB datoteko.

WordPress bo na primer samodejno ustvaril tri (ali več, odvisno od teme) kopije naložene slike - vse z različnimi dimenzijami -, ki jih lahko uporabite v objavah na blogu, namesto da bi vedno uporabil sliko v polni velikosti.

Če imate navado nalagati velike slike s fotografijami in želite prihraniti prostor na računu gostovanja, vam vtičnik WordPress Imsanity pomaga.

Spremeni velikost in nadomesti izvirno sliko v bolj obvladljivo, tako da tudi če v objavo vstavite sliko v polni velikosti, ne bo tako slabo.

Ko je program Imsanity aktiviran, lahko poišče tudi vaše obstoječe slike in ustrezno spremeni njihovo velikost.

Podajanje slik

Način prikazovanja slik obiskovalcem sam po sebi ni nujno povezan z njihovo optimizacijo, vendar lahko bistveno vpliva na čas nalaganja strani.

Večina blogerjev svoje slike posreduje neposredno iz računa gostovanja in to je običajno v redu, če pa želite iz svojega spletnega mesta iztisniti vsak delček zmogljivosti, lahko gostovanje slik v omrežju CDN (Content Delivery Network) pomeni veliko razliko.

CDN sestavljajo strateško postavljeni spletni strežniki v podatkovnih centrih po vsem svetu. Ti strežniki gostijo podvojene kopije vaših slik in ko brskalnik obiskovalca zahteva sliko z vašega spletnega mesta, CDN samodejno usmeri brskalnik v strežnik, ki je geografsko najbližje.

To pomeni, da bodo na primer obiskovalci iz Evrope prejeli slike, ki jih bo prikazal lokalni evropski strežnik, in ne strežnik iz ZDA ali od drugod. Ker sta odzivni čas in zakasnitev omrežja manjša, se slike prenesejo veliko hitreje, kar skrajša čas nalaganja strani.

Čarovnik za bloganje uporablja Sucuri (vključuje požarni zid za varnost in CDN), obstajajo pa tudi drugi kakovostni ponudniki, kot sta Amazonov Cloudfront ali KeyCDN. Celo priljubljeni CloudFlare, ki ni strogo CDN, ponuja CDN brezplačno in ga je enostavno nastaviti v večini paketov deljenega gostovanja.

Stiskanje slik

Ko gre za optimizacijo slik, nič ne zmanjša velikosti datoteke bolj kot napredno stiskanje slik brez izgub.

Večina orodij za urejanje slik, kot sta Visme ali Photoshop, shrani datoteke z uporabo stiskanja JPEG z izgubami, saj se pri tem najbolj zmanjša velikost datoteke. Čeprav se kakovost slike nekoliko zmanjša, se z uporabo stiskanja slik z izgubami ogromne slike zmanjšajo na velikost, prijazno do spleta.

Prepričan sem, da mnogi, ki uporabljajo Photoshop, lahko pogledajo njegovo Shrani za splet funkcijo, ki je vse in edina za optimizacijo slik. Tudi spletna orodja za urejanje slik, kot sta PicMonkey ali Visme, optimizirajo vaše slike.

Toda ali ste vedeli, da obstajajo orodja, ki lahko vzamejo vašo "optimizirano" sliko iz programa Photoshop ali drugih orodij za urejanje, jo skrčijo in stisnejo še za 40 % (ali več) ter še vedno je videti skoraj enako človeškemu očesu?

Tukaj je nekaj brezplačnih in plačljivih orodij, ki vam bodo pomagala zmanjšati število slik do stanja, primernega za splet.

Orodja za namizne računalnike

ImageAlpha / ImageOptim

Za uporabnike računalnikov Mac je ImageOptim brezplačno namizno orodje, ki ga vsak dan uporabljam za optimizacijo slik PNG - večinoma zaslonskih slik - preden jih prenesem. Ta orodja so enostavna za uporabo, datoteke samo povlečete in spustite, vendar morate to storiti za eno sliko naenkrat.

Nasvet za strokovnjake : Za tehnično podkovane uporabnike je na voljo program ImageOptim-CLI, s katerim lahko optimizirate celotno mapo slik naenkrat.

ImageAlpha je kompresor PNG z izgubo in lahko naredi čudeže pri krčenju datotek PNG, medtem ko ImageOptim izvaja napredno stiskanje brez izgube (z možnostjo izgube) - in odstranjuje nepotrebne metapodatke iz datotek PNG, JPEG in GIF.

Slike PNG najprej zaženem skozi program ImageAlpha:

Tukaj je zmanjšala mojo sliko zaslonske slike s 103 K na 28 K.

Nato sem ga pregledal v programu ImageOptim in prihranil dodatnih 10 %.

JPEGmini

Datoteke JPEG optimiziram z namizno aplikacijo JPEGmini, ki je na voljo za Mac in Windows.

Različica Lite vam omogoča brezplačno optimizacijo do 20 slik na dan, za odpravo omejitve pa je treba plačati 19,99 dolarja.

Nasvet za strokovnjake : Napredni uporabniki, ki želijo JPEGmini vključiti v program Photoshop ali Lightroom s pomočjo vtičnika, lahko kupijo različico Pro za 99,99 USD.

Spletna orodja / orodja v oblaku / SaaS

TinyPNG

Če iščete visokokakovostno spletno orodje za stiskanje slik, je TinyPNG (kljub imenu optimizira tudi datoteke JPEG) spletna aplikacija, ki vam omogoča, da v brskalnik povlečete do 20 5 MB ali manjših slik in jih vse naenkrat optimizirate.

Imajo tudi vmesnik API za razvijalce in na voljo vtičnik za WordPress, ki lahko samodejno optimizira slike ob nalaganju.

TinyPNG vam omogoča 500 brezplačnih optimizacij slik na mesec, nato pa zaračuna od 0,002 do 0,009 USD na sliko, odvisno od količine.

500 slik na mesec se morda zdi veliko, vendar če upoštevate dejstvo, da WordPress pogosto ustvari tri do pet različic vsake slike v različnih velikostih, se 500 slik ne zdi veliko. da je veliko na srečo so stroški na sliko prijazni do proračuna.

EWWW Image Optimizer

Če niste pripravljeni zapraviti denarja in se ne želite ukvarjati z ročno optimizacijo slik, lahko brezplačni vtičnik EWWW Image Optimizer za WordPress samodejno optimizira naložene slike.

Lahko se odločite za naročnino Premium, ki omogoča stiskanje brez izgub, vendar brezplačna različica omogoča le stiskanje brez izgub, zato prihranki niso tako veliki. Vendar vam bo prihranila čas in je boljša kot nič.

Opomba: Za popoln pregled si oglejte našo objavo o orodjih za stiskanje slik.

Zaključek

Ker nekateri napovedujejo, da se bo povprečna velikost spletne strani do leta 2017 približala 3 MB, je zdaj čas, da začnete optimizirati svoje slike.

Ne pozabite, da vsi vaši obiskovalci ne bodo imeli hitrih povezav, zato lahko preobsežnost strani in počasno nalaganje strani vplivata na vašo uvrstitev v Googlu. Da bi tako rekoč zmanjšali obremenitev, se še danes navadite optimizirati svoje slike.

Bodite pozorni na dimenzije slik in prevelike fotografije iz zaloge ali slike iz digitalnega fotoaparata zmanjšajte na ustrezno velikost.

Nato izkoristite prednosti sodobnega stiskanja slik z namiznimi aplikacijami, kot je JPEGmini, ali orodji v oblaku, kot sta TinyPNG ali Kraken, in jih po možnosti vključite v WordPress z vtičnikom.

Če vaša platforma za objavljanje samodejno ustvari pomanjšane različice izvirne slike, izberite eno od teh različic za objavo v blogu in ne izvirne slike v polni velikosti.

Sorodno branje: 7 načinov za zmanjšanje velikosti datotek PDF.