Zar ne volite slike?

One mogu pretvoriti dio teksta u zanimljivo iskustvo dok čitate. Slike poboljšavaju post na blogu, čine ga lakšim za dijeljenje i postavljaju ton i brend cijele vaše web-lokacije.

I znate što? Ustrojeni smo da reagiramo na slike. Zato je uključivanje slika u vaš sadržaj moćan alat koji možete koristiti prilikom marketinga vašeg bloga.

Ali, ako niste pažljivi, slike mogu činiti više od polovice (ili više) ukupne veličine vaše web stranice. Prije samo nekoliko godina prosječna veličina web stranice bila je 600–700K. Sada je prosjek 2 MB i povećava se svake godine.

To je ogromno!

Glavni razlog zašto se to događa je taj što se više slika češće koristi na web stranicama, a te slike nisu nije odgovarajuće veličine i optimiziran. To znači da se ne spremaju niti kompajliraju na način prilagođen webu, već napuhuju vaše stranice.

Većina nas ipak ostavlja optimizaciju slika kao naknadnu misao i radije bi uživala radeći zabavne stvari kao što je izrada epskog posta ili umrežavanje s drugim blogerima u vašoj niši.

Ali, povećanje stranice znači da to utječe na brzinu učitavanja stranice. Možda ne mislite da je to velika stvar ako ste na brzoj vezi, ali mnogi vaši posjetitelji nisu. Također, Google ne voli stranice koje se sporo učitavaju i to može negativno utjecati na vaš SEO.

Zašto trebate optimizirati slike

Naporno radite nastvarajući zvjezdani sadržaj i provodite nebrojene sate promovirajući svoj blog i umrežavajući se s drugim blogerima, tako da posljednja stvar koju želite je da potencijalni posjetitelji napuste vašu web stranicu prije nego što se uopće učita!

Studije pokazuju da do 40% posjetitelji kliknu gumb Natrag ako web-mjestu treba dulje od tri sekunde da se učita.

Znam, tri sekunde stvarno nisu tako dugo, ali kada ste na mobilnoj vezi i čekate stranica za učitavanje, sekunda se može činiti kao vječnost.

A budući da je mnogo vaših posjetitelja možda na sporijim mobilnim vezama, postaje jasno – trebate smanjiti veličinu stranice. I već znamo koji je najveći krivac za povećanje veličine stranice – to su vaše slike.

Nepotrebno velike slike također zauzimaju prostor na vašem hosting računu. Dok neki od vas možda imaju hosting s "neograničenim" prostorom za pohranu, mnogi vrhunski pružatelji usluga hostinga ograničavaju vas na oko 10 GB prostora za pohranu na nižim planovima. To se može brzo popuniti, osobito ako na istom računu hostirate više web-lokacija s velikim brojem slika.

Dakle, kako možete znati usporavaju li vaše slike vašu web-lokaciju? Testirajte brzinu svoje web-lokacije s Google PageSpeed ​​Insights.

Ako Google prijavi neoptimizirane slike kao problem, evo što trebate znati da biste to riješili.

Osnove optimizacije slika

Kada je u pitanju optimizacija slika na vašem blogu, postoji nekoliko različitih stvari koje morate bitisvjesni: vrste datoteke, veličine i dimenzija slike, načina na koji poslužujete svoje slike i kompresije slike.

Pogledajmo pobliže svako od ovih područja.

Vrsta datoteke

Slike na webu obično se spremaju u formatu datoteke PNG ili JPEG – ili GIF za animaciju. Tko ne voli te smiješne animirane GIF-ove koji lebde webom!

Sada je tehnički u redu ako svoje slike spremate u bilo kojem formatu – preglednik vašeg posjetitelja neće imati problema s prikazivanjem vaše web stranice – ali za najbolju kvalitetu i optimizaciju pridržavajte se sljedećih pravila:

• JPEG – koristite za fotografije i dizajne na kojima su prikazani ljudi, mjesta ili stvari
• PNG – najbolje za grafiku , logotipi, tekstualni dizajni, snimke zaslona i kada su vam potrebne slike s prozirnom pozadinom
• GIF – ako vam je potrebna animacija, inače koristite PNG

Dakle, zašto postoje različiti formati ?

Pa, PNG se tradicionalno koristi za spremanje logotipa i grafike jer čuva izvornu kvalitetu slike – nitko ne želi mutan tekst i pikselizirane oblike. Ali, ako pokušate spremiti fotografiju kao PNG, izgledat će nevjerojatno, ali rezultirajuća veličina datoteke bit će manje nego nevjerojatna.

JPEG se tradicionalno koristi za spremanje fotografija. Neki se slikovni podaci odbacuju kako bi se stvorila drastično manja veličina datoteke, ali budući da fotografije sadrže veliki izbor boja i prirodnih varijacija, gubitak kvalitete jeobično neprimjetan ljudskom oku.

