Ettekö rakastakin kuvia?

Kuvat parantavat blogikirjoitusta, tekevät siitä jakokelpoisemman ja määrittävät koko sivuston sävyn ja brändin.

Tiedätkö mitä? Meidät on synnynnäisesti suunniteltu reagoimaan kuviin. Siksi kuvien sisällyttäminen sisältöön on tehokas väline blogin markkinoinnissa.

Mutta jos et ole varovainen, kuvat voivat muodostaa yli puolet (tai enemmänkin) verkkosivusi kokonaiskoosta. Vielä muutama vuosi sitten verkkosivun keskikoko oli 600-700 kilotavua. Nyt keskikoko on 2 megatavua, ja se kasvaa joka vuosi.

Se on valtava!

Suurin syy tähän on se, että verkkosivuilla käytetään yhä useammin useita kuvia, joita ei ole oikein mitoitettu ja optimoitu, eli niitä ei tallenneta tai koota verkkoystävällisellä tavalla, vaan ne paisuttavat sivuja.

Useimmat meistä kuitenkin jättävät kuvien optimoinnin jälkikäteen ja nauttivat mieluummin hauskasta, kuten eeppisen postauksen laatimisesta tai verkostoitumisesta muiden oman alansa bloggaajien kanssa.

Sivun paisuminen tarkoittaa kuitenkin sitä, että sivun latausnopeus kärsii. Tämä ei ehkä ole sinusta iso asia, jos sinulla on nopea yhteys, mutta monilla kävijöilläsi ei ole. Google ei myöskään pidä hitaasti latautuvista sivuista, ja se voi vaikuttaa kielteisesti hakukoneoptimointiin.

Miksi kuvat on optimoitava

Teet kovasti töitä luodaksesi erinomaista sisältöä ja käytät lukemattomia tunteja blogisi edistämiseen ja verkostoitumiseen muiden bloggaajien kanssa, joten viimeinen asia, jonka haluat, on se, että potentiaaliset kävijät hylkäävät verkkosivustosi ennen kuin se edes latautuu!

Tutkimusten mukaan jopa 40 prosenttia kävijöistä klikkaa takaisin-painiketta, jos sivuston lataus kestää yli kolme sekuntia.

Tiedän, että kolme sekuntia ei ole kovin pitkä aika, mutta kun käytät mobiiliyhteyttä ja odotat sivuston latautumista, sekunti voi tuntua ikuisuudelta.

Ja koska monet kävijöistäsi saattavat käyttää hitaampia mobiiliyhteyksiä, on selvää, että sivujen kokoa on pienennettävä. Ja tiedämme jo, mikä on suurin syyllinen sivujen paisumiseen - kuvat.

Tarpeettoman suuret kuvat vievät myös tilaa hosting-tililtäsi. Vaikka joillakin teistä saattaa olla hosting, jossa on "rajoittamaton" tallennustila, monet premium-hosting-palveluntarjoajat rajoittavat tallennustilan noin 10 Gt:iin alemman tason paketeissa. Tämä voi täyttyä nopeasti, varsinkin jos samalla tilillä on useita kuvapainotteisia sivustoja.

Miten voit siis todeta, hidastavatko kuvat sivustosi toimintaa? Testaa sivustosi nopeus Google PageSpeed Insightsin avulla.

Jos Google ilmoittaa ongelmaksi optimoimattomat kuvat, sinun on tiedettävä, miten se korjataan.

Kuvan optimoinnin perusteet

Blogisi kuvien optimoinnissa on muutamia eri asioita, jotka sinun on otettava huomioon: tiedostotyyppi, kuvien koko ja mitat, kuvien tarjoilutapa ja kuvien pakkaaminen.

Tarkastellaan lähemmin kutakin näistä aloista.

Tiedostotyyppi

Verkkokuvat tallennetaan yleensä PNG- tai JPEG-tiedostomuodossa - tai GIF-animaatioissa. Kukapa ei rakastaisi näitä hauskoja animoituja GIF-kuvia, jotka liikkuvat verkossa!

