Mwongozo

Simu hupakua picha gani hasa?

Tuliandaa picha yetu kwa upana kadhaa, tukakandamiza kila nakala na kujaribu uteuzi unaojirekebisha kwenye kivinjari cha ndani. Matokeo yanaonyesha faili zinazopatikana kwa ukurasa na baiti za kila chaguo. Hii hutenganisha kufanya faili nyepesi na kuhakikisha simu inapokea picha ya ukubwa unaofaa.

Ilisasishwa mwisho:

Timu ya Bitinz · Jinsi tunavyoandika na kuhakiki maudhui

Picha kubwa iliyokandamizwa bado ni chaguo kubwa

Nafasi ndogo ya picha haifanyi faili ya kupakua kuwa ndogo. Ikiwa kila mgeni anapokea picha ileile kamili, simu inaweza kupakua pikseli ambazo mpangilio hautumii. Ukandamizaji na uteuzi unaojirekebisha hutatua sehemu tofauti za tatizo.

Mtiririko wa tovuti hueleza maandalizi, na mwongozo wa uwasilishaji picha huunganisha na uchunguzi wa utendaji. Hapa tunafuata picha hadi uchaguzi halisi wa kivinjari bila kuchukulia alama kama matokeo.

Andaa chaguo, kisha uangalie kivinjari

Tuliunda nakala zenye uwiano uleule kwenye kihariri cha nje kabla ya ukandamizaji; Bitinz haikubadili vipimo. Tarehe 2026-10-29 kila nakala ilichakatwa ndani kwa Uwiano. Vipimo, baiti na jumla ya ukaguzi hutambua chaguo la jaribio la kivinjari.

Ukurasa wa ndani ulitoa chaguo kwa srcset na kanuni inayolingana ya sizes. Tulirekodi upana wa dirisha, msongamano na faili iliyochaguliwa. Hivi hupima data ya picha, si ukurasa mzima au mtandao wa simu ulioigizwa. Sera ya uhariri inaeleza ushahidi.

Faili zilizoandaliwa kwa ajili ya uteuzi

Linganisha ukubwa hapa, kisha rekodi ya kivinjari iliyounganishwa kwenye vyanzo. Kivinjari kinaweza kuchagua faili ambazo ukurasa unatoa tu.

PichaPikseliMatokeoKiwangoKablaBaadaPunguzo
photo-4000.jpg4000 × 2667 pxJPGUwiano2032.6 KB595.9 KB70.7%
photo-1600.jpg1600 × 1067 pxJPGUwiano393.1 KB129.0 KB67.2%
photo-800.jpg800 × 533 pxJPGUwiano116.0 KB40.0 KB65.5%
photo-400.jpg400 × 267 pxJPGUwiano34.2 KB12.4 KB63.7%

Bitinz · 1 KB = 1000 baiti.

Bana pichaPunguza ukubwa wa faili za JPG, PNG na WebP katika muundo wake wa asili, kwa makundi na bure.Bana picha

Kivinjari kilipakua nini hasa

Eneo la kutazama (CSS px)Msongamano wa pikseliUpana unaoonekana (CSS px)Upana uliochaguliwa (px)Data ya picha
3901×35840012.4 KB
3902×35880040.0 KB
7681×73680040.0 KB
7682×7361600129.0 KB
12801×9601600129.0 KB
12802×9604000595.9 KB

Kila mstari ulitumia mazingira mapya ya kivinjari bila akiba. Kisa kipana zaidi chenye msongamano mkubwa kilichagua picha kubwa zaidi kwa sababu orodha ilikuwa na pengo kubwa la ukubwa hapo. Ingefaa kujaribu chaguo la kati; kivinjari huchagua faili zilizopo kwenye orodha tu.

Kagua picha iliyochaguliwa kwa ukubwa wenye faida

Maelezo ya picha ya chanzo

Maelezo ya picha asili ya mandhari inayomilikiwa na mradi

Maelezo ya picha iliyokandamizwa

Maelezo yanayolingana ya picha iliyokandamizwa kweli
Vipande halisi vya picha asili ya mradi na iliyokandamizwa. Huonyesha mwonekano tofauti na uteuzi wa faili wa kivinjari.

Kagua picha kwenye skrini ndogo na yenye msongamano mkubwa. Chaguo dogo zaidi si bora likionekana hafifu. Vilevile, chaguo kubwa halistahili kwa sababu tu ukandamizaji wake unaonekana mzuri.

Rekodi ni taswira ya mazingira yaliyotajwa. Akiba na maamuzi ya kivinjari vinaweza kuathiri ziara nyingine. Kurudia uchunguzi, tumia mazingira mapya na ukague picha iliyoombwa badala ya kuikisia kutokana na vipimo vinavyoonekana.

Unganisha maandalizi na uwasilishaji

Tumia kikandamizi cha picha kwa nakala ulizoandaa, kisha tovuti au CMS itoe chaguo zinazofaa. Ikiwa msimbo unaelekeza skrini zote kwa faili moja kubwa, ukandamizaji pekee haubadili uamuzi huo.

Weka sizes ilingane na mpangilio wa CSS. Kivinjari hutumia kidokezo hicho pamoja na chaguo zilizopo na msongamano wa skrini; jina la faili halielezi nia yako. Kagua faili iliyochaguliwa baada ya kubadili mpangilio.

Kwa kazi zinazojirudia, API ya wasanidi inaweza kubana faili zilizoandaliwa wakati wa uchapishaji. Kubadili vipimo kunabaki hatua tofauti ya maandalizi. Mwongozo wetu wa ubora unaeleza jinsi ya kulinganisha maelezo kabla ya kubadilisha picha.

Kagua nafasi ya picha kwenye ukurasa

  1. Pima nafasi na uchague upana wenye uwiano unaohitajika na muundo.
  2. Andaa na ukandamize nakala huku ukihifadhi chanzo kinachoharirika.
  3. Toa chaguo kwa kanuni ya sizes inayolingana na mpangilio.
  4. Kagua faili iliyochaguliwa na picha inayoonekana kwenye skrini tofauti.

Maswali yanayoulizwa mara kwa mara

Kupunguza upana unaoonekana hupunguza faili inayopakuliwa?
Upana wa CSS hubadili mpangilio, si baiti za faili moja. Toa chaguo zinazofaa na ukague kivinjari kinachagua ipi.
Kwa nini simu yenye msongamano mkubwa huchagua picha pana zaidi?
Skrini yenye msongamano mkubwa inaweza kutumia pikseli nyingi katika nafasi ileile inayoonekana. Vipimo vya chaguo na kidokezo cha ukubwa cha ukurasa huathiri uchaguzi.
Jaribio hili hupima kasi ya ukurasa?
Hurekodi ukandamizaji na uteuzi wa picha. Upakiaji wa ukurasa mzima pia hutegemea faili nyingine, mtandao na kazi ya kuonyesha ukurasa.

Zana katika mwongozo huu

Vyanzo

  1. Bitinz: Responsive image browser observations (2026-10-29)
  2. Bitinz: Image lab: sources, measurements and output hashes (2026-10-29)
  3. MDN: Responsive images