I-optimize ang mga imahe sa Photoshop para sa web sa format na WebP

Parami nang parami ang mga kumpanyang humihiling sa kanilang mga design team na ilipat ang lahat ng mga larawan mula sa kanilang mga website patungo sa WebPiniiwan ang klasikong JPG at PNG. Ang dahilan ay hindi basta-basta: malaki ang kinalaman nito sa bilis ng paglo-load, SEO, at karanasan ng gumagamitAng problema ay, kung gagamit ka ng Photoshop o Lightroom Classic, maaaring matuklasan mo na, sa unang tingin, ang mga programang ito ay tila hindi gumagana nang maayos sa format na ito.

Kung nabigyan ka ng isang buong folder ng Mayroon kang mga .png at .jpeg na file at hiniling sa iyo na i-convert ang mga ito sa WebP.Normal lang na magkaroon ng mga pagdududa: paano i-export ang mga ito nang tama?, anong mga setting ang gagamitin upang maiwasan ang pagkawala ng kalidad?, kumusta naman ang color profile? at sa mga browser na hindi pa sumusuporta sa WebPSa gabay na ito, sasabihin ko sa iyo, hakbang-hakbang, Paano i-optimize ang mga imahe sa Photoshop para sa web sa format na WebPAng mga dapat mong bantayan sa mga tuntunin ng timbang, kalidad at SEO, at kung paano ito isama sa iyong website o ecommerce nang hindi ito nasisira.

Ano ang WebP at bakit ito pinag-uusapan ng lahat?

Ang WebP ay isang modernong format ng imahe na binuo ng Google partikular para sa web.Gumagamit ito ng mga advanced na pamamaraan ng compression (batay sa VP8 frame encoding at block prediction) upang mabawasan ang laki ng file. pagpapanatili ng kalidad ng biswal na halos kapareho ng JPG at PNGKaya naman patuloy itong inirerekomenda ng Google PageSpeed, Lighthouse, Semrush, at iba pang mga tool sa pag-awdit.

Ang malaking bentahe ng WebP ay Gumagawa ito ng mga file na hanggang 30% mas magaan kaysa sa mga katumbas nito sa JPEG o PNG., kapwa may lossy at lossless compression. Sa pagsasagawa, nangangahulugan ito na Mas mabilis na maglo-load ang iyong site.Bawasan nito ang pagkonsumo ng bandwidth at mapapabuti ang karanasan ng gumagamit, isang bagay na pinahahalagahan ng Google nang positibo sa ranggo nito.

Isa pa sa mga magagandang kalakasan nito ay ang kakayahang umangkop nitoSinusuportahan nito ang lossy at lossless compression, transparency (alpha channel) tulad ng PNG, at mga animation tulad ng GIF, ngunit may mas maliit na laki ng file. Samakatuwid, ang WebP ay lalong kawili-wili para sa mga online na tindahan, mga blog na may maraming larawan, mga landing page ng produkto, at mga website na may mataas na visual load.

Para mabigyan ka ng totoong ideya, may mga praktikal na pagkakataon kung saan Ang isang imahe na tumitimbang ng mahigit 600 kB sa PNG ay nabawasan sa wala pang 5 kB sa WebPnang hindi nararanasan ng gumagamit ang kapansin-pansing pagbaba ng kalidad. Pinag-uusapan natin ang paglipat mula sa laki ng isang file patungo sa humigit-kumulang 80 beses na mas maliit, na gumagawa ng malaking pagkakaiba sa bilis ng pahina.

Mga Bentahe ng WebP kumpara sa JPG, PNG, GIF at iba pang mga format

Bago mo madaliin ang pag-convert ng kalahati ng iyong server sa WebP, mainam na maging malinaw ka rito. Ano nga ba ang tunay na iniaalok ng format na ito kumpara sa mga pinakakaraniwang ginagamit na format sa web?Ang pangkalahatang larawan ay ito:

