Zar ne volite slike?

One mogu transformirati 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 stranice.

I znate šta? Osposobljeni smo da odgovorimo na slike. Zato je ugrađivanje slika u vaš sadržaj moćan alat za oglašavanje vašeg bloga.

Ali, ako niste pažljivi, slike mogu činiti više od polovine (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 2MB i povećava se svake godine.

To je ogromno!

Glavni razlog zašto se ovo dešava je zato što se više slika češće koristi na web stranicama, a ove slike nisu nije odgovarajuće veličine i optimiziran. To znači da se ne spremaju ili kompajliraju na način prilagođen webu, već naduvavaju vaše stranice.

Većina nas ipak ostavlja optimizaciju slika kao naknadnu misao i radije bi uživali u zabavnim stvarima poput kreiranja epskog posta ili umrežavanja s drugim blogerima u vašoj niši.

Ali, naduvavanje stranice znači da utiče na brzinu učitavanja vaše stranice. Možda ne mislite da je ovo velika stvar ako ste na brzoj vezi, ali mnogi vaši posjetitelji nisu. Također, Google ne voli sporo učitavanje stranica, i to može negativno utjecati na vaš SEO.

Zašto trebate optimizirati slike

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

Studije pokazuju da do 40% posjetitelji kliknu na dugme za povratak ako je web-lokaciji potrebno duže od tri sekunde da se učita.

Znam, tri sekunde zaista nije tako dugo, ali kada ste na mobilnoj vezi i čekate stranica za učitavanje, sekunda može izgledati kao zauvijek.

A budući da je mnogo vaših posjetitelja možda na sporijim mobilnim vezama, postaje jasno – morate smanjiti veličinu stranice. A već znamo koji je najveći prestupnik napuhanosti stranice – to su vaše slike.

Nepotrebno velike slike također zauzimaju prostor na vašem hosting računu. Iako neki od vas možda imaju hosting sa "neograničenim" prostorom za pohranu, mnogi premium provajderi hostinga ograničavaju vas na oko 10 GB prostora za pohranu na planovima nižeg nivoa. Ovo se može brzo popuniti, posebno ako na istom računu hostirate više web-lokacija s velikim brojem slika.

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

Ako Google prijavi neoptimizirane slike kao problem, evo šta trebate znati da ga popravite.

Osnove optimizacije slika

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

Hajde da pobliže pogledamo svako od ovih područja.

Vrsta datoteke

Slike na webu se obično pohranjuju u PNG ili JPEG formatu datoteke – ili GIF za animaciju. Ko ne voli te urnebesne animirane GIF-ove koji lebde po webu!

Sada je tehnički u redu ako svoje slike spremite u bilo koji od formata – pretraživač vašeg posjetitelja neće imati problema s prikazom vaše web stranice – ali za najbolji kvalitet i optimizaciju, pridržavajte se sljedećih pravila:

• JPEG – koristite za fotografije i dizajne na kojima su predstavljeni ljudi, mjesta ili stvari
• PNG – najbolje za grafiku , logotipi, dizajni s teškim tekstom, snimke ekrana i kada su vam potrebne slike s prozirnom pozadinom
• GIF – ako trebate animaciju, u suprotnom koristite PNG

Pa, zašto postoje različiti formati ?

Pa, PNG se tradicionalno koristi za čuvanje logotipa i grafike jer čuva originalni kvalitet slike – niko ne želi mutan tekst i pikselizirane oblike. Ali, ako pokušate da sačuvate fotografiju kao PNG, izgledaće neverovatno, ali će rezultujuća veličina datoteke biti manje nego neverovatna.

JPEG se tradicionalno koristi za čuvanje fotografija. Neki od slikovnih podataka se bacaju kako bi se stvorila drastično manja veličina datoteke, ali budući da fotografije sadrže širok izbor boja i prirodnih varijacija, gubitak kvaliteta jeobično neprimjetno ljudskom oku.

Kasnije ćemo detaljnije o kompresiji, ali za sada ako se sjetite samo dvije stvari, zapamtite: JPEG za fotografije i PNG za tekst/grafiku.

Dimenzije slike

Da li ste ikada učitali web stranicu i primijetili da je za preuzimanje male slike (možda snimka glave, na primjer) potrebno f-o-r-e-v-e-r? Na primjer, tako sporo da možete vidjeti kako dolazi svaki red? Razmišljate u sebi, kako tako maloj slici može potrajati toliko dugo za preuzimanje?

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

Razlog zašto se ovo dešava je taj što bloger nije pravilno promenio veličinu i optimizovao svoju sliku, a u slučaju našeg primera sa snimkom glave, možda je uploadovao JPEG pune rezolucije direktno sa svoje DSLR kamere.

I to je ogromna datoteka!

Vidite, web pretraživač (obično) će skalirati sliku od njenih originalnih dimenzija tako da se lijepo uklopi na svoje mjesto na web stranici. Ono što se na ekranu čini kao mala slika zaista bi mogla biti ogromna fotografija od 10 megapiksela, umanjena u realnom vremenu od strane preglednika.

Sada će neke platforme za web objavljivanje automatski kreirati 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 50K datoteke i 5MB.

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

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

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

Kada se aktivira, Imsanity također može pretraživati ​​vaše postojeće slike i mijenjati njihovu veličinu u skladu s tim.

Posluživanje vaših slika

Način na koji servirate svoje slike svojim posjetiteljima ne znači samo njihovu optimizaciju same po sebi , ali to može imati dramatičan utjecaj na vrijeme učitavanja vaše stranice.

Većina blogera servira svoje slike direktno sa svog hosting računa i to je obično u redu, ali ako zaista želite da iscijedite svaki djelić performansi iz vašu web lokaciju, a zatim hostovanje vaših slika na mreži za isporuku sadržaja (CDN) može napraviti veliku razliku.

CDN se sastoji od strateški postavljenih web servera smještenih u podatkovnim centrima širom svijeta. Ovi serveri hostuju duple kopije vaših slika i kada pretraživač posetioca zatraži sliku sa vaše veb lokacije, CDN automatski usmerava pretraživač naserver koji im je geografski najbliži.

To znači da će posjetitelji iz Europe, na primjer, primati slike koje se serviraju s lokalnog evropskog servera, a ne iz Sjedinjenih Država ili negdje drugdje. Budući da je vrijeme odgovora i kašnjenje mreže smanjeno, slike se preuzimaju mnogo brže, smanjujući vrijeme učitavanja stranice.

Čarobnjak za blogovanje koristi Sucuri (obuhvata zaštitni zid za sigurnost kao i CDN), ali postoje i drugi dobavljači kvaliteta 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 sa gubitkom.

Većina alata za uređivanje slika kao što su Visme ili Photoshop će sačuvati datoteke koristeći JPEG kompresiju sa gubitkom jer ima najbolja smanjenja veličine datoteke. Dakle, iako je kvalitet slike malo smanjen, korištenje kompresije slike s gubicima smanjuje ogromne slike na veličine prilagođene webu.

Siguran sam da bi mnogi koji koriste Photoshop mogli vidjeti njegovu funkciju Sačuvaj za Web kao glavni i kraj svega u optimizaciji slike. Čak i online alati za uređivanje slika kao što su PicMonkey ili Visme također optimiziraju vaše slike.

Ali da li ste 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 izgledaju skoro identične ljudskom oku?

Evo nekoliko besplatnih i plaćenih alata koji će vam pomoći da svoje slike svedete na web-prikladan status.

Desktop alati

ImageAlpha / ImageOptim

Za korisnike Mac-a, ImageOptim je besplatan desktop alat koji koristim svaki dan za optimizaciju PNG slika – uglavnom snimaka ekrana – prije nego što ih otpremim. Ovi alati su jednostavni za korištenje, samo prevlačite i ispuštate svoje datoteke, ali morate raditi jednu po jednu sliku.

Pro savjet : Za tehničare postoji ImageOptim– CLI, gdje možete optimizirati cijelu mapu slika odjednom.

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

Za moje PNG slike, prvo sam ih pokrenuo kroz ImageAlpha:

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

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

JPEGmini

Za moje JPEG datoteke, optimiziram ih pomoću desktop JPEGmini aplikacije, dostupne i za Mac i za Windows.

Lite verzija vam omogućava da optimizirate do 20 slika dnevno besplatno, a košta 19,99 USD za uklanjanje ograničenja.

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

Online / Cloud / SaaS alati

TinyPNG

Ako tražite visokokvalitetni alat za kompresiju slika na mreži, TinyPNG (optimizira JPEG datoteke također uprkos nazivu) je web aplikacija koja vam omogućava da prevučete do 20 5MB ili manjih slika u vaš preglednik i da ih optimizirate odjednom.

Također imaju API za programere i prave 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 kreira tri do pet varijacija svake slike u različitim veličinama, 500 slika ne izgleda kao toliko za plodnog blogera. Srećom, cijena po slici je povoljna.

EWWW Image Optimizer

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

Možete se odlučiti za premium pretplatu koja vrši kompresiju s gubicima, ali besplatna verzija vrši samo kompresiju bez gubitaka tako da su uštede' t skoro isto tako značajan. Uštedjet će vam vrijeme i ipak je bolje nego ništa.

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

Završavanje

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

Zapamtite, neće svi vaši posjetitelji biti na brzim konekcijama, a napuhanost stranica i sporo vrijeme učitavanja stranica mogu potencijalno utjecati na vaše rangiranje na Googleu. Kako bismo vam pomogli da olakšate opterećenje, da tako kažete, steknite naviku da optimizirate svoje slike danas.

Obratite pažnju na dimenzije svoje slike i promijenite veličinu bilo koje prevelike dioničke fotografije ili slike s digitalnog fotoaparata na odgovarajuću veličina.

Dalje, iskoristite prednost moderne kompresije slika pomoću desktop aplikacija kao što je JPEGmini ili alata u oblaku kao što su TinyPNG ili Kraken – integrirajte ih u WordPress uz dodatak ako je moguće.

Na kraju, ako platforma za izdavaštvo automatski kreira varijacije vaše originalne slike promijenjene veličine, odaberite jednu od ovih za svoj blog post, umjesto originalne, u punoj veličini.

Povezano čitanje: 7 načina da smanjite Veličina PDF datoteka.