Seuraava artikkeli auttaa sinua: Kuvien optimointi Internetiä varten
Etkö rakasta kuvia?
He voivat muuttaa tekstin kiinnostavaksi kokemukseksi lukiessasi. Kuvat parantavat blogitekstiä, tekevät siitä jaettavan ja määrittävät koko sivustosi sävyn ja brändin.
Ja tiedätkö mitä? Olemme sitoutuneet vastaamaan kuviin. Siksi kuvien sisällyttäminen sisältöösi on tehokas työkalu blogisi markkinoinnissa.
Mutta jos et ole varovainen, kuvat voivat muodostaa yli puolet (tai enemmän) verkkosivusi kokonaiskoosta. Vielä muutama vuosi sitten verkkosivun keskikoko oli 600–700 kt. Nyt keskiarvo on 2 Mt, ja se kasvaa joka vuosi.
Se on valtava!
Suurin syy tähän on se, että useita kuvia käytetään useammin verkkosivuilla, eivätkä kuvat ole oikean kokoisia ja optimoituja. Tämä tarkoittaa, että niitä ei tallenneta tai käännetä verkkoystävällisellä tavalla, vaan ne turvottavat sivujasi.
Useimmat meistä jättävät kuvien optimoinnin kuitenkin jälkikäteen ja nauttivat mieluummin hauskoista asioista, kuten eeppisen postauksen tekemisestä tai verkostoitumisesta muiden oman markkinaraon bloggaajien kanssa.
Mutta sivun turpoaminen tarkoittaa, että sivusi latausnopeuteen vaikuttaa. Et ehkä usko, että tämä on iso juttu, jos käytät nopeaa yhteyttä, mutta monet vierailijoistasi eivät ole. Google ei myöskään pidä hitaasti latautuvista sivuista, ja se voi vaikuttaa negatiivisesti hakukoneoptimointiisi.
Miksi kuvat pitää optimoida
Työskentelet ahkerasti luodaksesi loistavaa sisältöä ja vietät lukemattomia tunteja blogisi mainostamiseen ja verkostoitumiseen muiden bloggaajien kanssa, joten viimeinen asia, jonka haluat, on, että mahdolliset vierailijat jättävät verkkosivustosi ennen kuin se edes latautuu!
Tutkimukset osoittavat, että jopa 40 % kävijöistä napsauttaa Takaisin-painiketta, jos sivuston latautuminen kestää yli kolme sekuntia.
Tiedän, kolme sekuntia ei todellakaan ole niin pitkä aika, mutta kun olet mobiiliyhteydessä ja odotat sivuston latautumista, sekunti voi tuntua ikuiselta.
Ja koska monet vierailijat voivat käyttää hitaampia mobiiliyhteyksiä, käy selväksi – sinun on pienennettävä sivusi kokoa. Ja me tiedämme jo, mikä on suurin sivukoon turvotuksen aiheuttaja – se on sinun kuvasi.
Tarpeettoman suuret kuvat vievät myös tilaa isännöintitililtäsi. Vaikka joillakin teistä voi olla isännöinti “rajattomasti” tallennustilalla, monet premium-isännöintipalveluntarjoajat rajoittavat sinua noin 10 Gt:n tallennustilaan alemman tason suunnitelmissa. Tämä voi täyttyä nopeasti, varsinkin jos isännöit useita kuvia sisältäviä sivustoja samalla tilillä.
Joten miten voit kertoa, hidastavatko kuvat sivustosi toimintaa? Testaa sivustosi nopeutta Google PageSpeed Insights.
Jos Google ilmoittaa optimoimattomista kuvista ongelman, tässä on mitä sinun on tiedettävä ongelman korjaamiseksi.
Kuvan optimoinnin perusteet
Mitä tulee blogisi kuvien optimointiin, sinun on otettava huomioon muutama eri seikka: tiedostotyyppi, kuvan koko ja mitat, kuvien näyttäminen ja kuvien pakkaus.
Tarkastellaanpa tarkemmin jokaista näistä alueista.
Tiedostotyyppi
Verkossa olevat kuvat tallennetaan yleensä PNG- tai JPEG-tiedostomuodossa – tai GIF-muodossa animaatioita varten. Kukapa ei rakastaisi niitä hauskoja animoituja GIF-kuvia, jotka kelluvat verkossa!
Nyt se on teknisesti mahdollista, jos tallennat kuvasi jommassakummassa muodossa – vierailijasi selaimella ei ole ongelmia Web-sivusi näyttämisessä – mutta parhaan laadun ja optimoinnin saavuttamiseksi noudata seuraavia sääntöjä:
- JPEG – käytä valokuvissa ja kuvioissa, joissa on ihmisiä, paikkoja tai asioita
- PNG – paras grafiikka, logot, raskaat tekstit, kuvakaappaukset ja kun tarvitset kuvia läpinäkyvällä taustalla
- GIF – jos tarvitset animaatiota, käytä muuten PNG:tä
Joten miksi on olemassa erilaisia muotoja?
No, PNG:tä käytetään perinteisesti logojen ja grafiikan tallentamiseen, koska se säilyttää alkuperäisen kuvanlaadun – kukaan ei halua epäselvää tekstiä ja pikselöityjä muotoja. Mutta jos yrität tallentaa valokuvan PNG-muodossa, se näyttää hämmästyttävältä, mutta tuloksena oleva tiedostokoko on vähemmän kuin hämmästyttävä.
JPEG:tä käytetään perinteisesti valokuvien tallentamiseen. Osa kuvatiedoista heitetään pois, jotta tiedostokokoa voidaan pienentää huomattavasti, mutta koska valokuvat sisältävät paljon erilaisia värejä ja luonnollisia vaihteluita, laadun heikkeneminen on yleensä ihmissilmälle huomaamaton.
Käsittelemme pakkausta tarkemmin myöhemmin, mutta nyt, jos muistat vain kaksi asiaa, muista: JPEG valokuville ja PNG tekstille/grafiikalle.
Kuvan mitat
Oletko koskaan ladannut verkkosivua ja huomannut, että pienen kuvan (ehkä esimerkiksi pääkuvan) lataaminen kestää ikuisuuden? Niin hitaasti, että näet jokaisen rivin tulevan sisään? Mietit itseksesi, kuinka niin pienen kuvan lataaminen voi kestää niin kauan?
Ja kun se tapahtuu suurelle otsikkokuvalle, se on vielä pahempaa, koska se voi pysäyttää koko sivun lataamisen.
Syy tähän on se, että bloggaaja ei ole muuttanut kuvan kokoa ja optimoinut sitä oikein, ja esimerkkimme tapauksessa hän on saattanut ladata täyden resoluution JPEG-tiedoston suoraan DSLR-kamerastaan.
Ja se on valtava tiedosto!
Katsos, verkkoselain skaalaa (yleensä) kuvan alkuperäisistä mitoistaan niin, että se sopii hyvin paikoilleen verkkosivulla. Se, mikä näyttää pieneltä kuvaruudulla, voi todella olla valtava 10 megapikselin valokuva, jonka selain pienentää reaaliajassa.
Nyt jotkin verkkojulkaisuympäristöt luovat automaattisesti useita muunnelmia täyden resoluution kuvastasi eri kokoisina, mutta jos ei, sinun tulee muuttaa kuvien kokoa etukäteen kuvankäsittelyohjelmassa, kuten Photoshop, Lightroom, Pixlr – tai jopa MS Paint. Se voi tarkoittaa eroa 50 000 tiedoston ja 5 Mt:n tiedoston välillä.
WordPress esimerkiksi luo automaattisesti kolme (tai useampia, teemasta riippuen) kopiota ladatusta kuvasta – kaikki eri kokoisina – joita voit käyttää blogikirjoituksissa sen sijaan, että käyttäisit aina täysikokoista kuvaa.
Jos sinulla on tapana ladata valtavasti arkistovalokuviaja haluat säästää tilaa hosting-tililläsi, WordPress-laajennuksessa Hulluutta on selkäsi.
Se muuttaa alkuperäisen kuvan kokoa ja korvaa sen jollain helpommin hallittavalla tavalla, joten vaikka lisäisit täysikokoisen kuvan viestiisi, se ei ole niin paha.
Kun Imsanity on aktivoitu, se voi myös etsiä olemassa olevia kuviasi ja muuttaa niiden kokoa vastaavasti.
Kuviesi palveleminen
Tapa, jolla näytät kuviasi vierailijoille, ei tarkoita pelkästään niiden optimointia sinänsä, mutta sillä voi olla dramaattinen vaikutus sivusi latausaikaan.
Useimmat bloggaajat näyttävät kuvansa suoraan isännöintitililtään, ja se on yleensä hienoa, mutta jos todella haluat puristaa sivustosi tehokkuuden kaiken irti, kuvien isännöiminen sisällönjakeluverkostossa (CDN) voi olla suuri ero. .
CDN koostuu strategisesti sijoitetuista web-palvelimista, jotka sijaitsevat palvelinkeskuksissa ympäri maailmaa. Nämä palvelimet isännöivät kuviesi päällekkäisiä kopioita, ja kun vierailijan selain pyytää kuvaa verkkosivustoltasi, CDN ohjaa selaimen automaattisesti palvelimelle, joka on niitä maantieteellisesti lähimpänä.
Tämä tarkoittaa, että esimerkiksi Euroopasta saapuvat vierailijat saavat kuvia paikalliselta eurooppalaiselta palvelimelta valtioiden tai muualta tulevien palvelinten sijaan. Koska vasteaika ja verkon latenssi ovat lyhyempiä, kuvat latautuvat paljon nopeammin, mikä lyhentää sivun latausaikaa.
Ohjattu bloggaustoiminto käyttää Sucuria (se sisältää palomuurin turvallisuuden takaamiseksi sekä CDN:n), mutta on muitakin laatutarjoajia, kuten Amazonin Cloudfront tai KeyCDN. Jopa suosittu CloudFlare, joka ei ole tiukasti CDN, tarjoaa CDN:n ilmaiseksi ja on helppo asentaa useimmissa jaetuissa hosting-paketeissa.
Kuvan pakkaus
Mitä tulee kuvien optimointiin, mikään ei pienennä tiedostokokoa enemmän kuin edistynyt häviöllinen kuvanpakkaus.
Useimmat kuvankäsittelytyökalut, kuten Visme tai Photoshop, tallentavat tiedostot häviöisellä JPEG-pakkauksella, koska siinä on parhaat tiedostokoon pienennykset. Joten vaikka kuvanlaatu on hieman heikentynyt, häviöllisen kuvanpakkauksen käyttö pienentää valtavat kuvat verkkoystävällisiin kokoihin.
Olen varma, että monet Photoshopin käyttäjät saattavat pitää sen ominaisuutta kuvien optimoinnin ykkösenä. Ja jopa online-kuvankäsittelytyökalut, kuten PicMonkey tai Visme, optimoivat myös kuvat.
Mutta tiesitkö, että on olemassa työkaluja, jotka voivat ottaa “optimoidun” kuvan Photoshopista tai muista muokkaustyökaluista, murskata ja pakata sitä vielä 40 % (tai enemmän) ja näyttääkö se lähes identtiseltä ihmissilmään?
Tässä on joitain ilmaisia ja maksullisia työkaluja, joiden avulla voit muokata kuvasi verkkoystä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äitä työkaluja on helppo käyttää, vedät ja pudotat vain tiedostoja, mutta sinun on tehtävä yksi kuva kerrallaan.
: Tekniikkatietoisille on ImageOptim–CLIjossa voit optimoida koko kuvakansion kerralla.
ImageAlpha on häviöllinen PNG-kompressori, joka voi tehdä ihmeitä kutistuvilla PNG-tiedostoilla, kun taas ImageOptim suorittaa edistyneen häviöttömän (häviöllisen) pakkaamisen – ja poistaa tarpeettomat metatiedot PNG-, JPEG- ja GIF-tiedostoista.
PNG-kuviani varten suoritan ne ensin ImageAlphan kautta:
Tässä se pienensi kuvakaappaukseni 103 kt:sta 28 kt:iin.
Ajoin sen sitten ImageOptimin kautta ja säästin ylimääräiset 10 %.
JPEGmini
JPEG-tiedostojani varten optimoin ne työpöydällä JPEGmini-sovellussaatavana sekä Macille että Windowsille.
Lite-version avulla voit optimoida jopa 20 kuvaa päivässä ilmaiseksi, ja rajoituksen poistaminen maksaa 19,99 dollaria.
: Edistyneet käyttäjät, jotka haluavat integroida JPEGminin Photoshopiin tai Lightroomiin laajennuksen avulla, voivat ostaa Pro-version hintaan 99,99 dollaria.
Online / Cloud / SaaS-työkalut
TinyPNG
Jos etsit korkealaatuista verkkokuvanpakkaustyökalua, TinyPNG (se optimoi myös JPEG-tiedostot nimestä huolimatta) on verkkosovellus, jonka avulla voit vetää jopa 20 5 Mt tai pienempiä kuvia selaimeesi ja optimoida ne. kaikki kerralla.
Heillä on myös kehittäjäsovellusliittymä ja he tekevät a WordPress-laajennus saatavilla, joka voi automaattisesti optimoida kuvat latauksen yhteydessä.
TinyPNG tarjoaa sinulle 500 ilmaista kuvan optimointia kuukaudessa, ja sen jälkeen veloittaa 0,002–0,009 dollaria per kuva äänenvoimakkuudesta riippuen.
Nyt 500 kuvaa kuukaudessa saattaa kuulostaa paljon, mutta kun ottaa huomioon sen, että WordPress luo usein kolmesta viiteen muunnelmaa jokaisesta kuvasta eri kokoisina, 500 kuvaa ei tunnu tuotteliaalle bloggaajalle. Onneksi kuvakohtainen hinta on budjettiystävällinen.
EWWW Image Optimizer
Jos et ole valmis käyttämään rahaa etkä halua vaivautua kuvien manuaaliseen optimointiin, ilmainen EWWW Image Optimizer WordPressin laajennus voi optimoida ladatut kuvat automaattisesti.
Voit valita premium-tilauksen, joka suorittaa häviöllisen pakkaamisen, mutta ilmainen versio suorittaa vain häviötöntä pakkausta, joten säästöt eivät ole läheskään yhtä merkittäviä. Se säästää aikaa ja on kuitenkin parempi kuin ei mitään.
Huomautus: Katso täydellinen yhteenveto kuvanpakkaustyökaluistamme.
Käärien sen
Jotkut ihmiset ennustavat verkkosivujen keskimääräisen koon lähestyvän 3 megatavua vuoteen 2017 mennessä, joten nyt on aika aloittaa kuvien optimointi.
Muista, että kaikki vierailijasi eivät käytä nopeita yhteyksiä, ja sivun turvotus ja sivujen hitaat latausajat voivat mahdollisesti vaikuttaa sijoituksesi Googlessa. Jotta voit keventää kuormaa niin sanotusti, ota tapa optimoida kuvat jo tänään.
Kiinnitä huomiota kuvasi mittoihin ja muuta liian suurten kuvien tai digitaalikameran kuvien kokoa sopivaan kokoon.
Hyödynnä seuraavaksi nykyaikaista kuvien pakkausta työpöytäsovelluksilla, kuten JPEGmini, tai pilvityökaluilla, kuten TinyPNG tai Kraken – integroi ne WordPressiin laajennuksen avulla, jos mahdollista.
Lopuksi, jos julkaisualustasi luo automaattisesti muunnelmia alkuperäisestä kuvastasi, valitse blogitekstillesi jokin näistä alkuperäisen täysikokoisen sijaan.
Aiheeseen liittyvää luettavaa: 7 tapaa pienentää PDF-tiedostojen kokoa.
