Paano I-compress ang mga Larawan para sa Web Page

Bakit pinapabuti ng pag-optimize ng mga larawan ang isang website

Karaniwang kumakatawan ang mga larawan sa malaking bahagi ng datos na dinodownload ng isang pahina. Ang malaking file ay nagpapabagal sa pagpapakita ng nilalaman, kumokonsumo ng mas maraming mobile data at maaaring masira ang karanasan ng bisita. Pinagsasama ng optimization ang tatlong desisyon: sukat, format at antas ng compression.

Walang perpektong limitasyon para sa lahat ng larawan. Ang isang thumbnail ay dapat mas magaan kumpara sa isang litrato na sumasakop sa buong screen. Ang layunin ay magbigay ng sapat na pixels at kalidad para sa totoong puwang, nang hindi pinipilit ang browser na i-download ang impormasyon na hindi naman gagamitin.

Inirerekomendang hakbang-hakbang na daloy

1. Tinutukoy ang maximum na lapad kung saan lalabas ang imahe sa disenyo.
2. I-crop ang frame bago i-compress upang hindi panatilihin ang mga bahagi na aalisin.
3. Piliin ang format ayon sa nilalaman at pangangailangan para sa transparency.
4. Buksan ang file sa Image Compressor at sumusubok ng medium-high na kalidad.
5. Ihambing ang timbang at suriin ang teksto, gilid, mukha at gradient.
6. I-publish ang resulta at suriin ang pahina sa mobile at desktop.

Sukat: Iwasan ang pag-upload ng mas maraming pixels kaysa sa kinakailangan

Kung ang isang kard ay nagpapakita ng isang imahe na may lapad na 600 pixels, ang pag-upload ng isang larawan na 5000 pixels ay kadalasang sayang. Babaliktarin ito ng browser nang biswal, ngunit bago iyon, kailangan munang i-download nang buo ang file. Maghanda ng bersyon na malapit sa pinakamataas na sukat na kinakailangan ng disenyo.

Para sa mataas na density na mga screen, maaaring maging kapaki-pakinabang ang pagbibigay ng bersyon na humigit-kumulang dalawang beses na mas malaki, ngunit ang pinakanaaangkop ay ang site ay gumamit ng responsive images kasama ng SRCSET y mga sukat. Sa ganitong paraan, bawat device ay nagda-download ng angkop na variant imbes na parehong malaking file.

Aling format ang pipiliin

• JPG: Magandang compatibility at makatwirang laki para sa mga non-transparent na larawan.
• WebP: kapaki-pakinabang para sa mga larawan at web graphics; Maaari nitong panatilihin ang transparency at mag-alok ng compact na mga file.
• PNG: Angkop para sa transparency, mga screenshot na malinaw ang teksto at simpleng graphics; maaaring mabigat sa mga larawan ng litrato.
• SVG: Perpekto para sa mga logo at vector icon kapag ligtas ang file at ang disenyo ay ginawa bilang vector.

Ang pagbabago ng format ay hindi garantisadong magbibigay ng mas maliit na file. Laging ihambing ang resulta at panatilihin ang orihinal na format kapag ito na ang pinakaepektibong opsyon. Konsultahin ang Paghahambing sa pagitan ng JPG, PNG, at WebP kung hindi mo alam kung alin ang pipiliin.

Paano Pumili ng Kalidad ng Compression

Magsimula sa isang setting na inuuna ang hitsura at unti-unting babaan. Mas matitiis ng mga larawan ang compression kaysa sa mga screenshot ng interface, mga diagram, at maliit na teksto. Kung lumitaw ang mga halo, bloke o malabong gilid, dagdagan ang kalidad o subukan ang ibang format.

Suriin ang file sa loob ng pahina, hindi lang sa zoomed-in na view. Ang maliit na pagkakaiba na 300% nakikita ay maaaring hindi mapansin sa normal na laki; Sa kabilang banda, ang hindi mabasa na letra sa card ay totoong problema.

Ang compression ay hindi kapalit ng magandang implementasyon

Bukod sa pag-optimize ng file, magreserba ng espasyo gamit ang mga katangian lapad y taas para maiwasan ang content skips. Gamitin ang tamad na pag-load sa mga imahe na nasa labas ng unang nakikitang block, pero huwag ipagpaliban ang main image kung kinakailangan para maintindihan ang pahina.

Mainam din na magtakda ng mahabang cache para sa mga files na may versioned na pangalan at iwasan ang pag-load ng parehong larawan sa maraming resolusyon gamit ang CSS. Ang mga desisyong ito ay nangangailangan ng pagbabago sa site, ngunit kasama ito sa pagtitipid na nakamit sa compression.

Karaniwang Pagkakamali

I-compress muna bago magdesisyon ng sukat

Ang muling pag-resize pagkatapos ay nagpapatunay na kailangan iproseso ang file nang dalawang beses at maaaring magdulot ng pagkawala. Magdesisyon muna sa framing at dimensyon; i-compress sa huli.

I-convert ang mga screenshot sa JPG na may mababang kalidad

Ang maliliit na letra at linya ay maaaring magdulot ng mantsa. Subukan ang PNG o WebP sa mas mataas na kalidad at ikumpara ang timbang.

Gumamit ng maliit na larawan bilang header

Ang pagpapalaki nito ay hindi nakakabawi ng detalye. Magsimula sa isang sapat na malaking source at gumawa ng mas maliliit na variant mula sa bersyong iyon.

Mga Madalas Itanong

Gaano dapat bigat ang isang web image?

Nakasalalay ito sa laki, kahalagahan, at komplikasyon nito. Gamitin bilang pamantayan ang pinakamababang timbang na nagpapanatili ng katanggap-tanggap na kalidad sa panghuling sukat nito, sa halip na habulin ang unibersal na anyo.

Kailangan ko bang i-convert lahat ng larawan sa WebP?

Hindi kinakailangan. Ang WebP ay kapaki-pakinabang, ngunit ang isang simpleng PNG o isang file na optimizado na ay maaaring hindi mag-improve. I-convert ang isang sample, sukatin, at panatilihin ang mga orihinal.

Nakakatulong ba ang compression ng imahe sa pagpapa-improve ng SEO?

Tinutulungan ang karanasan at pagganap, ngunit ang pagposisyon ay nakadepende rin sa kapaki-pakinabang na nilalaman, pag-track, mga link, intensiyon sa paghahanap at maraming iba pang mga senyales. Ang compression ay bahagi ng maayos na inihandang web.