Hindi ka ba mahilig sa mga larawan?

Maaari nilang gawing nakakaengganyo ang isang piraso ng text habang nagbabasa ka. Pinapaganda ng mga larawan ang isang post sa blog, gawin itong mas maibabahagi at itakda ang tono at tatak ng iyong buong site.

At alam mo kung ano? Kami ay hardwired upang tumugon sa mga larawan. Iyon ang dahilan kung bakit ang pagsasama ng koleksyon ng imahe sa iyong nilalaman ay isang mahusay na tool na gagamitin kapag ibinebenta ang iyong blog.

Ngunit, kung hindi ka maingat, ang mga larawan ay maaaring magkaroon ng higit sa kalahati (o higit pa) ng kabuuang laki ng iyong web page. Ilang taon lang ang nakalipas, ang average na laki ng isang web page ay 600–700K. Ngayon, ang average ay 2MB at tumataas ito bawat taon.

Napakalaki!

Ang pangunahing dahilan kung bakit ito nangyayari ay dahil maraming mga larawan ang ginagamit nang mas madalas sa mga web page, at ang mga larawang ito ay 't maayos ang laki at na-optimize. Nangangahulugan ito na hindi sila nase-save o pinagsama-sama sa isang web-friendly na paraan, at sa halip, pinapalaki ang iyong mga pahina.

Karamihan sa atin, gayunpaman, iniiwan ang pag-optimize ng mga larawan bilang isang nahuling pag-iisip at mas gugustuhin na masiyahan sa paggawa ng mga bagay na nakakatuwang tulad ng paggawa ng epic post o networking sa ibang mga blogger sa iyong niche.

Ngunit, ang pagkakaroon ng page bloat ay nangangahulugan na ang bilis ng paglo-load ng iyong page ay apektado. Maaaring hindi mo iniisip na ito ay isang malaking bagay kung ikaw ay nasa isang mabilis na koneksyon, ngunit marami sa iyong mga bisita ay hindi. Gayundin, hindi gusto ng Google ang mabagal na paglo-load ng mga pahina, at maaari itong negatibong makaapekto sa iyong SEO.

Bakit kailangan mong i-optimize ang mga larawan

Nagsusumikap ka sapaglikha ng stellar content at gumugugol ka ng hindi mabilang na oras sa pagpo-promote ng iyong blog at networking sa ibang mga blogger, kaya ang huling bagay na gusto mo ay para sa mga potensyal na bisita na abandunahin ang iyong website bago pa man ito mag-load!

Ipinapakita ng mga pag-aaral na hanggang 40% ng i-click ng mga bisita ang back button kung ang isang site ay tumatagal ng mas mahaba kaysa sa tatlong segundo upang mag-load.

Alam ko, ang tatlong segundo ay talagang hindi ganoon kahaba, ngunit kapag ikaw ay nasa isang mobile na koneksyon at naghihintay ka ng isang site na maglo-load, maaaring magmukhang walang hanggan ang isang segundo.

At dahil marami sa iyong mga bisita ang maaaring nasa mas mabagal na koneksyon sa mobile, nagiging malinaw ito – kailangan mong bawasan ang laki ng iyong pahina. At alam na namin kung ano ang pinakamalaking nagkasala ng page size bloat – ito ang iyong mga larawan.

Ang mga hindi kinakailangang malalaking larawan ay kumukuha rin ng espasyo sa iyong hosting account. Bagama't ang ilan sa inyo ay maaaring may hosting na may "walang limitasyong" storage space, maraming premium hosting provider ang naglilimita sa iyo sa humigit-kumulang 10GB ng storage sa mga lower-tier na plano. Mabilis itong mapupuno, lalo na kung nagho-host ka ng marami, mabigat na imahe na mga site sa parehong account.

Kaya, paano mo malalaman kung ang iyong mga larawan ay nagpapabagal sa iyong site? Subukan ang bilis ng iyong site gamit ang Google PageSpeed ​​​​Insights.

Kung nag-uulat ang Google ng mga hindi na-optimize na larawan bilang isang problema, narito ang kailangan mong malaman upang ayusin ito.

Mga pangunahing kaalaman sa pag-optimize ng larawan

Pagdating sa pag-optimize ng mga larawan sa iyong blog, may ilang iba't ibang bagay na kailangan mong magingalam ang: uri ng file, laki at dimensyon ng larawan, kung paano mo ihahatid ang iyong mga larawan, at compression ng larawan.

Suriin natin ang bawat isa sa mga lugar na ito.

Uri ng file