JPG (o JPEG)Ito ang pamantayan para sa mga litrato. Gumagana ito sa nawawalang compressionNagbibigay-daan ito para sa isang makabuluhang pagbawas sa laki sa pamamagitan ng pagsasakripisyo ng ilan sa orihinal na impormasyon ng imahe, kadalasan nang hindi gaanong napapansin ng mata ng tao. Nagbibigay-daan ito para sa pagsasaayos ng kalidad at mainam para sa mga larawan ng produkto, mga retrato, o mga kumplikadong eksena, ngunit Kulang ito sa transparency..

PNG: malawakang ginagamit para sa mga logo, icon at graphics na may mga transparencyGumagamit ito ng lossless compression, kaya pinapanatili nito ang lahat ng datos ng imahe. Ito ay isinasalin sa mga file na may mas mahusay na katapatan ngunit sa pangkalahatan ay mas malaki ang lakiPinapanatili ng PNG-24 ang lahat ng kulay at kalidad; binabawasan ng PNG-8 ang paleta at samakatuwid ay maaaring magdulot ng pagkawala ng impormasyon.

GIFSa kasaysayan, ang hari ng mga simpleng animation sa webSinusuportahan nito ang pinababang paleta ng kulay at frame-by-frame animation, ngunit Karaniwang malaki ang laki ng file para sa kung ano ang inaalok nito.Sa kasalukuyan, nalalampasan na ito ng WebP sa halos lahat ng aspeto.

SVGIto ay isang vector format, lubos na inirerekomenda para sa mga logo, icon, at ilustrasyon na kailangang umakyat nang hindi nawawala ang talasAng problema ay kung gagamitin mo ito para sa isang bagay na hindi naman nilayon (halimbawa, paglalagay ng isang malaking raster image sa isang SVG), maaari kang magkaroon ng malalaking file, ilang beses na mas mabigat kaysa sa katumbas na PNG o WebP.

WebP: pinagsasama ang pinakamahusay sa lahat ng nasa itaas: Lossy o lossless compression, suporta sa transparency, mga animation, EXIF ​​​​at XMP metadata, at mga sukat na 25-34% na mas maliit kaysa sa JPG at humigit-kumulang 26% na mas maliit kaysa sa PNGAyon sa mga pag-aaral ng Google, malawakan din itong sinusuportahan ng mga modernong browser tulad ng Chrome, Firefox, Edge, at Safari (mula bersyon 14 pataas).

Bakit dapat i-optimize ang mga larawan ng iyong website (hindi lang para sa WebP)

Karaniwang kinakatawan ng mga imahe sa pagitan ng 60% at 65% ng kabuuang byte na nilo-load ng isang web pageKung hindi mo sila kokontrolin, gaano man kahusay ang pagkakaayos ng teknikal na aspeto, hihilahin ang websiteIto ay may direktang epekto sa halos lahat ng bagay:

Pinahusay na bilis ng paglo-load: sa pamamagitan ng pagbabawas ng laki ng mga imahe (gamit man ang WebP, mahusay na compression na JPG o na-optimize na PNG), Mas mabilis mag-load ang mga pahinaIto ay lalong kapansin-pansin sa mga mobile device at mabagal na koneksyon, kung saan mahalaga ang bawat kilobyte.

Mas mababang pagkonsumo ng bandwidthAng mas kaunting timbang ay nagpapahiwatig mas kaunting resources ang nagagamit sa iyong server at sa data plan ng userSa laki ng isang ecommerce site na may libu-libong pagbisita bawat araw, ang matitipid na trapiko ay maaaring maging lubhang malaki.

SEO at pagpoposisyonIsinasaalang-alang ito ng Google at iba pang mga search engine. oras ng paglo-load at karanasan ng gumagamitAng isang mabilis na website ay karaniwang mas madaling magkaroon ng mas mataas na ranggo, mas maraming organic traffic, at sa huli ay mas maraming negosyo ang mabubuo.