Kasnije ćemo govoriti o više detalja o kompresiji, ali za sada ako se sjećate samo dvije stvari, zapamtite: JPEG za fotografije i PNG za tekst/grafiku.

Dimenzije slike

Jeste li ikada učitali web-stranicu i primijetili da je malenoj slici (možda snimci glave, na primjer) potrebno f-o-r-e-v-e-r da se preuzme? Kao, tako sporo da možete vidjeti svaki redak koji dolazi? Razmišljate kako može tako mala slika trajati tako dugo da se preuzme?

A kada se to dogodi velikoj slici zaglavlja, još je gore jer može zaustaviti učitavanje cijele stranice.

Razlog zašto se to događa je taj što bloger nije ispravno promijenio veličinu i optimizirao svoju sliku, a u slučaju našeg primjera snimke glave, možda je prenio JPEG pune rezolucije izravno sa svog DSLR fotoaparata.

A to je ogromna datoteka!

Vidite, web preglednik će (obično) smanjiti sliku u odnosu na njezine izvorne dimenzije tako da lijepo stane na svoje mjesto na web stranici. Ono što se čini kao mala slika na zaslonu stvarno može biti ogromna fotografija od 10 megapiksela koju preglednik smanjuje u stvarnom vremenu.

Sada će neke platforme za web objavljivanje automatski stvoriti više varijacija vaše slike pune rezolucije u različitim veličine, ali ako ne, trebali biste unaprijed promijeniti veličinu slika u uređivaču slika kao što je Photoshop, Lightroom, Pixlr – ili čak MS Paint. To može značiti razlikuizmeđu datoteke od 50K i datoteke od 5MB.

WordPress će, na primjer, automatski stvoriti tri (ili više, ovisno o vašoj temi) kopije vaše učitane slike – sve s različitim dimenzijama – koje možete koristiti u postovima na blogu, umjesto da uvijek koristite sliku u punoj veličini.

Ako imate naviku učitavati ogromne slike s fotografijama i želite uštedjeti prostor na svom računu za hosting, dodatak za WordPress Imsanity vam čuva leđa.

Mijenja veličinu i zamjenjuje izvornu sliku nečim lakšim za rukovanje, pa čak i ako umetnete sliku u punoj veličini u svoj post, neće biti tako loše.

Nakon što se aktivira, Imsanity također može pretraživati ​​vaše postojeće slike i promijeniti im veličinu u skladu s tim.

Posluživanje vaših slika

Način na koji svoje slike poslužujete svojim posjetiteljima ne odnosi se striktno na njihovo optimiziranje per se , ali to može imati dramatičan utjecaj na vrijeme učitavanja vaše stranice.

Većina blogera poslužuje svoje slike izravno sa svog računa za hosting i to je obično u redu, ali ako stvarno želite iscijediti svaki djelić performansi iz Vaše web mjesto, tada smještaj Vaših slika na Content Delivery Network (CDN) može napraviti veliku razliku.

CDN se sastoji od strateški postavljenih web poslužitelja smještenih u podatkovnim centrima diljem svijeta. Ovi poslužitelji ugošćuju duplicirane kopije vaših slika i kada preglednik posjetitelja zatraži sliku s vaše web stranice, CDN automatski usmjerava preglednik naposlužitelj koji im je zemljopisno najbliži.

To znači da će posjetitelji iz Europe, na primjer, primati slike koje se poslužuju s lokalnog europskog poslužitelja, a ne s poslužitelja iz Sjedinjenih Država ili drugdje. Budući da je vrijeme odgovora i mrežna latencija smanjena, slike se preuzimaju puno brže, smanjujući vrijeme učitavanja stranice.

Čarobnjak za bloganje koristi Sucuri (uključuje vatrozid za sigurnost kao i CDN), ali postoje i drugi pružatelji kvalitete poput Amazonovog Cloudfronta ili KeyCDN-a. Čak i popularni CloudFlare, koji nije striktno CDN, nudi CDN besplatno i lako ga je postaviti u većini dijeljenih hosting paketa.

Kompresija slike

Kada je u pitanju optimizacija vašeg slike, ništa ne smanjuje veličinu vaše datoteke više od napredne kompresije slike s gubitkom.

Većina alata za uređivanje slika kao što su Visme ili Photoshop spremat će datoteke pomoću JPEG kompresije s gubitkom budući da ima najbolja smanjenja veličine datoteke. Dakle, iako je kvaliteta slike malo smanjena, korištenje kompresije slike s gubitkom smanjuje ogromne slike na veličine prilagođene webu.

Siguran sam da bi mnogi koji koriste Photoshop mogli vidjeti njegovu značajku Spremi za web kao be-sve i end-all optimizacije slike. Čak i online alati za uređivanje slika kao što su PicMonkey ili Visme također optimiziraju vaše slike.