Ang mga larawan sa web ay karaniwang naka-save sa PNG o JPEG file format – o GIF para sa animation. Sino ang hindi magugustuhan ang mga nakakatawang animated na GIF na lumulutang sa buong web!

Ngayon ay teknikal na okay kung ise-save mo ang iyong mga larawan sa alinmang format – hindi magkakaroon ng problema ang browser ng iyong bisita sa pagpapakita ng iyong web page – ngunit para sa pinakamahusay na kalidad at pag-optimize, manatili sa mga sumusunod na panuntunan:

• JPEG – gamitin para sa mga litrato at disenyo kung saan itinatampok ang mga tao, lugar o bagay
• PNG – pinakamainam para sa mga graphics , logo, text-heavy design, screenshot, at kapag kailangan mo ng mga larawang may transparent na background
• GIF – kung kailangan mo ng animation, kung hindi ay gumamit ng PNG

Kaya, bakit may iba't ibang format ?

Buweno, ang PNG ay tradisyonal na ginagamit para sa pag-save ng mga logo at graphics dahil pinapanatili nito ang orihinal na kalidad ng larawan – walang gustong malabo na teksto at mga pixelated na hugis. Ngunit, kung susubukan mong i-save ang isang larawan bilang PNG, ito ay magmumukhang kahanga-hanga, ngunit ang magreresultang laki ng file ay magiging, hindi gaanong kahanga-hanga.

Ang JPEG ay tradisyonal na ginagamit para sa pag-save ng mga larawan. Ang ilan sa mga data ng imahe ay itinatapon upang lumikha ng isang napakaliit na laki ng file, ngunit dahil ang mga larawan ay naglalaman ng isang malawak na iba't ibang mga kulay at natural na mga pagkakaiba-iba, ang pagkawala sa kalidad aykadalasang hindi napapansin ng mata ng tao.

Tatalakayin natin ang higit pang detalye tungkol sa compression sa ibang pagkakataon, ngunit sa ngayon kung dalawa lang ang naaalala mo, tandaan: JPEG para sa mga larawan at PNG para sa text/graphics.

Mga sukat ng larawan

Nakapag-load ka na ba ng isang web page at napansin na ang isang maliit na larawan (maaaring isang headshot, halimbawa) ay nangangailangan ng f-o-r-e-v-e-r upang ma-download? Tulad ng, napakabagal na makikita mo ang bawat linya na papasok? Naiisip mo sa sarili mo, paano kaya magtatagal ang pag-download ng ganoong kaliit na larawan?

At kapag nangyari ito sa isang malaking larawan ng header, mas malala pa ito dahil napipigil nito ang buong pag-load ng pahina.

Ang dahilan kung bakit ito nangyayari ay dahil ang blogger ay hindi maayos na na-resize at na-optimize ang kanyang imahe, at sa kaso ng aming halimbawa ng headshot, maaaring nag-upload ng full-resolution na JPEG nang direkta mula sa kanyang DSLR camera.

At iyon ay isang malaking file!

Nakikita mo, ang isang web browser ay (kadalasan) ay magsusukat ng isang imahe mula sa orihinal nitong mga sukat upang ito ay magkasya nang maayos sa lugar nito sa isang web page. Ang lumilitaw na isang maliit na larawan sa screen ay maaaring maging isang malaking 10-megapixel na larawan, pinaliit sa real time ng browser.

Ngayon ang ilang mga web publishing platform ay awtomatikong gagawa ng maramihang mga variation ng iyong full resolution na imahe sa iba't ibang laki, ngunit kung hindi, dapat mong baguhin ang laki ng iyong mga larawan nang maaga sa isang editor ng larawan tulad ng Photoshop, Lightroom, Pixlr – o kahit MS Paint. Ito ay maaaring mangahulugan ng pagkakaibasa pagitan ng 50K file at 5MB isa.

Ang WordPress, halimbawa, ay awtomatikong gagawa ng tatlo (o higit pa, depende sa iyong tema) na kopya ng iyong na-upload na larawan – lahat ay may iba't ibang dimensyon – na magagamit mo sa mga post sa blog, sa halip na palaging gamitin ang buong laki ng larawan.

Kung nakagawian mong mag-upload ng malalaking larawan ng stock na larawan, at gustong makatipid ng espasyo sa iyong hosting account, ang WordPress plugin Nasa likod mo ang Imsanity.

Pinapalitan nito ang laki at pinapalitan ang orihinal na larawan sa isang bagay na mas madaling pamahalaan, kaya kahit na ipasok mo ang buong laki ng larawan sa iyong post, hindi ito magiging masama.

