Kas sa ei armasta pilte?

Need võivad muuta teksti lugemise ajal kaasahaaravaks elamuseks. Pildid parandavad blogipostitust, muudavad selle paremini jagatavaks ning määravad kogu teie saidi tooni ja brändi.

Ja teate, me oleme loomupäraselt valmis reageerima piltidele. Seepärast on piltide lisamine teie sisusse võimas vahend, mida saate oma blogi turundamisel kasutada.

Kuid kui te ei ole ettevaatlik, võivad pildid moodustada üle poole (või rohkemgi) teie veebilehe kogumahust. Veel mõned aastad tagasi oli veebilehe keskmine suurus 600-700K. Nüüd on keskmine suurus 2MB ja see kasvab iga aastaga.

See on tohutu!

Peamine põhjus, miks see juhtub, on see, et veebilehtedel kasutatakse üha sagedamini mitut pilti ning neid pilte ei ole korralikult suurendatud ja optimeeritud. See tähendab, et neid ei salvestata ega koostata veebisõbralikul viisil, vaid need paisutavad teie lehekülgi.

Enamik meist jätab aga piltide optimeerimise tagaplaanile ja naudib pigem lõbusaid asju, nagu eepilise postituse koostamine või võrgustike loomine teiste oma niši blogijatega.

Kuid lehe paisumine tähendab, et see mõjutab teie lehekülje laadimise kiirust. Te ei pruugi arvata, et see on suur probleem, kui teil on kiire ühendus, kuid paljud teie külastajad ei ole seda. Samuti ei meeldi Google'ile aeglaselt laadivad leheküljed ja see võib teie SEO-d negatiivselt mõjutada.

Miks on vaja pilte optimeerida

Te töötate kõvasti selle nimel, et luua silmapaistvat sisu ja kulutate lugematuid tunde oma blogi edendamiseks ja teiste blogijatega võrgustike loomiseks, seega viimane asi, mida te soovite, on see, et potentsiaalsed külastajad loobuksid teie veebisaidist enne, kui see isegi laadib!

Uuringud näitavad, et kuni 40% külastajatest klõpsab tagasi nupule, kui veebilehe laadimine võtab kauem kui kolm sekundit.

Ma tean, et kolm sekundit ei ole tegelikult nii pikk aeg, kuid kui sa oled mobiilsideühenduses ja ootad saidi laadimist, võib sekund tunduda igavikuna.

Ja kuna paljud teie külastajad võivad kasutada aeglasemaid mobiilühendusi, siis on selge, et peate vähendama oma lehe suurust. Ja me teame juba, mis on suurim lehe suuruse paisumise põhjustaja - see on teie pildid.

Asjatult suured pildid võtavad samuti ruumi teie veebimajutuskontol. Kuigi mõnel teist võib olla "piiramatu" salvestusruumiga veebimajutus, piiravad paljud kõrgema taseme veebimajutuse pakkujad madalama taseme pakettidel umbes 10 GB salvestusruumi. See võib kiiresti täis saada, eriti kui te majutate samal kontol mitmeid pildirikkaid veebisaite.

Kuidas saate teada, kas teie pildid aeglustavad teie veebilehte? Testige oma veebilehe kiirust Google PageSpeed Insights'i abil.

Kui Google teatab optimeerimata piltidest kui probleemist, siis on vaja teada, kuidas seda parandada.

Pildi optimeerimise põhitõed

Kui tegemist on piltide optimeerimisega oma blogis, on mõned erinevad asjad, mida peate silmas pidama: failitüüp, pildi suurus ja mõõtmed, piltide esitamise viis ja pildikompressioon.

Vaadakem lähemalt kõiki neid valdkondi.

Faili tüüp

Veebis olevad pildid salvestatakse tavaliselt PNG või JPEG failiformaadis - või GIF animatsiooni puhul. Kellele ei meeldiks need lõbusad animeeritud GIF-id, mis veebis ringi hõljuvad!

Nüüd on see tehniliselt okei kui salvestate oma pildid mõlemas formaadis - külastaja brauseril ei ole probleeme teie veebilehe kuvamisega -, kuid parima kvaliteedi ja optimeerimise tagamiseks peaksite järgima järgmisi reegleid:

• JPEG - kasutatakse fotode ja kujunduste jaoks, kus on kujutatud inimesi, kohti või asju.
• PNG - parim graafika, logode, tekstirikaste kujunduste, ekraanipiltide ja läbipaistva taustaga piltide jaoks.
• GIF - kui vajate animatsiooni, muidu kasutage PNG-d.

Miks on siis erinevad formaadid?

PNG-d kasutatakse traditsiooniliselt logode ja graafika salvestamiseks, sest see säilitab originaalpildi kvaliteedi - keegi ei taha hägune tekst ja pikslilised kujundid. Aga kui proovite salvestada fotot PNG-formaadis, näeb see küll hämmastav välja, kuid faili suurus on vähem kui hämmastav.