Nyt se on teknisesti Okei jos tallennat kuvasi kummassa tahansa muodossa - vierailijasi selaimella ei ole ongelmia näyttää verkkosivusi - mutta parasta laatua ja optimointia varten noudata seuraavia sääntöjä:

• JPEG - käytetään valokuviin ja malleihin, joissa on ihmisiä, paikkoja tai asioita.
• PNG - paras grafiikoille, logoille, tekstipainotteisille suunnitelmille, kuvakaappauksille ja kun tarvitset kuvia, joissa on läpinäkyvä tausta.
• GIF - jos tarvitset animaatioita, muuten käytä PNG:tä.

Miksi sitten on olemassa eri formaatteja?

PNG:tä käytetään perinteisesti logojen ja grafiikan tallentamiseen, koska se säilyttää alkuperäisen kuvan laadun - kukaan ei halua epätarkkaa tekstiä ja pikselimäisiä muotoja. Mutta jos yrität tallentaa valokuvan PNG-muodossa, se näyttää upealta, mutta tiedostokoko on vähemmän upea kuin upea.

JPEG-muotoa käytetään perinteisesti valokuvien tallentamiseen. Osa kuvatiedoista heitetään pois, jotta tiedostokoko olisi huomattavasti pienempi, mutta koska valokuvissa on paljon erilaisia värejä ja luonnollisia vaihteluita, laadun heikkeneminen on yleensä ihmissilmälle huomaamatonta.

Käymme pakkauksesta tarkemmin läpi myöhemmin, mutta nyt jos muistat vain kaksi asiaa, muista: JPEG valokuville ja PNG tekstille/grafiikalle.

Kuvan mitat

Oletko koskaan ladannut verkkosivun ja huomannut, että pienen kuvan (esimerkiksi pääkuvan) lataaminen kestää f-o-r-e-e-v-e-r? Niin hitaasti, että näet jokaisen rivin tulevan? Mietit itseksesi, miten niin pienen kuvan lataaminen voi kestää niin kauan?

Ja kun se tapahtuu isolle otsikkokuvalle, se on vielä pahempaa, koska se voi hidastaa koko sivun latautumista.

Tämä johtuu siitä, että bloggaaja ei ole muuttanut ja optimoinut kuvansa kokoa oikein, ja esimerkkimme tapauksessa hän on saattanut ladata täyden resoluution JPEG-kuvan suoraan DSLR-kamerastaan.

Ja se on valtava tiedosto!

Selain skaalaa kuvan (yleensä) alkuperäisistä mitoistaan, jotta se mahtuu hyvin paikalleen verkkosivulle. Ruudulla pieneltä näyttävä kuva voi todellisuudessa olla valtava 10 megapikselin valokuva, jota selain skaalaa reaaliaikaisesti.

Jotkin verkkojulkaisualustat luovat automaattisesti useita eri kokoisia muunnelmia täyden resoluution kuvastasi, mutta jos näin ei ole, sinun kannattaa muuttaa kuvien kokoa etukäteen kuvankäsittelyohjelmassa, kuten Photoshopissa, Lightroomissa, Pixlrissä - tai jopa MS Paintissa. Se voi merkitä eroa 50 kilotavun ja 5 megatavun tiedoston välillä.

WordPress esimerkiksi luo automaattisesti kolme (tai useampia, teemasta riippuen) kopiota lataamastasi kuvasta - kaikki eri kokoisia - joita voit käyttää blogikirjoituksissa sen sijaan, että käyttäisit aina täysikokoista kuvaa.

Jos sinulla on tapana ladata valtavia varastokuvia ja haluat säästää tilaa hosting-tililläsi, WordPress-lisäosa Imsanity on tukenasi.

Se muuttaa alkuperäisen kuvan kokoa ja korvaa sen jollain helpommin hallittavissa olevalla tavalla, joten vaikka lisäisit täysikokoisen kuvan postaukseesi, se ei ole niin paha.

Kun Imsanity on aktivoitu, se voi myös etsiä olemassa olevia kuvia ja muuttaa niiden kokoa.

