# Sayt va lending uchun rasmlar: qayerda qaysi biri ishlaydi Источник / Source: https://picwin.co/uz/blog/sayt-va-lending-uchun-rasmlar Язык / Language: uz Рубрика / Topic: Biznes Автор / Author: Picwin tahririyati Опубликовано / Published: 2026-08-18T00:00:00.000Z Обновлено / Updated: 2026-09-03T11:17:26.468Z Слов / Words: 1307 · Чтение / Reading: 7 min Обложка / Cover: https://picwin.co/api/picwin/blog-images/9f845dd30fbba0e5fe48d86a69f2cdd0bc9cd5b959de835c99a7c5181e6b301b.webp Переводы / Translations: en: https://picwin.co/en/blog/images-for-website-and-landing-page, kk: https://picwin.co/kk/blog/sait-pen-lending-ushin-suretter, pt: https://picwin.co/pt/blog/imagens-para-site-e-landing-page, ru: https://picwin.co/blog/kartinki-dlya-sayta-i-lendinga Sahifada talablari turlicha bir nechta joy bor: birinchi ekran, mahsulot bloki, ishonch dalillari, fon va havola prevyusi. Har biriga nima qo‘yish va sahifani og‘irlashtirmaslik yo‘llarini ko‘rib chiqamiz. --- **Qisqacha** Sahifada bitta emas, turli talabga ega besh-olti rasm joyi bor. Birinchi ekranga sarlavha uchun bo‘sh maydonli yengil kadr, mahsulot blokiga predmetli tasvir, ishonch blokiga odamlar, fonga sokin yuza, havola prevyusiga alohida gorizontal kadr kerak. Ularni bir xil tanlab bo‘lmaydi: har joyning o‘lchami, proporsiyasi va xato bahosi o‘ziga xos. Lending odatda shunday yig‘iladi: birinchi ekranga ta’sirchan rasm topiladi, qolganiga «shunga o‘xshash nimadir» qo‘shiladi. Bir oy o‘tib sahifa turli manbalar kollajiga o‘xshaydi, ortiqcha sekin yuklanadi, messenjerda esa kulrang to‘rtburchak bo‘lib ochiladi. Sahifadagi joylarni alohida ko‘rib, har birining talabini aniqlaymiz. ![Sahifadagi tasvirlar uchun oltita joy va har biriga talablar ko‘rsatilgan sxema](/api/picwin/blog-images/1431461abd0234691bb7e96d07aafc4dc4360c061ac1e6e74f8ddcbcdcddddd7.webp) Odatdagi sahifada oltita joy bor va har birida kadrga talab boshqa. ## Sahifadagi qaysi joylarga rasm kerak? Odatda ular oltita va bir-birini almashtirmaydi. - **Birinchi ekran.** Sahifaning eng qimmat rasmi: hamma ko‘radi, u tusni belgilaydi va ko‘pincha eng og‘ir yuklanuvchi element bo‘ladi. - **Mahsulot bloki.** Buyum yoki interfeysni ko‘rsatadi. Bu yerda o‘quvchi va’dani ko‘rinish bilan solishtirgani uchun halollik kerak. - **Ishonch bloki.** Odamlar, jamoa, jarayon, mijozlar. Go‘zallik bilan emas, tanishlik bilan ishlaydi. - **Fon va ajratgichlar.** Mazmun bloklari orasidagi sokin yuzalar; vazifasi xalal bermaslik. - **Ro‘yxat kartochkalari.** Tangadek o‘lchamda ham o‘qiladigan mayda kadrlar. - **Havola prevyusi.** Sahifaning o‘zidan oldin messenjer va ijtimoiy tarmoqda ko‘rinadigan kadr. ## Birinchi ekrandagi kadr qanday bo‘lishi kerak? Chetlari sokin, hajmi esa yengil bo‘lishi kerak. Birinchi ekranda deyarli doim sahifaning eng katta elementi turadi va Largest Contentful Paint shunga qarab o‘lchanadi. Google bu ko‘rsatkichni yuklanishlarning 75-persentilida 2,5 soniya ichida ushlashni tavsiya qiladi ([web.dev](https://web.dev/articles/lcp)). Og‘ir rasm bu chegaradan o‘tishning eng odatiy yo‘lidir. Amaliy talablar: - **Sarlavhaga bo‘sh joy.** Matn va tugma tushadigan, muhim detallarsiz tekis soha. - **Sodda kompozitsiya.** Bitta mazmuniy markaz: murakkab kadr sarlavha bilan raqobatlashib, ikkala xabarni ham zaiflashtiradi. - **Kesishga chidamlilik.** Mobil ekranda gorizontal kadrning o‘rtasi qoladi, qahramon shu yerda saqlanishi shart. - **Siqilish imkoniyati.** Yumshoq gradiyentli, mayda detali kam kadrlar bir xil sifatda rang-barang kadrlardan bir necha baravar yengil bo‘ladi. Maslahat Kadr yoqsa-yu, unda bo‘sh joy bo‘lmasa, darhol qoraytirmang. Shu topshiriq yoki katalog bo‘limida ayni uslubdagi bo‘sh maydonli qo‘shni kadr bor-yo‘qligini ko‘ring: turkumda ko‘pincha sahnaning ham «zich», ham «keng» varianti bo‘ladi. ## To‘liq enli kadrmi yoki ustundagi rasmmi? Ikkalasi ham ishlaydi; tanlov blokda muhit muhimmi yoki tushuntirishmi, shunga bog‘liq. ### To‘liq enli kadr Kayfiyatni ushlab, sahifani qimmatroq ko‘rsatadi. Chetlarda zaxira talab qiladi: keng monitorda o‘rta qism, telefonda undan ham tor o‘rta qism qoladi. Mayda detal va kadrdagi matnni yomon ko‘taradi. Fayl hajmi kattaroq va deyarli doim yuklanish tezligi o‘lchoviga kiradi. ### Ustundagi rasm Matn yonida turib, uni tushuntiradi. Proporsiyasi barqaror, kesilishi oldindan ma’lum, hajmi kichik. O‘quvchi yaqindan ko‘rgani uchun mayda detallar mumkin. «Vau» bermaydi, ammo o‘qishga xalal qilmaydi va blokni qayta qurmasdan almashtiriladi. ## Mahsulot, xizmat va ishonch bloklariga nima qo‘yish kerak? Bu yerda rasm «nima olaman?» va «buni kimga ishonaman?» savollariga javob beradi. Mavhumlik aniq tasvirdan yomonroq ishlaydi. [MaketlarMokap va predmetli sahnalar: ilova, qadoq yoki bosma materialni allaqachon mavjuddek ko‘rsatadi. Ishlarni ko‘rish](/uz/category/mockups)[BiznesIsh, muzokara, jamoa — «kompaniya haqida» bloki va xizmat sahifasiga kerakli kadrlar. Ishlarni ko‘rish](/uz/category/business)[InteryerXona va ish makonlari: xizmat oflayn ko‘rsatiladigan joylarda, studiyadan klinikagacha yordam beradi. Ishlarni ko‘rish](/uz/category/interior) Ko‘chmas mulk agentligi uchun ayni mantiq [ko‘chmas mulk](/uz/category/realty) bo‘limiga qo‘llanadi. Ajratgich va fonlarga [mavhum yuzalar](/uz/category/abstract) mos: ular matn bilan bahslashmaydi va rangga oson moslanadi. Afzalliklar ro‘yxatiga mayda grafikani qayta chizishdan ko‘ra [ikonalar](/uz/category/icons) bo‘limidan olish oson. ## Sahifa og‘irlashmasligi uchun faylni qanday tayyorlash kerak? Sahifadagi har qanday joy uchun tartib bir xil. - ### Joy proporsiyasida kesing Avval blok proporsiyasiga mos kesing, keyin qolganini bajaring. Brauzer kesgan kadr baribir to‘liq yuklanadi — hech kim ko‘rmaydigan piksellar uchun ham to‘laysiz. - ### Haqiqiy o‘lchamni belgilang Rasm eni ikki karra zich ekranlar uchun zaxira bilan ko‘rsatish joyi eniga mos bo‘lsin, «har ehtimolga qarshi to‘rt ming piksel» bo‘lmasin. - ### Siqing va solishtiring Zamonaviy formatda saqlang va ko‘rsatish o‘lchamida asl nusxa bilan yonma-yon qarang. Shu o‘lchamda bilinmagan farq — sof tejam. - ### Pastdagi rasmlarni kechiktiring Birinchi ekrandan pastdagi hamma narsa lazy loading bilan yuklanadi. Birinchi ekran kadrini esa kechiktirib bo‘lmaydi: bu sahifaning asosiy ko‘rsatkichini o‘z qo‘lingiz bilan sekinlashtiradi. - ### Telefonda tekshiring Sahifani mobil ekranda ochib, kesilgach har bir kadrdan nima qolganini va birinchi ekran qancha vaqtda ochilganini ko‘ring. ## Havola prevyusida nima ko‘rinadi? `og:image` tegi bilan berilgan alohida rasm. Meta kamida 1200 × 630 pikselni tavsiya qiladi, eng kichik ruxsat etilgani 200 × 200, fayl 8 MB dan oshmasligi, proporsiya esa 1.91:1 ga yaqin bo‘lishi kerak, aks holda kadr kesiladi ([Meta dasturchilar hujjati](https://developers.facebook.com/docs/sharing/webmasters/images/)). 600 × 315 dan kichik kadr havola yonida mayda kvadrat bo‘lib chiqadi — tarqatmani buzadigan o‘sha «kulrang to‘rtburchak». Eslatma Havola prevyusi kichraytirilgan birinchi ekran emas. Proporsiya va o‘qish o‘lchami boshqa: katta sarlavhaga fon bo‘lgan narsa prevyuda noaniq dog‘ga aylanadi. Shu turkumdan alohida gorizontal kadr olish osonroq. ## Alt matniga nima yozish kerak? Rasmda ko‘rinadigan narsani qisqa va aniq yozing. Alt matnini ekran diktorlari va qidiruv robotlari o‘qiydi; Google tavsiyalarida kalit so‘zlar ro‘yxati o‘rniga tavsifiy matn so‘raladi, mazmunli fayl nomi va yonidagi izoh ham yordam berishi aytiladi ([Google Search Central](https://developers.google.com/search/docs/appearance/google-images)). Amaliy qoida: kadrni qaror qabul qiladigan odamga telefonda qanday tasvirlasangiz, shunday yozing. «Barista peshtaxta ortida qahva tayyorlayapti» — «qahva, qahvaxona, barista, espresso, qahva sotib olish»dan yaxshi. Muhim Mazmun bermaydigan bezak fonini ta’riflash shart emas — uning alt matni bo‘sh qoladi. Matn o‘rnini bosadigan rasm esa (tarif sxemasi, infografika, raqamli skrinshot) albatta tasvirlanadi, aks holda uni ko‘rmaydiganlar uchun sahifaning bir qismi yo‘qoladi. ## Sahifaga tasodifiy topilmalar emas, to‘plamni qanday yig‘ish kerak? Blokma-blok emas, butun sahifaga qarang. Bitta sahifadagi kadrlar uch belgida mos bo‘lishi kerak: yorug‘lik harorati, rakurs va detal zichligi. Bitta topshiriq yoki katalog bo‘limidan olinganda buni qilish osonroq, chunki umumiy uslub brifdayoq berilgan. Kadrni tanlash va xariddan oldin tekshirish [loyiha uchun AI-rasm tanlash](/uz/blog/loyiha-uchun-ai-rasmni-qanday-tanlash) maqolasida batafsil. Sahifa keyin postlarga ajralsa, [ijtimoiy tarmoqlar uchun rasmlar](/uz/blog/ijtimoiy-tarmoqlar-uchun-rasmlar), unga trafik olib kelinsa, [reklama kreativlari](/uz/blog/reklama-kreativlari) haqidagi maqola kerak bo‘ladi. Sahifa uchun to‘plam yig‘ing Katalog bo‘limlari, filtrlar va bitta topshiriq ishlari Picwin mini-ilovasida: kadr qo‘shnilari ko‘ringan joyda turkum yig‘ish osonroq. [Katalogni ochish](/uz/partners) **Asosiysi** - Sahifada bitta rasm emas, talablari turlicha oltita joy bor. - Birinchi ekran kadri yuklanish tezligini belgilaydi: u kechiktirilmaydi va «har ehtimolga katta» bo‘lmaydi. - Proporsiyani asl nusxa emas, joy belgilaydi: brauzerda emas, yuklashdan oldin kesing. - Havola prevyusi didga emas, platforma talabiga ko‘ra alohida tanlanadi. - Alt mazmunni tasvirlaydi; bezak fon tavsifsiz qoladi. ### Lendingga nechta rasm kerak? Rasm bilan ko‘rsatishni talab qiladigan mazmun bloklari qancha bo‘lsa, shuncha — odatda to‘rttadan sakkiztagacha. Vazifasiz rasm ortiqcha hajm va shovqin, buyumni ko‘rsatish kerak blokdagi rasmsizlik esa yo‘qotilgan tushuntirishdir. ### Bir kadrni ham birinchi ekran, ham havola prevyusida ishlatsa bo‘ladimi? Ikkala proporsiyaga chidab, kichik o‘lchamda tushunarli qolsa, bo‘ladi. Ko‘pincha bir turkumdan ikki kadr olish foydaliroq: prevyuning o‘qish o‘lchami boshqa. ### Birinchi ekran rasmi qanday enlikda bo‘lishi kerak? Ko‘rsatish joyi eni ekran zichligiga ko‘paytirilganicha, undan ortiq emas. Universal son yo‘q: 720 pikselli ustun bilan to‘liq enli sahifaning javobi boshqa. ### Kadr chiroyli, ammo rang-barang bo‘lsa nima qilish kerak? Ustida matn yo‘q joyda ishlating: mahsulot bloki, galereya, ajratgich. Birinchi ekranga detalsiz soha, boshqa kadr yoki shu syujetning sokinroq varianti kerak. ### Sahifadagi rasmlarga izoh kerakmi? Kadr ma’lumot bersa yoki tushuntirish talab qilsa kerak: sxema, taqqoslash, interfeys. Bezak illyustratsiyasiga izoh shart emas — u sarlavhadan e’tiborni tortadi. ### Rasmlar sahifani sekinlashtirayotganini qanday bilish mumkin? Mobil ulanishda eng katta element paydo bo‘lish vaqtini o‘lchang va u qaysi elementligini ko‘ring. Birinchi ekran rasmi bo‘lsa, optimallashtirishni skriptdan emas, undan boshlang. ### Mahsulot hali mavjud bo‘lmasa, fotosuratni nima bilan almashtirish mumkin? Mokap yoki jarayon illyustratsiyasi bilan. Mavjud bo‘lmagan mahsulotni fotorealistik ko‘rsatish xavfli: voqelikka mos kelmagan va’da rasmsizlikdan qimmatroq tushadi.