Sayt va lending uchun rasmlar: qayerda qaysi biri ishlaydi

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 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). 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.

To‘liq enli kadrmi yoki ustundagi rasmmi?

Ikkalasi ham ishlaydi; tanlov blokda muhit muhimmi yoki tushuntirishmi, shunga bog‘liq.

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.

Maketlar

Mokap va predmetli sahnalar: ilova, qadoq yoki bosma materialni allaqachon mavjuddek ko‘rsatadi.

Ishlarni ko‘rishBiznes

Ish, muzokara, jamoa — «kompaniya haqida» bloki va xizmat sahifasiga kerakli kadrlar.

Ishlarni ko‘rishInteryer

Xona va ish makonlari: xizmat oflayn ko‘rsatiladigan joylarda, studiyadan klinikagacha yordam beradi.

Ishlarni ko‘rish

Ko‘chmas mulk agentligi uchun ayni mantiq ko‘chmas mulk bo‘limiga qo‘llanadi. Ajratgich va fonlarga mavhum yuzalar mos: ular matn bilan bahslashmaydi va rangga oson moslanadi. Afzalliklar ro‘yxatiga mayda grafikani qayta chizishdan ko‘ra ikonalar bo‘limidan olish oson.

Sahifa og‘irlashmasligi uchun faylni qanday tayyorlash kerak?

Sahifadagi har qanday joy uchun tartib bir xil.

1. 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.

2. 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.

3. Siqing va solishtiring

   Zamonaviy formatda saqlang va ko‘rsatish o‘lchamida asl nusxa bilan yonma-yon qarang. Shu o‘lchamda bilinmagan farq — sof tejam.

4. 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.

5. 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). 600 × 315 dan kichik kadr havola yonida mayda kvadrat bo‘lib chiqadi — tarqatmani buzadigan o‘sha «kulrang to‘rtburchak».

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).

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.

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 maqolasida batafsil. Sahifa keyin postlarga ajralsa, ijtimoiy tarmoqlar uchun rasmlar, unga trafik olib kelinsa, reklama kreativlari haqidagi maqola kerak bo‘ladi.

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.