Pinakamagandang image size para sa website: gabay sa hero, blog at thumbnail

Ang pinakamagandang image size para sa website ay mga doble ng lapad kung saan ipinapakita ang image. Bilang gabay, gumamit ng 1920 hanggang 2560 px na lapad para sa full-width na hero images, 1200 hanggang 1600 px para sa blog images, at 300 hanggang 600 px para sa thumbnails. I-save bilang WebP o compressed na JPG, at panatilihing mababa sa mga 200 KB ang karamihan ng images.

Praktikal na panimula ang mga ito, hindi opisyal na standards. Ang theme at layout mo ang nagpapasya sa totoong numero, at ipinapakita ng paraan sa ibaba kung paano ito hanapin.

Ano ang pinakamagandang image size para sa website?

Magsimula sa espasyong napupuno ng bawat image sa layout mo. Buksan ang page sa desktop browser, i-right-click ang image at piliin ang Inspect. Ipinapakita ng developer tools ang rendered width sa CSS pixels. Doblehin ang numerong iyon para manatiling malinaw ang image sa mga cellphone at laptop na may high-density na screen.

Mabilisang reference para sa mga karaniwang uri ng image:

• Full-width na hero o banner: 1920 hanggang 2560 px ang lapad.
• Images sa loob ng blog post o content column: 1200 hanggang 1600 px ang lapad.
• Product photos: 1000 hanggang 2000 px sa pinakamahabang gilid, mas malaki kung may zoom ang shop mo.
• Thumbnail at card: 300 hanggang 600 px ang lapad.
• Logos at icons: SVG kung puwede, dahil nananatili itong malinaw sa kahit anong size.
• Social sharing (Open Graph) image: 1200 x 630 px ang malawakang ginagamit na size.

Ang pinakakaraniwang pagkakamali ay pag-upload ng 4000 px na photo mula sa cellphone o camera sa 700 px na column. Dina-download ng browser ang bawat pixel, saka itinatapon ang karamihan. Sa phone connection, ilang segundo iyan ng paghihintay nang walang napapala.

Pixel dimensions lang ang mahalaga sa web. Hindi pinapansin ng screens ang DPI number na naka-store sa file, kaya hindi kailangang mag-set ng 72 o 300 DPI para sa website. Ipinapaliwanag ng gabay sa 300 DPI kung kailan mahalaga ang numerong iyon (sa pag-print).

Hero image size: gaano kalapad at gaano kataas?

Ang hero image ay ang malaking banner sa itaas ng page. Dahil sumasaklaw ito sa buong screen, kailangang ito ang pinakamalapad na image sa site mo.

• Lapad: sakop ng 1920 px ang karamihan ng desktop screen. Umakyat hanggang 2560 px kung gusto mo itong malinaw sa malalaking high-density na display.
• Taas: nakadepende ito sa disenyo mo. Maraming hero ang nasa pagitan ng 600 at 1000 px ang taas sa desktop width.
• Hugis: gumagana sa desktop ang malapad na crop gaya ng 16:9 o 21:9. Sa cellphone, madalas kino-crop sa gitna ang parehong image, kaya ilagay ang subject sa gitna.
• File size: subukang manatili sa ilalim ng mga 500 KB, at mas mababa, mas maganda.

Madalas ang hero ang Largest Contentful Paint element ng page, ang sandaling ginagamit ng Google para husgahan kung gaano kabilis lumabas ang page mo. Ayon sa web.dev guidance ng Google, mag-target ng LCP na 2.5 segundo o mas mababa. Ang mabigat na hero ang karaniwang dahilan kung bakit hindi ito naaabot ng page.

Kung may text sa ibabaw ng hero, nananatili itong nababasa sa bahagyang mas madilim o blurred na image at mas maayos itong nako-compress, dahil mas kaunting bytes ang kailangan ng makikinis na bahagi kaysa sa pinong detalye.

Blog image size para sa articles at featured images

Para sa images sa loob ng post, tingnan ang lapad ng content column mo. Karamihan ng blog theme ay gumagamit ng column na nasa pagitan ng 600 at 800 CSS pixels. Kapag dinoble iyan, 1200 hanggang 1600 px, na siyang blog image size range sa itaas.

• Inline images sa article: bagay ang 1200 px na lapad sa karamihan ng theme. Gumamit ng 1600 px kung malapad ang column mo.
• Featured image: tingnan ang documentation ng theme mo. Malapad na crop ang gamit ng marami, at magandang social sharing image din ang 1200 x 630 px.
• Screenshots: panatilihin sa natural na size nila kung mas makitid sila kaysa sa column, para hindi lumabo ang text dahil pinalaki.
• File size: mag-target ng 100 hanggang 200 KB para sa photos. Puwedeng mas malaki ang screenshots na naka-save bilang PNG, kaya subukan ang WebP para sa mga ito.