Ali jeste li znali da postoje alati koji mogu uzeti vašu "optimiziranu" sliku iz Photoshopa ili drugih alata za uređivanje, zgnječiti je i komprimirati za još 40% (ili više),i još uvijek izgleda li gotovo identično ljudskom oku?

Evo nekoliko besplatnih i plaćenih alata koji će vam pomoći da svoje slike smanjite na status prilagođen za web.

Alati za stolna računala

ImageAlpha / ImageOptim

Za korisnike Mac računala, ImageOptim je besplatni alat za stolna računala koji koristim svaki dan za optimiziranje PNG slika – uglavnom snimaka zaslona – prije nego što ih prenesem. Ovi su alati jednostavni za korištenje, samo povlačite i ispuštate svoje datoteke, ali morate raditi jednu po jednu sliku.

Profesionalni savjet : Za tehnološke stručnjake tu je ImageOptim– CLI, gdje možete optimizirati cijelu mapu slika odjednom.

ImageAlpha je PNG kompresor s gubicima i može učiniti čuda sa smanjivanjem PNG datoteka dok ImageOptim izvodi naprednu kompresiju bez gubitaka (s mogućnošću gubitka) – i to uklanja nepotrebne metapodatke iz PNG, JPEG i GIF datoteka.

Za moje PNG slike, prvo ih pokrećem kroz ImageAlpha:

Ovdje je smanjio moju sliku zaslona sa 103K na 28K.

Zatim sam ga pokrenuo kroz ImageOptim i uštedio dodatnih 10%.

JPEGmini

Za svoje JPEG datoteke, optimiziram ih pomoću aplikacije JPEGmini za stolna računala, dostupne za Mac i Windows.

Lite verzija vam omogućuje besplatno optimiziranje do 20 slika dnevno, a uklanjanje ograničenja košta 19,99 USD.

Profesionalni savjet : Napredni korisnici koji žele integrirati JPEGmini u Photoshop ili Lightroom putem dodatka mogu kupiti Pro verziju za99,99 USD.

Online / Cloud / SaaS alati

TinyPNG

Ako tražite visokokvalitetni mrežni alat za kompresiju slika, TinyPNG (optimizira JPEG datoteke unatoč nazivu) je web-aplikacija koja vam omogućuje da povučete do 20 5MB ili manjih slika u svoj preglednik i optimizirate ih sve odjednom.

Također imaju API za razvojne programere i izrađuju WordPress dostupan dodatak koji može automatski optimizirati vaše slike nakon učitavanja.

TinyPNG vam daje 500 besplatnih optimizacija slika mjesečno, a nakon toga naplaćuje od 0,002 do 0,009 USD po slici, ovisno o količini.

Sada 500 slika mjesečno može zvučati puno, ali kada uzmete u obzir činjenicu da WordPress često stvara tri do pet varijacija svake slike u različitim veličinama, 500 slika ne čini se kao toliko za plodnog blogera. Srećom, cijena po slici je povoljna.

EWWW Image Optimizer

Ako niste spremni potrošiti novac i ne želite se zamarati optimizacijom vaše slike ručno, besplatni dodatak EWWW Image Optimizer za WordPress može automatski optimizirati vaše učitane slike.

Možete se odlučiti za premium pretplatu koja vrši kompresiju s gubitkom, ali besplatna verzija izvodi samo kompresiju bez gubitaka, tako da ušteda nije t gotovo jednako značajan. Uštedjet će vam vrijeme i ipak je bolje nego ništa.

Napomena: Za potpuni pregled pogledajtenaš post o alatima za kompresiju slika.

Zaključujući

Budući da neki ljudi predviđaju da će se prosječna veličina web stranice približiti 3MB do 2017., sada je vrijeme da počnete optimizirati svoje slike.

Zapamtite, neće svi vaši posjetitelji biti na brzim vezama, a preopterećenost stranice i sporo vrijeme učitavanja stranice mogu potencijalno utjecati na vaš rang kod Googlea. Kako bismo vam olakšali teret, da tako kažem, steknite naviku optimiziranja svojih slika danas.

Obratite pozornost na dimenzije svoje slike i smanjite veličinu svih prevelikih fotografija ili slika s digitalnog fotoaparata na odgovarajuću veličina.

Zatim, iskoristite prednosti moderne kompresije slika s aplikacijama za stolna računala kao što je JPEGmini ili alatima u oblaku kao što su TinyPNG ili Kraken – integrirajte ih u WordPress s dodatkom ako je moguće.

Na kraju, ako vaš izdavačka platforma automatski stvara varijacije vaše izvorne slike promijenjene veličine, odaberite jednu od ovih za svoj post na blogu, umjesto originalne, pune veličine.

Povezano čitanje: 7 načina za smanjenje Veličina PDF datoteka.