JPEG on traditsiooniliselt kasutusel fotode salvestamiseks. Osa pildiandmetest visatakse ära, et luua oluliselt väiksem faili suurus, kuid kuna fotod sisaldavad väga erinevaid värve ja loomulikke variatsioone, on kvaliteedikadu inimsilmale tavaliselt märkamatu.

Hiljem räägime tihendamisest lähemalt, kuid kui teil on meeles ainult kaks asja, siis pidage meeles: JPEG fotode jaoks ja PNG teksti/graafika jaoks.

Pildi mõõtmed

Kas olete kunagi laadinud veebilehe ja märganud, et pisikese pildi (võib-olla näiteks peafoto) allalaadimine võtab f-o-r-e-v-e-r? Nii aeglaselt, et näete iga rida tulemas? Te mõtlete endamisi, kuidas saab nii väikese pildi allalaadimine nii kaua aega võtta?

Ja kui see juhtub suure pealkirjapildiga, on see veelgi hullem, sest see võib peatada kogu lehe laadimise.

Põhjus, miks see juhtub, on see, et blogija ei ole oma pilti korralikult ümber seadistanud ja optimeerinud, ning meie näite puhul võib-olla on ta laadinud täislahutusega JPEG-faili otse oma DSLR-kaamerast.

Ja see on suur fail!

Näete, et veebilehitseja skaleerib (tavaliselt) pilti selle algsetest mõõtmetest nii, et see sobiks kenasti oma kohale veebilehele. See, mis ekraanil näib olevat väike pilt, võib tegelikult olla suur 10-megapiksline foto, mida veebilehitseja on reaalajas vähendanud.

Nüüd loovad mõned veebiplatvormid automaatselt mitu varianti teie täislahutusega pildist eri suurustes, kuid kui see ei ole nii, siis peaksite oma pilte eelnevalt pilditöötlusprogrammis, nagu Photoshop, Lightroom, Pixlr - või isegi MS Paint, suuruse muutma. See võib tähendada erinevust 50-kilose faili ja 5MB suuruse faili vahel.

WordPress näiteks loob automaatselt kolm (või rohkem, olenevalt teemast) koopiat üleslaetud pildist - kõik erinevate mõõtmetega -, mida saate kasutada blogipostitustes, selle asemel et kasutada alati täissuuruses pilti.

Kui teil on kombeks laadida üles suuri stockfotosid ja soovite oma hostingukontol ruumi säästa, siis WordPressi plugin Imsanity on teile abiks.

See muudab originaalpildi suurust ja asendab selle käepärasemaks, nii et isegi kui lisate täissuuruses pildi oma postitusse, ei ole see nii halb.

Kui Imsanity on aktiveeritud, saab ka teie olemasolevaid pilte otsida ja nende suurust vastavalt muuta.

Piltide serveerimine

See, kuidas te oma pilte külastajatele pakute, ei ole otseselt seotud nende optimeerimisega, kuid sellel võib olla märkimisväärne mõju teie lehekülje laadimisaegadele.

Enamik blogijaid edastab oma pilte otse oma veebimajutuskontolt ja see on tavaliselt hea, kuid kui soovite oma veebilehe jõudluse maksimaalselt ära kasutada, siis võib piltide majutamine sisutusvõrgus (CDN) olla väga oluline.

CDN koosneb strateegiliselt paigutatud veebiserveritest, mis asuvad andmekeskustes üle kogu maailma. Need serverid sisaldavad teie piltide koopiaid ja kui külastaja brauser küsib teie veebisaidilt pilti, suunab CDN brauseri automaatselt sellele serverile, mis on talle geograafiliselt kõige lähemal.

See tähendab, et näiteks Euroopast pärit külastajad saavad pilte kätte kohalikust Euroopa serverist, mitte Ameerika Ühendriikidest või mujalt. Kuna reageerimisaeg ja võrgu latentsus on vähenenud, laadivad pildid palju kiiremini alla, mis vähendab lehekülje laadimisaega.

Blogging Wizard kasutab Sucuri (see sisaldab turvalisuse tagamiseks nii tulemüüri kui ka CDNi), kuid on ka teisi kvaliteetseid teenusepakkujaid, nagu Amazoni Cloudfront või KeyCDN. Isegi populaarne CloudFlare, mis ei ole rangelt võttes CDN, pakub CDNi tasuta ja seda on lihtne seadistada enamikus jagatud hostingupakettides.

Pildi tihendamine

Kui tegemist on piltide optimeerimisega, ei vähenda miski faili suurust rohkem kui täiustatud kadudega pildikompressioon.

Enamik pilditöötlusvahendeid, nagu Visme või Photoshop, salvestab faile kasutades kadudega JPEG-kompressiooni, kuna see vähendab faili suurust kõige paremini. Seega, kuigi pildi kvaliteet on veidi vähenenud, vähendab kadudega pildikompressiooni kasutamine tohutuid pilte veebisõbralike suurusteni.

Ma olen kindel, et paljud, kes kasutavad Photoshopi, võivad vaadata selle Salvesta veebi jaoks funktsioon kui pildi optimeerimise kõik ja kõik. Ja isegi veebipõhised pilditöötlusvahendid nagu PicMonkey või Visme optimeerivad teie pilte samuti.