Gumamit ng iisang hugis para sa featured images sa buong blog. Nagmumukhang hindi pantay ang archive at category pages kapag halo-halo ang hugis.

Anong file size dapat ang mga image sa website?

Walang opisyal na limit, pero napapabilis ang pages ng mga tantyang target na ito:

• Karamihan ng content images: mababa sa mga 200 KB.
• Malalaking hero images: mababa sa mga 500 KB.
• Thumbnails: kadalasang 20 hanggang 50 KB.

Kung nakakalito ang KB at MB targets, nililinaw ito ng gabay namin sa ilang KB ang nasa isang MB.

Ang tamang dimensions ang gumagawa ng karamihan ng trabaho. Compression ang bahala sa natitira. Ang 1600 px na photo na naka-save bilang JPG sa quality na 75 hanggang 85, o bilang WebP, ay kadalasang pumapasok sa range. Kung mabigat pa rin ang image, gumamit ng compressor na may target size, gaya ng Image Compressor ng ConvertorLab. Ikumpara ang resulta sa orihinal sa full size bago mag-publish.

Anong format ang dapat mong gamitin?

• WebP para sa photos at graphics. Ayon sa Google, 25 hanggang 34% na mas maliit ang lossy WebP kaysa sa katulad na JPEG, at 26% na mas maliit ang lossless WebP kaysa sa PNG. Sinusuportahan ito ng lahat ng kasalukuyang pangunahing browser.
• SVG para sa logo, icon at simpleng illustration.
• JPG bilang fallback, o kapag hindi tumatanggap ng WebP ang platform mo.
• PNG lang kapag kailangan mo ng lossless quality o transparency at hindi puwedeng gumamit ng WebP.

Tinatalakay ng paliwanag namin sa ano ang WebP file ang suporta ng browser at app. Para i-convert ang mga kasalukuyang file, gamitin ang image to WebP converter.

Paano i-resize ang images para sa website mo, step by step

1. Itago ang orihinal mong high-resolution na file sa hiwalay na folder. Huwag i-edit ang nag-iisang kopya.
2. I-crop ang bawat image sa hugis na gamit ng layout mo, tulad ng 16:9 para sa banner o 1:1 para sa card.
3. I-resize sa target width. Nagtatakda ang Resize Image tool ng eksaktong lapad o pinakamahabang gilid para sa buong batch at kayang mag-output ng WebP o JPG.
4. I-compress sa target file size mo, saka tingnan ang ilang image sa full size kung may mantsa o banding.
5. Palitan ang pangalan ng mga file ng maikli, deskriptibo at lowercase na pangalan, tulad ng oak-dining-table.webp.
6. I-upload, saka magdagdag ng descriptive na alt text sa CMS mo.

Maraming platform ang nagre-resize at nagko-convert ng images pagka-upload. Mag-upload pa rin ng file na makatwiran ang size. Nakakatipid ito ng storage at nagbibigay sa platform ng malinis na panimula.

Responsive images, lazy loading at pag-check ng bilis mo

Kasinghalaga ng size ang paraan ng pag-load ng images. Ilang gawi sa HTML ang gumagawa ng karamihan ng trabaho:

• Magdagdag ng loading="lazy" sa images na mas nasa ibaba ng page, para maghintay ang browser hanggang mag-scroll malapit sa mga ito ang mambabasa.
• Huwag i-lazy-load ang hero. Sinasabi ng gabay sa pag-optimize ng LCP ng web.dev na huwag kailanman i-lazy-load ang LCP image, at iminumungkahi nito ang fetchpriority="high" para rito sa halip.
• Laging magtakda ng width at height sa images. Inirereserba ng browser ang espasyo, kaya hindi tumatalon ang text habang naglo-load ang page.
• Para sa images na ipinapakita sa magkaibang-magkaibang size sa cellphone at desktop, mag-alok ng ilang bersyon gamit ang srcset at sizes. Ipinapaliwanag ng responsive images guide ng MDN ang syntax.

Para mahanap ang pinakamalalang image, patakbuhin ang page mo sa PageSpeed Insights o sa Lighthouse panel sa developer tools ng Chrome. Mina-mark nila ang images na mas malaki kaysa sa display size nila, images na puwedeng gumamit ng modernong format, at offscreen images na dapat mag-lazy load. Puwede mo ring buksan ang Network tab, i-filter ayon sa Img at i-sort ayon sa size. Anumang nasa itaas na mas mabigat sa ilang daang KB ay sulit unahing i-resize.

Mga madalas itanong