Kapag na-activate na, maaari ding hanapin ng Imsanity ang iyong mga umiiral na larawan at baguhin ang laki nang naaayon.

Paghahatid ng iyong mga larawan

Hindi lang tungkol sa pag-optimize ng mga ito sa bawat isa kung paano mo inihahatid ang iyong mga larawan sa iyong mga bisita , ngunit maaari itong magkaroon ng kapansin-pansing epekto sa oras ng pag-load ng iyong pahina.

Karamihan sa mga blogger ay naghahatid ng kanilang mga larawan nang diretso mula sa kanilang pagho-host ng account at iyon ay kadalasang mainam, ngunit kung talagang gusto mong i-squeeze ang bawat bit ng pagganap mula sa iyong site, pagkatapos ay ang pagho-host ng iyong mga larawan sa isang Content Delivery Network (CDN) ay maaaring gumawa ng malaking pagkakaiba.

Ang CDN ay binubuo ng mga web server na madiskarteng inilagay na matatagpuan sa mga data center sa buong mundo. Ang mga server na ito ay nagho-host ng mga duplicate na kopya ng iyong mga larawan at kapag ang browser ng isang bisita ay humiling ng isang imahe mula sa iyong website, awtomatikong ididirekta ng CDN ang browser sa isangserver na heograpikal na pinakamalapit sa kanila.

Ito ay nangangahulugan na ang mga bisita mula sa Europe, halimbawa, ay makakatanggap ng mga larawang inihatid mula sa isang lokal na European server, sa halip na isa mula sa States o saanman. Dahil ang oras ng pagtugon at latency ng network ay nababawasan, ang mga larawan ay nagda-download nang mas mabilis, na binabawasan ang oras ng pag-load ng pahina.

Ang Blogging Wizard ay gumagamit ng Sucuri (ito ay may kasamang Firewall para sa seguridad pati na rin ang isang CDN), ngunit may iba pang mga provider ng kalidad tulad ng Cloudfront o KeyCDN ng Amazon. Maging ang sikat na CloudFlare, na hindi mahigpit na CDN, ay nag-aalok ng CDN nang libre at madaling i-set up sa karamihan ng mga shared hosting package.

Pag-compress ng larawan

Pagdating sa pag-optimize ng iyong mga larawan, walang nakakabawas sa laki ng iyong file nang higit pa kaysa sa advanced lossy image compression.

Karamihan sa mga tool sa pag-edit ng larawan tulad ng Visme o Photoshop ay magse-save ng mga file gamit ang lossy JPEG compression dahil mayroon itong pinakamahusay na mga pagbawas sa laki ng file. Kaya, habang ang kalidad ng imahe ay bahagyang nabawasan, ang paggamit ng lossy image compression ay nagpapababa ng malalaking larawan sa mga laki ng web-friendly.

Sigurado akong maraming gumagamit ng Photoshop ang maaaring tumingin sa tampok na Save for Web nito. bilang ang be-all at end-all ng image optimization. At maging ang mga online na tool sa pag-edit ng imahe tulad ng PicMonkey o Visme ay nag-o-optimize din sa iyong mga larawan.

Ngunit alam mo bang may mga tool na maaaring kumuha ng iyong "na-optimize" na larawan mula sa Photoshop o iba pang mga tool sa pag-edit, i-crunch at i-compress ito ng isa pang 40% (o higit pa),at pa rin mukhang halos magkapareho ba ito sa mata ng tao?

Narito ang ilang libre at bayad na tool upang matulungan kang i-crunch ang iyong mga larawan hanggang sa pagiging web-friendly.

Mga tool sa desktop

ImageAlpha / ImageOptim

Para sa user ng Mac, ang ImageOptim ay isang libreng desktop tool na ginagamit ko araw-araw upang i-optimize ang mga PNG na larawan – karamihan ay mga screenshot – bago ko i-upload ang mga ito. Madaling gamitin ang mga tool na ito, i-drag at i-drop mo lang ang iyong mga file, ngunit kailangan mong gawin ang isang larawan nang paisa-isa.

Pro tip : Para sa tech-savvy mayroong ImageOptim– CLI, kung saan maaari mong i-optimize ang isang buong folder ng mga larawan nang sabay-sabay.

Ang ImageAlpha ay isang lossy PNG compressor at makakagawa ng mga kababalaghan sa pag-urong ng mga PNG file habang ang ImageOptim ay gumaganap ng advanced lossless (na may opsyon ng lossy) compression – at ito tinatanggal ang hindi kinakailangang metadata mula sa PNG, JPEG at GIF na mga file.