Pagbabago at mga bentaSa e-commerce, ang bawat segundo ng pagkaantala sa paglo-load ay nangangahulugan ng pagkawala ng mga pasyente, lead, o bentaAng matatalas at tumutugong mga imahe ay nagreresulta sa mas kaunting alitan at mas malaking posibilidad na makumpleto ng gumagamit ang ninanais na aksyon.

Bukod pa rito, ang pag-aalaga sa mga imahe ay nagpapahiwatig isang pakiramdam ng isang mahusay at propesyonal na websiteAng malabo, pixelated, o putol-putol na mga imahe ay nagbibigay ng medyo hindi magandang impresyon, na maaaring makasira kahit sa pinakamaingat na disenyo at gawaing pagsulat.

Piliin ang tamang format bago i-export

Ang isa sa mga pinaka-karaniwang pagkabigo ay i-upload ang lahat ng mga larawan sa parehong format "dahil sa nakagawian"nang hindi humihinto upang isipin kung ano talaga ang kailangan ng bawat kaso. Ang pagpili nang maayos sa pagitan ng JPG, PNG, SVG o WebP ang siyang makakagawa ng malaking pagkakaiba. isang magaan na website at isa na kasing bigat ng isang trak.

Sa pangkalahatan, ang mga rekomendasyon ay:

• Mga kumplikadong litrato at background: JPG o WebP na may mahusay na naayos na lossy compression.
• Mga logo, icon, at graphics na may transparency: PNG (kung kailangan mo ng pinakamataas na katapatan) o, mas mabuti pa, WebP na may transparency para mabawasan ang bigat.
• Purong vector graphics: Maayos na inihandang SVG, nang walang pag-embed ng malalaking raster na imahe.
• Mga magaan na animation: Animated na WebP sa halip na GIF, basta't sinusuportahan ito ng target na browser.

May mga pagkakataon kung saan ang simpleng pagpapalit ng format ay nakapagpabago na ng takbo ng laro. Sa isang totoong proyekto, isang imahe ang nakita sa SVG na hindi gumagamit ng mga vector at tumimbang nang higit sa anim na beses kaysa sa iba Mahahalagang larawan mula sa site. Ang pag-convert nito sa PNG ay nagpaliit ng laki ng file nang humigit-kumulang 20 beses, at ang pag-convert nito sa WebP, Ang huling laki ng file ay mas mababa sa 5 kBHindi ito mahika, pagpili lang ito ng tamang format.

Balanse sa pagitan ng laki, resolusyon, at bigat ng imahe

Kapag pinag-uusapan natin ang pag-optimize ng mga imahe para sa web, may tatlong salik na laging magkasama: mga sukat sa mga pixel, resolusyon (PPI o DPI) at laki sa kilobytesAng pagpapabaya sa alinman sa mga ito ay karaniwang nagreresulta sa malalaking o mababang kalidad ng mga imahe.

Mga sukat sa mga pixel at ang Katangian ng lapad ng CSS: anumang larawang ia-upload mo, dapat umangkop sa aktwal na espasyong sasakupin nito sa webKung ang isang banner ay ipapakita sa 400x400 pixels, walang saysay na i-upload ito sa 800x800 "kung sakali," dahil biswal itong lilitaw sa 400x400. patuloy itong magiging bigat bilang malaking imaheHuwag ding maging masyadong maliit: kung mag-a-upload ka ng 200x200 na larawan para sa 400x400 na espasyo, palalawakin ito ng browser at magmumukhang malabo ang imahe.

Resolusyon (PPP o DPI)Para sa disenyo ng web, hindi mo kailangan ng mga resolusyon sa pag-print. Gayunpaman, para sa pag-print, karaniwang ginagamit ang mga ito. 300 dpi o higit pa, para sa screen Sapat na ang 72 dpiSa katotohanan, maraming platform ang hindi pinapansin ang halaga ng DPI at direktang gumagana sa mga pixel, ngunit ang pagpapanatiling mababa nito para sa paggamit sa web ay nakakatulong na maiwasan ang pag-drag ng mga print-ready na file na may labis na laki.