Kuvien palveleminen

Se, miten tarjoat kuvat kävijöille, ei ole sinänsä varsinaisesti niiden optimointia, mutta sillä voi olla suuri vaikutus sivun latausaikaan.

Useimmat bloggaajat käyttävät kuviaan suoraan hosting-tililtään, ja se on yleensä hyvä asia, mutta jos haluat todella puristaa kaiken suorituskyvyn irti sivustostasi, kuvien isännöinti CDN-verkossa (Content Delivery Network) voi tehdä suuren eron.

CDN koostuu strategisesti sijoitetuista verkkopalvelimista, jotka sijaitsevat eri puolilla maailmaa sijaitsevissa datakeskuksissa. Näillä palvelimilla säilytetään kopioita kuvistasi, ja kun kävijän selain pyytää kuvaa verkkosivustoltasi, CDN ohjaa selaimen automaattisesti palvelimelle, joka on maantieteellisesti lähimpänä.

Tämä tarkoittaa, että esimerkiksi Euroopasta tulevat kävijät saavat kuvat paikalliselta eurooppalaiselta palvelimelta eikä Yhdysvalloista tai muualta. Koska vasteaika ja verkon viive lyhenee, kuvat latautuvat paljon nopeammin, mikä lyhentää sivun latausaikaa.

Blogging Wizard käyttää Sucuria (se sisältää palomuurin turvallisuutta varten sekä CDN:n), mutta on olemassa muitakin laadukkaita palveluntarjoajia, kuten Amazonin Cloudfront tai KeyCDN. Jopa suosittu CloudFlare, joka ei ole varsinaisesti CDN, tarjoaa CDN:n ilmaiseksi ja se on helppo asentaa useimpiin jaettuihin hosting-paketteihin.

Kuvan pakkaaminen

Kun kyse on kuvien optimoinnista, mikään ei pienennä tiedostokokoa enemmän kuin kehittynyt häviöllinen kuvapakkaus.

Useimmat kuvankäsittelytyökalut, kuten Visme tai Photoshop, tallentavat tiedostot käyttämällä häviöllistä JPEG-pakkausta, koska se pienentää tiedostokokoa parhaiten. Vaikka kuvan laatu heikkenee hieman, häviöllisen pakkauksen käyttö pienentää valtavat kuvat web-ystävälliseen kokoon.

Olen varma, että monet, jotka käyttävät Photoshop saattaa nähdä sen Tallenna verkkoon ominaisuutta kuvien optimoinnin kaikkena ja kaikkena. Ja jopa verkossa olevat kuvankäsittelytyökalut, kuten PicMonkey tai Visme, optimoivat myös kuvasi.

Mutta tiesitkö, että on olemassa työkaluja, jotka voivat ottaa "optimoidun" kuvasi Photoshopista tai muista muokkaustyökaluista, puristaa ja pakata sen vielä 40 % (tai enemmän) ja edelleen saada se näyttämään lähes identtiseltä ihmissilmän kanssa?

Seuraavassa on joitakin ilmaisia ja maksullisia työkaluja, joiden avulla voit muokata kuvasi web-ystävällisiksi.

Työpöytätyökalut

ImageAlpha / ImageOptim

Mac-käyttäjälle ImageOptim on ilmainen työpöytätyökalu, jota käytän päivittäin optimoimaan PNG-kuvia - enimmäkseen kuvakaappauksia - ennen niiden lataamista. Nämä työkalut ovat helppokäyttöisiä, raahaat ja pudotat tiedostot, mutta ne on tehtävä yksi kuva kerrallaan.

Ammattilaisen vinkki : Teknisesti taitaville on ImageOptim-CLI, jolla voit optimoida kokonaisen kuvakansio kerralla.

ImageAlpha on häviöllinen PNG-pakkausohjelma, ja se voi tehdä ihmeitä PNG-tiedostojen kutistamisessa, kun taas ImageOptim suorittaa kehittyneen häviöttömän (myös häviöllisen) pakkauksen - ja se poistaa tarpeettomat metatiedot PNG-, JPEG- ja GIF-tiedostoista.