Kuid kas teadsite, et on olemas vahendid, mis võivad võtta teie "optimeeritud" pildi Photoshopist või muudest redigeerimisvahenditest, seda veel 40% (või rohkem) kokku suruda ja ikka on see peaaegu identne inimsilmaga?

Siin on mõned tasuta ja tasulised tööriistad, mis aitavad teil oma pilte veebisõbralikuks muuta.

Töölaua tööriistad

ImageAlpha / ImageOptim

Mac-kasutajale on ImageOptim tasuta töölaua tööriist, mida ma kasutan iga päev PNG-piltide - enamasti ekraanipiltide - optimeerimiseks enne nende üleslaadimist. Neid vahendeid on lihtne kasutada, lihtsalt lohistad ja lased oma failid üles, kuid sa pead tegema ühe pildi korraga.

Pro nõuanne : Tehnikahuvilistele on olemas ImageOptim-CLI, millega saate optimeerida korraga terve kausta pilte.

ImageAlpha on kadudega PNG-kompressor ja võib teha imesid PNG-failide kahandamisel, samal ajal kui ImageOptim teostab täiustatud kadudeta (võimalusega kadudega) pakkimist - ja see eemaldab ebavajalikud metaandmed PNG-, JPEG- ja GIF-failidest.

Oma PNG-piltide puhul lasen ma need kõigepealt läbi ImageAlpha:

Siin vähendas see minu ekraanipilti 103K-lt 28K-le.

Seejärel jooksutasin selle läbi ImageOptimi ja säästsin veel 10%.

JPEGmini

Oma JPEG-faile optimeerin töölaua JPEGmini rakendusega, mis on saadaval nii Macile kui ka Windowsile.

Lite-versioon võimaldab tasuta optimeerida kuni 20 pilti päevas, piirangu kaotamine maksab 19,99 dollarit.

Pro nõuanne : Edasijõudnud kasutajad, kes soovivad integreerida JPEGmini Photoshopi või Lightroomi pluginaga, saavad osta Pro-versiooni 99,99 dollari eest.

Online / pilvepõhised / SaaS tööriistad

TinyPNG

Kui otsite kvaliteetset veebipõhist pildikompressiooni tööriista, siis TinyPNG (see optimeerib ka JPEG-faile, hoolimata nimest) on veebirakendus, mis võimaldab teil lohistada brauserisse kuni 20 5 MB või väiksemat pilti ja lasta need kõik korraga optimeerida.

Neil on ka arendajate API ja nad teevad kättesaadavaks WordPressi pluginad, mis suudavad pilte üleslaadimisel automaatselt optimeerida.

TinyPNG annab teile 500 tasuta pildi optimeerimist kuus ja pärast seda võetakse sõltuvalt mahust 0,002-0,009 dollarit pildi kohta.

Nüüd 500 pilti kuus võib tunduda palju, kuid kui arvestada asjaolu, et WordPress loob sageli kolm kuni viis varianti igast pildist erinevates suurustes, ei tundu 500 pilti nagu et paljud Õnneks on pildi hind eelarvesõbralik.

EWWW pildi optimeerija

Kui te ei ole valmis raha kulutama ja te ei taha oma piltide käsitsi optimeerimisega vaeva näha, siis tasuta EWWW Image Optimizer plugin WordPressi jaoks võib automaatselt optimeerida teie üleslaaditud pilte.

Saate valida lisatellimuse, mis teostab kadudega pakkimist, kuid tasuta versioon teostab ainult kadudeta pakkimist, nii et kokkuhoid ei ole kaugeltki nii märkimisväärne. See säästab teie aega ja on siiski parem kui mitte midagi.

Märkus: Täieliku ülevaate saamiseks vaadake meie postitust pildikompressiooni tööriistade kohta.

Kokkupakkimine

Kuna mõned inimesed ennustavad, et 2017. aastaks läheneb keskmine veebilehe suurus 3 MB-le, on nüüd aeg alustada oma piltide optimeerimist.

Pidage meeles, et mitte kõik teie külastajad ei kasuta kiireid ühendusi ning lehekülje paisumine ja aeglane laadimisaeg võivad mõjutada teie Google'i edetabelit. Et aidata teil koormust nii öelda kergendada, võtke harjumus oma pilte juba täna optimeerida.

Pöörake tähelepanu pildi mõõtmetele ja muutke liiga suurte fotode või digikaameraga tehtud piltide suurust sobiva suurusega.

Järgmisena kasutage ära kaasaegset pildikompressiooni töölauarakenduste, näiteks JPEGmini, või pilvetööriistade, näiteks TinyPNG või Kraken, abil - võimalusel integreerige need WordPressi pluginaga.

Lõpuks, kui teie avaldamisplatvorm loob automaatselt originaalpildi suurendatud variante, valige oma blogipostituse jaoks pigem üks neist kui originaal, mis on täissuuruses.

Seotud lugemine: 7 viisi PDF-failide suuruse vähendamiseks.