Sukat sa KBSa huli, ang nagtatakda ng performance ay ang laki ng file. Bilang pangkalahatang tuntunin, Subukang panatilihing mababa sa 200 kB ang mga indibidwal na larawanlalo na sa mga pangunahing pahina (home, mga pahina ng produkto, mga landing page ng kampanya). At siguraduhin na ang Ang kabuuang bilang ng mga imahe sa bawat pahina ay hindi dapat lumagpas sa 1 MB Kung kailan pwede.

Pinapayagan ka ng Photoshop at iba pang mga editor na mag-eksperimento sa mga parameter na ito upang pagkamit ng pinakamahusay na balanse ng kalidad/timbangAng sekreto ay unti-unting babaan ang kalidad ng compression hanggang sa mapansin mo ang mga artifact o pagkawala ng detalye, at pagkatapos ay taasan ito ng isang punto.

Paano i-optimize ang mga larawan para sa web sa Photoshop

Bagama't maraming tao pa rin ang nag-a-upload ng mga larawan nang direkta mula sa kanilang camera o mobile phone, ang propesyonal na pamamaraan ay palaging dumaan sa isang editor tulad ng Photoshop para isaayos ang laki, i-resolve ang color profile, at i-compress nang tama. Matagal nang ginagamit ng Photoshop ang mga tool na sadyang idinisenyo para sa layuning ito.

Isa sa mga pangunahing tungkulin ay "I-save para sa web" (sa mga klasikong bersyon), na nagpapahintulot I-preview kung paano nakakaapekto ang bawat antas ng compression sa timbang at kalidadMaaari itong ma-access mula sa menu ng file o gamit ang shortcut. Ctrl + Alt + Shift + S sa Windows (o ang katumbas nito sa macOS). Doon mo magagawa:

• Piliin ang format ng output: JPG, PNG-8, PNG-24, GIF, atbp., at isaayos ang bawat isa ayon sa iyong mga partikular na opsyon.
• Ayusin ang kalidad ng JPG: Ang mga halagang 70-80 ay karaniwang sapat para sa paggamit sa web, kung saan ang mata ay halos hindi nakakakita ng pagkakaiba sa 100 ngunit ang bigat ay kapansin-pansing bumababa.
• Pagkontrol sa palette sa PNG-8 at GIF: pagbabawas ng mga kulay kapag pinapayagan ito ng disenyo.
• I-scale ang imahe nang direkta sa dialog box, nang hindi kinakailangang baguhin ang laki nito sa canvas nang maaga.

Bilang karagdagan, pinapayagan ng Photoshop ang pag-optimize. ang paleta ng kulay, ang pagsasama o pagbubukod ng metadata, at iba pang mga pamamaraan ng compression na, kapag maayos na na-tono, ay makakatulong sa iyong masulit ang bawat larawan bago ito i-convert sa WebP.

I-export sa WebP mula sa Photoshop at Lightroom Classic

Bagama't sa loob ng medyo matagal na panahon Hindi nagbigay ang Photoshop at Lightroom Classic ng katutubong suporta para sa WebP.Sa kasalukuyan, may ilang mga paraan upang magamit ang format na ito nang hindi kinakailangang umalis sa iyong karaniwang daloy ng trabaho, alinman sa pamamagitan ng mga function na isinama sa mga bagong bersyon o sa pamamagitan ng pagdaragdag ng isang partikular na plugin.

Kung gumagamit ka ng bersyon kung saan hindi pa lumalabas ang opsyong WebP sa “Export”, Maaari kang mag-install ng opisyal na plugin para paganahin ang pag-export sa format na ito nang direkta mula sa Photoshop.Pagkatapos ng pag-install, makikita mo ang WebP bilang isang available na format kapag nag-e-export o nagse-save para sa web, at maaari mong isaayos ang mga parameter tulad ng:

• Uri ng kompresyon: may pagkalugi o walang pagkalugi.
• Calidad: Ang isang katamtamang halaga (humigit-kumulang 70-80) ay karaniwang nagbibigay ng mahusay na resulta sa karamihan ng mga litrato.
• Aninaw: kung pananatilihin ba o hindi ang alpha channel sa mga pagkakataong kailanganin mo ito.
• Metadata: magdesisyon kung pananatilihin ang EXIF ​​​​at XMP o burahin ang mga ito para makatipid ng ilang KB.