Para sa aking mga PNG na larawan, pinapatakbo ko muna ang mga ito sa pamamagitan ng ImageAlpha:

Dito, binawasan nito ang aking screenshot na larawan mula 103K hanggang 28K.

Pagkatapos ay pinatakbo ko ito sa pamamagitan ng ImageOptim at nag-save ng dagdag na 10%.

JPEGmini

Para sa aking mga JPEG file, ino-optimize ko ang mga ito gamit ang desktop JPEGmini app, available para sa parehong Mac at Windows.

Ang Lite na bersyon ay nagbibigay-daan sa iyong mag-optimize ng hanggang 20 mga larawan sa isang araw nang libre, at nagkakahalaga ng $19.99 upang alisin ang limitasyon.

Pro tip : Ang mga advanced na user na gustong isama ang JPEGmini sa Photoshop o Lightroom sa pamamagitan ng isang plugin ay maaaring bumili ng Pro na bersyon para sa$99.99.

Mga tool na Online / Cloud / SaaS

TinyPNG

Kung naghahanap ka ng mataas na kalidad na online na tool sa compression ng imahe, ang TinyPNG (ini-optimize nito ang JPEG file din sa kabila ng pangalan) ay isang web app na nagbibigay-daan sa iyong mag-drag ng hanggang 20 5MB o mas maliliit na larawan sa iyong browser, at i-optimize ang mga ito nang sabay-sabay.

Mayroon din silang developer API at gumawa ng WordPress magagamit ang plugin na maaaring awtomatikong i-optimize ang iyong mga larawan sa pag-upload.

Binibigyan ka ng TinyPNG ng 500 libreng pag-optimize ng imahe bawat buwan, at pagkatapos noon ay naniningil mula $0.002–0.009 bawat larawan, depende sa volume.

Ngayon 500 na ang mga larawan bawat buwan ay maaaring mukhang napakarami, ngunit kapag isinasaalang-alang mo ang katotohanang ang WordPress ay madalas na gumagawa ng tatlo hanggang limang variation ng bawat larawan sa iba't ibang laki, 500 mga larawan ay hindi mukhang ganun karami para sa napakaraming blogger. Sa kabutihang-palad, ang gastos sa bawat larawan ay angkop sa badyet.

EWWW Image Optimizer

Kung hindi ka pa handang gumastos ng pera, at ayaw mong maabala sa pag-optimize ang iyong mga larawan nang manu-mano, ang libreng EWWW Image Optimizer plugin para sa WordPress ay maaaring awtomatikong i-optimize ang iyong mga na-upload na larawan.

Maaari kang pumili para sa isang premium na subscription na gumaganap ng lossy compression, ngunit ang libreng bersyon ay gumaganap lamang ng lossless compression kaya ang mga matitipid ay ' t halos kasing dami. Makakatipid ito sa iyo ng oras at mas mabuti kaysa sa wala.

Tandaan: Para sa kumpletong rundown, tingnanang aming post sa mga tool sa pag-compress ng larawan.

Pagbabalot nito

Sa ilang mga tao na hinuhulaan ang average na laki ng web page na lalapit sa 3MB sa 2017, ngayon na ang oras upang simulan ang pag-optimize ng iyong mga larawan.

Tandaan, hindi lahat ng iyong mga bisita ay nasa mataas na bilis ng mga koneksyon, at ang pag-bloat ng pahina at ang mabagal na paglo-load ng pahina ay maaaring makaapekto sa iyong ranggo sa Google. Upang matulungan kang mapagaan ang pagkarga, kumbaga, ugaliing i-optimize ang iyong mga larawan ngayon.

Bigyang-pansin ang mga dimensyon ng iyong larawan at i-resize ang anumang sobrang malalaking stock na larawan o larawan mula sa isang digital camera pababa sa naaangkop laki.

Susunod, samantalahin ang modernong image compression gamit ang mga desktop app tulad ng JPEGmini, o mga tool sa cloud tulad ng TinyPNG o Kraken – isinasama ang mga ito sa WordPress gamit ang isang plugin kung maaari.

Panghuli, kung ang iyong Ang platform ng pag-publish ay awtomatikong lumilikha ng mga nabagong laki ng mga variation ng iyong orihinal na larawan, pumili ng isa sa mga ito para sa iyong post sa blog, sa halip na ang orihinal, buong laki.

Kaugnay na Pagbasa: 7 Paraan Upang Bawasan Ang Sukat Ng Mga PDF File.