PNG-kuvani ajetaan ensin ImageAlphan läpi:

Tässä se pienensi kuvakaappaukseni 103 kilosta 28 kiloon.

Sitten ajoin sen ImageOptimin kautta ja säästin ylimääräiset 10 %.

JPEGmini

Optimoin JPEG-tiedostoni työpöydän JPEGmini-sovelluksella, joka on saatavilla sekä Macille että Windowsille.

Lite-versiossa voit optimoida enintään 20 kuvaa päivässä ilmaiseksi, ja rajoituksen poistaminen maksaa 19,99 dollaria.

Ammattilaisen vinkki : Edistyneet käyttäjät, jotka haluavat integroida JPEGminin Photoshopiin tai Lightroomiin lisäosan avulla, voivat ostaa 99,99 dollarin hintaisen Pro-version.

Online / pilvi / SaaS-työkalut

TinyPNG

Jos etsit laadukasta online-kuvanpakkaustyökalua, TinyPNG (se optimoi myös JPEG-tiedostoja nimestään huolimatta) on verkkosovellus, jonka avulla voit raahata selaimeesi enintään 20 5 Mt:n tai pienempää kuvaa ja optimoida ne kaikki kerralla.

Heillä on myös kehittäjärajapinta ja WordPress-liitännäinen, joka voi optimoida kuvat automaattisesti latauksen yhteydessä.

TinyPNG antaa sinulle 500 ilmaista kuvaoptimointia kuukaudessa, minkä jälkeen se veloittaa 0,002-0,009 dollaria kuvaa kohden, riippuen kuvamäärästä.

500 kuvaa kuukaudessa saattaa kuulostaa paljolta, mutta kun otetaan huomioon, että WordPress luo usein kolmesta viiteen eri kokoista variaatiota kustakin kuvasta, 500 kuvaa ei tunnu kovinkaan suurelta. että monet Onneksi kuvakohtainen hinta on budjettiystävällinen.

EWWW Image Optimizer

Jos et ole valmis käyttämään rahaa etkä halua vaivautua optimoimaan kuvia manuaalisesti, WordPressin ilmainen EWWW Image Optimizer -lisäosa voi optimoida ladatut kuvat automaattisesti.

Voit valita premium-tilauksen, joka suorittaa häviöllisen pakkauksen, mutta ilmaisversio suorittaa vain häviöttömän pakkauksen, joten säästöt eivät ole läheskään yhtä merkittäviä. Se säästää kuitenkin aikaa ja on parempi kuin ei mitään.

Huom: Jos haluat täydellisen katsauksen, tutustu kuvanpakkaustyökaluja käsittelevään kirjoitukseemme.

Pakkaaminen

Kun jotkut ennustavat, että verkkosivujen keskimääräinen koko lähestyy 3 Mt vuoteen 2017 mennessä, on nyt aika aloittaa kuvien optimointi.

Muista, että kaikilla kävijöilläsi ei ole nopeita yhteyksiä, ja sivujen paisuminen ja hitaat latausajat voivat vaikuttaa sijoitukseesi Googlessa. Helpottaaksesi kuormaa niin sanotusti, ota tavaksi optimoida kuvasi jo tänään.

Kiinnitä huomiota kuvien mittoihin ja muuta liian suurten varastokuvien tai digitaalikameralla otettujen kuvien kokoa sopivaksi.

Hyödynnä seuraavaksi nykyaikaista kuvapakkausta työpöytäsovelluksilla, kuten JPEGmini, tai pilvityökaluilla, kuten TinyPNG tai Kraken - integroi ne WordPressiin laajennuksella, jos mahdollista.

Jos julkaisualustasi luo automaattisesti alkuperäisen kuvan kokomuunnoksia, valitse blogikirjoitukseesi mieluummin yksi näistä kuin alkuperäinen, täysikokoinen kuva.

Aiheeseen liittyvää lukemista: 7 tapaa pienentää PDF-tiedostojen kokoa.