Sa Lightroom Classic, ang karaniwang daloy ng trabaho ay binubuo ng bumuo at ayusin ang larawan gaya ng dati, at pagkatapos ay i-export sa tradisyonal na format (halimbawa, JPG na may mahusay na compression) para pagkatapos, I-convert ang JPG na iyon sa WebP gamit ang isang panlabas na tool o scriptHindi ito kasingdali ng paggamit ng plugin sa Photoshop, ngunit pinapayagan ka nitong panatilihin ang lahat ng gawaing pag-develop sa LrC.

Kung mayroon kang i-convert ang malalaking volume ng mga imaheIsang lubos na inirerekomendang opsyon ay ang paggawa ng [image/image] sa Photoshop. maliit na patakIyon ay, isang maliit na executable kung saan mo ida-drag ang mga folder ng larawan at kung saan I-automate ang bulk conversion sa WebP gamit ang mga setting na iyong tinukoyMakakatipid ka nito mula sa pag-uulit ng parehong proseso nang daan-daang beses.

Kung ayaw mong gumamit ng Photoshop o mas gusto mo ang ibang magaan na alternatibo, maaari mong subukan ang mga portable editor tulad ng PhotoDemon na nagpapadali rin sa mabilis na daloy ng trabaho para sa pagproseso ng mga batch.

Mga online converter at automation para sa malalaking batch

Kung ayaw mong gumamit ng Photoshop o hindi kayang mag-install ng mga plugin, mayroon kang alternatibo na gamitin ang mga online converter para lumipat mula sa PNG/JPG patungong WebPAng ilan sa mga pinakakaraniwang ginagamit ay nagbibigay-daan sa iyo na:

• Piliin ang antas ng compression (isang bagay na mahalaga para sa pagkontrol ng kalidad).
• Mag-upload ng maraming file nang sabay-sabay, hanggang sa isang takdang limitasyon ng batch.
• I-convert din ang mga GIF animation sa animated na WebP.

Ang disbentaha ng mga serbisyong ito ay Karaniwan nilang nililimitahan ang bilang ng mga file bawat batch, ang pinakamataas na timbang o bilis ng pag-download, at umaasa ka rin sa isang matatag na koneksyon para mag-upload ng malalaking larawan.

Kung ikaw ay isang developer o may kalapit na tauhan sa IT, isa pang napakabisang opsyon ay I-automate ang conversion gamit ang Node.js na may mga module tulad ng imagemin at ang plugin imagemin-webpSa ganitong paraan, maaari mong isama ang conversion sa iyong mga build script, CI/CD pipeline, o mga prosesong pang-gabi, upang awtomatikong i-convert ng system ang mga bagong larawang idinagdag sa iyong proyekto sa WebP.

WebP compression: lossy vs lossless

Isa sa mga pangunahing tanong kapag nag-e-export sa WebP ay kung gagamitin ba ang lossy o lossless compressionAng pagpili ay nakasalalay sa iyong mga prayoridad. ganap na kalidad o pagganap.

Lossy Compression: Ito ang inirerekomendang opsyon kapag Ang pagganap ng site ang prayoridadGumagamit ang Lossy WebP ng mga algorithm na nag-aalis ng kalabisan o halos hindi mahahalatang impormasyon, batay sa prediksyon at mga pagbabagong matematikal. Ayon sa Google, Ang mga lossy WebP na imahe ay maaaring 25-34% na mas maliit kaysa sa kanilang mga katumbas na JPG, na nagpapanatili ng halos kaparehong kalidad ng biswal sa karamihan ng mga kaso.

Lossless Compression: Ito ang alternatibo kung kailangan mo panatilihing buo ang lahat ng detalyeHalimbawa, sa mga corporate graphics na lubos na sensitibo sa kulay o sa mga asset na kailangang i-edit sa ibang pagkakataon. Sa mga sitwasyong ito, ang lossless WebP ay nananatiling kaakit-akit dahil, sa karaniwan, Nakakagawa ito ng mga file na humigit-kumulang 26% na mas maliit kaysa sa PNG., na may hitsurang kapareho ng orihinal.

Sa pagsasagawa, karamihan sa mga website at online na tindahan ay pumipili ng compression na may maayos na tonong pagkawala para sa mga larawan ng produkto, mga banner, at mabibigat na visual na mapagkukunan, at inilalaan nila ang lossless compression para sa mga partikular na elemento kung saan mahalaga ang bawat pixel.

Iangkop ang mga larawan sa isang responsive na bersyon at iba't ibang device.

Ang pag-optimize ng mga imahe ay hindi lamang tungkol sa format at compression; kailangan mo ring isipin ang tungkol sa kung paano ihahatid ang mga ito depende sa deviceWalang saysay na ipadala ang parehong 2.000-pixel-wide na imahe sa isang mobile phone tulad ng sa isang 4K monitor.

Sa isip, dapat makabuo ang isang iba't ibang bersyon ng bawat larawan na inangkop para sa mga mobile phone, tablet at desktopat pilitin ang browser na pumili ng pinakaangkop gamit ang mga responsive na pamamaraan ng imahe. Pinipigilan nito ang isang mobile device na mag-download ng isang napakalaking imahe na pagkatapos ay ipapakita sa isang pinaliit na laki.

Bukod pa rito, ipinapayong gamitin ang responsive na bersyon iwasan ang pagpapakita ng mga hindi kinakailangang larawanMaraming landing page at seksyon ang may karagdagang dekorasyon na maganda tingnan sa desktop, ngunit sa mobile ay nagsisilbi lamang itong lumikha ng walang katapusang pag-scroll at pagkonsumo ng data. Sa mga kasong iyon, i-crop, palitan o alisin ang mga imaheng "filler" Malaking tulong ito para mapagaan ang karanasan sa maliliit na screen.

Paggamit ng WebP sa HTML: paano hindi masira ang website sa mga mas lumang browser

Isa sa mga pinakanakababahalang aspeto kapag lumilipat sa WebP ay ang pagiging tugma sa mga browser na hindi pa sumusuporta ditoBagama't malawak na ang suporta (Chrome, Firefox, Edge, modernong Safari, atbp.), maaaring mayroon pa ring mga user na may mas lumang browser.

Ang inirerekomendang paraan upang ipakilala ang WebP nang walang sinumang iniiwan ay ang pagbabago ng klasikong pagmamarka ng para sa isang sa iyong HTML. Ang pangunahing pattern ay:

Sa ganitong paraan, Ilo-load ng mga browser na sumusuporta sa WebP ang modernong bersyonAwtomatikong gagamitin ng mga hindi gumagamit ang fallback na JPG na larawan. Maaari kang magdagdag ng maraming tag. na may iba't ibang resolusyon o kahit na kundisyon ang paggamit nito mga tanong sa media maglingkod, halimbawa, WebP lamang sa mobile o ayon sa lapad ng screen.

Ang pamamaraan na ito ay nagpapahintulot sa iyo na Samantalahin ang mga benepisyo ng WebP nang hindi nasisira ang compatibilityAt ito ay lalong kapaki-pakinabang kapag nagtatrabaho sa malalaking proyekto kung saan hindi mo eksaktong makontrol ang browser ng user.

Paggamit ng WebP sa CSS at Modernizr

Sa CSS, medyo mas maselan ang isyu, dahil Walang katutubong mekanismo na kasing-kombenyente ng Upang subukan ang suporta ng WebP para sa mga larawan sa background, karaniwang ginagamit ang mga JavaScript library tulad ng [list of libraries]. I-modernize.

Ang Modernizr ang namamahala sa alamin kung sinusuportahan ng browser ang WebP o hindi at, depende sa resulta, nagdaragdag ng mga partikular na klase sa elemento Mula doon, maaari kang magsulat ng mga kondisyonal na panuntunan sa CSS, halimbawa:

.webp .bayani { larawan-ng-likod: url(«bayani-larawan.webp»); }
.no-webp .hero { larawan-ng-likod: url(«larawan-ng-hero.jpg»); }

Sa ganitong paraan, Ida-download ng mga modernong browser ang background sa WebPAt ang mga luma ay patuloy na gagamit ng JPG o PNG nang hindi mo na kailangang kopyahin ang HTML. Isa itong kapaki-pakinabang na solusyon kapag gumagamit ka ng marami mga imahe bilang background-image sa CSS.

WebP at WordPress: Native na suporta at mga plugin

Kung ang iyong site ay binuo sa WordPress, ang magandang balita ay, Simula sa bersyon 5.8, ang CMS ay katutubong sumusuporta sa mga imaheng WebPSa madaling salita, maaari kang mag-upload ng mga WebP file sa media library na parang mga JPG o PNG file ang mga ito, at bubuo ang WordPress ng mga kaukulang thumbnail.

Kung gumagamit ka ng mas lumang bersyon o sa ilang kadahilanan ay hindi ka makapag-update, Mayroong ilang mga plugin na nagdaragdag ng suporta para sa WebPKaraniwang pinangangasiwaan ng mga plugin na ito ang:

• Payagan ang mga pag-upload ng WebP file sa tagapamahala ng media.
• Awtomatikong i-convert ang mga umiiral na JPG at PNG file sa WebP, na nagpapanatili ng fallback para sa mga hindi sinusuportahang browser.
• Isulat muli ang mga URL ng larawan para maghatid ng WebP tuwing sinusuportahan ito ng browser.

Bukod pa rito, maaari mo itong pagsamahin sa mga plugin sa pag-optimize tulad ng Imagify o iba pang mga compressor na lalong nagpapaliit sa laki ng imahe (kabilang ang WebP), nagpapabuti sa mga parameter ng kalidad, at nag-aalis ng mga hindi kinakailangang metadata. Kaya, ang WordPress ay halos nagiging isang awtomatikong sistema ng Pag-optimize ng imahe at matalinong paghahatid.

Pag-upload ng mga larawan ng produkto sa isang ecommerce site: isang mahalagang checklist

Pagdating sa isang online na tindahan, ang mga larawan ng produkto ay isa sa mga pangunahing piraso para sa pagbebentaNgunit maaari rin silang maging pinakamalaking hadlang sa pagganap kung hindi mo ito mapapamahalaan nang maayos. Bago mag-upload ng kahit ano sa iyong e-commerce site, palaging suriin ang mga puntong ito:

1. Tamang sukatHuwag mag-upload ng mga larawan mas malaki kaysa sa mahigpit na kinakailanganTukuyin ang mga dimensyong gagamitin mo para sa mga pahina ng produkto, mga thumbnail, mga listahan, atbp., at i-export sa laki na iyon. Huwag mag-upload ng 6.000-pixel na larawan kung 1.200 lang ang ipapakita mo.

2. Na-optimize na pangalan ng file: sa halip na iwanan ang mga klasiko IMG_1234.webpGumamit ng mga naglalarawang pangalan na may mga keyword, tulad ng itim na sapatos-para-sa-mga-lalaki.webpNakakatulong ito sa image SEO at nagbibigay ng konteksto sa Google.

3. Katangian at mga paglalarawan ng ALTPalaging punan ang alternatibong teksto (ALT) nang may malinaw at may-katuturang paglalarawan. Hindi lamang nito pinapabuti ang accessibility kundi nakakatulong din sa SEO, dahil nauunawaan ng Google kung tungkol saan ang larawan.

4. CDN para sa mga imaheKung ang iyong tindahan ay may internasyonal na trapiko, isaalang-alang ang paghahatid ng mga larawan sa pamamagitan ng [platform name missing]. isang Network ng Paghahatid ng Nilalaman (CDN)Sa ganitong paraan, ang WebP at ang iba pang mga mapagkukunan ay inihahatid mula sa server na pinakamalapit sa gumagamit, na binabawasan ang latency.

Ano ang gagawin kung marami ka nang na-upload na mga larawan

Maaaring naka-set up na ang iyong site at mayroon na daan-daan o libu-libong mga hindi na-optimize na imaheAng pag-ulit ng mga ito isa-isa ay isang bangungot, ngunit may mga shortcut, lalo na kung gumagamit ka ng WordPress.

Tulad ng mga plugin WP Smush (at iba pang katulad nila) ay nagpapahintulot I-optimize ang malalaking bilang ng mga imahe nang maramihanSa isang click lang, makakapagproseso ka ng hanggang 50 larawan bawat batch sa libreng bersyon, na mababawasan ang laki ng mga ito nang hindi na kailangang i-download, i-edit sa Photoshop, at muling i-upload.

Kapag isinama sa mga plugin na nagko-convert sa WebP at namamahala ng mga fallback, Maaari mong baguhin ang karamihan ng media library ng iyong site halos walang anumang manu-manong paggawa. Mula roon, kailangan mo na lang Panatilihin ang isang mahusay na gawain sa pag-export at pagpapangalan para sa mga bagong larawan.

Mga panlabas na tool at mga komplementaryong daloy ng trabaho

Kahit na ang iyong pangunahing daloy ng trabaho ay may kinalaman sa Photoshop, lubos itong inirerekomenda. Magdagdag ng karagdagang layer ng compression gamit ang mga online tool tulad ng TinyPNG o TinyJPG (at ang mga katumbas nito para sa WebP). Napakasimple lang ng kanilang paggana: ia-upload mo ang imahe, maglalapat ang system ng matalinong kompresyon, at halos palagi kang magda-download ng bahagyang mas maliit na file. nang walang kapansin-pansing pagkawala ng kalidad.

Sa mas advanced na mga kapaligiran, maaari mong isama ang mga pag-optimize na ito sa mga awtomatikong gawain sa pagbuo ng iyong proyekto (halimbawa, gamit ang gulp, webpack o npm scripts) nang sa gayon, sa tuwing magdadagdag ka ng bagong imahe sa iyong repository, ito ay nai-compress at nako-convert sa WebP nang malinaw, nang walang manu-manong interbensyon.

Suriin kung ang iyong mga imahe ay maayos na na-optimize

Panghuli, upang malaman kung ang lahat ng pagsisikap na ito ay nagbubunga, Maaari kang gumamit ng mga tool tulad ng Google PageSpeed ​​​​InsightsIlagay lang ang URL ng pahinang gusto mong suriin at i-click ang “Analyze”.

Sa ulat, makikita mo ang iba't ibang seksyon na may kaugnayan sa Pag-optimize ng imahe, ang paggamit ng mga susunod na henerasyong format (tulad ng WebP), at mga pagkakataon para sa pagpapabutiKung berde ang lahat, nasa tamang landas ka. Kung ito ay lumalabas na pula o dilaw, ang PageSpeed ​​​​ay karaniwang nagpapahiwatig... Aling mga partikular na larawan ang nagdudulot ng mga problema? at kung paano ito lulutasin.

Ang pag-aalaga sa format, compression, laki, at paghahatid ng mga imahe gamit ang mga tool tulad ng Photoshop, WebP, WordPress plugin, at mga responsive na pamamaraan ay hindi lamang nagpapagaan sa website, kundi pati na rin Pinapabuti nito ang SEO, binabawasan ang pagkonsumo ng mapagkukunan, at nagbibigay ng propesyonal na pakiramdam. na napapansin ng mga user sa unang tingin; kung ia-automate mo rin ang conversion at pana-panahong pagsusuri gamit ang mga naaangkop na tool, ang pagpapanatili ng isang biswal na makapangyarihan at kasabay nito ay mabilis na website ay hindi na magiging sakit ng ulo at magiging natural na bahagi ng iyong workflow.