Rasmlarni o'lchamini o'zgartiring _

Brauzerda rasm o'lchamini o'zgartirish qanday ishlaydi

Har bir o'lcham o'zgarishi to'liq JavaScript'da ishlaydigan qisqa quvurdir. Hech qanday kodek kutubxonasi yuklab olinmaydi va hech qanday server ishtirok etmaydi. Brauzerning o'z Canvas API'si faylni dekodlaydi, maqsad o'lchamda qayta chizadi va xotirada qayta kodlaydi, so'ngra sahifa ko'rib chiqishi yoki zip qilishi mumkin bo'lgan Blob beradi. Har bir qadam tab sandbox'ida bo'lganligi uchun, asl fayllar hech qachon tarmoqqa chiqmaydi.

1. Har bir yuklangan faylni Blob sifatida o'qiydi va brauzer serverga baytlarni nusxalamasdan yoki diskka yozmasdan mahalliy ravishda dekodlashi uchun obyekt URL'sini yaratadi.
2. Tanlangan rejimdan maqsad o'lchamlarni hisoblaydi — eng uzun tomonni cheklash, aniq kengligi va balandligi yoki foiz miqyosi. Nisbat qulfi bitta maydonni tahrirlaganda nisbatlarni to'g'ri ushlab turadi.
3. Maqsad o'lchamda ekranorqi Canvas yaratadi va dekodlangan piksellarni qayta chizish uchun ctx.drawImage(source, 0, 0, width, height) chaqiradi. Brauzer o'lchalangan natijani tekislovchi interpolatsiyani boshqaradi.
4. Manba formatda qayta kodlash uchun canvas.toBlob chaqiradi. PNG yoʻqotishsiz qoladi, JPEG va WebP yuqori sifatda qayta kodlanadi. Keyin sahifa oldin/keyin kartasini ko'rsatadi va fflate yordamida xotirada yaratilgan rasmga yo'naltirilgan yuklab olish yoki bitta ZIP taklif etadi.

Nima uchun rasmlarni o'lchamini o'zgartirish kerak?

• Haddan tashqari katta rasmlar sekin sahifalarning eng keng tarqalgan sababidir. 600 piksel kenglikdagi maketga to'g'ridan-to'g'ri tashlangan 4000×3000 telefon surati ekran ko'rsatishi mumkin bo'lganidan taxminan 40 marta ko'proq piksel yuboradi. Yuklashdan oldin eng uzun tomonni 1600 px bilan cheklash sahifa og'irligini keskin qisqartiradi va Core Web Vitals LCP ni yaxshilaydi.
• Yuklash shakllari qat'iy o'lchamlarni talab qiladi. Avatar uyalari, ID-foto portallari, marketplace ro'yxatlari va OG ijtimoiy kartalar aniq piksel o'lchamlarini talab qiladi: Open Graph ko'rinishi uchun 1200×630, ilova ikonkasi uchun 512×512, miniatyura uchun 150×150. To'g'ri raqamni kiriting va rad etilgan yuklash halqasini o'tkazib yuboring.
• Elektron pochta va chat vositalari katta har narsani jim qayta siqadi, bu esa toza skrinshot ni buzishi mumkin. O'zingiz maqbul kenglikka o'lcham o'zgartirishingiz boshqa birovning yo'qotishli quvuriga topshirish o'rniga natijani bashorat qilinadi.
• Galereya va kataloglar uchun toplu izchillik muhim. Aralash o'lchamdagi fotosuratlar papkasini bitta 800×800 maqsad orqali o'tkazish har bir kartani panjaraga tekis joylashtirilishini ta'minlaydi, tartibni buzadigan dasht rasm qolmaydi.

Keng tarqalgan ilovalar

O'lcham o'zgartirish manba o'lchamlari va manzilning kutishlari mos kelmagan paytda kerak bo'ladi. Uchta naqsh qayta-qayta namoyon bo'ladi.

• Shopify yoki WooCommerce do'koni uchun mahsulot fotosuratlarini tayyorlash. Kameradan 4000 piksellik asl nusxalarning papkasi do'kon tezi yuklanishi uchun eng uzun tomonning 1600 px bilan cheklanadi; nisbat o'zgartirilmaydi, shuning uchun hech narsa cho'zilgan ko'rinmaydi.
• Bitta asosiy fayldan ijtimoiy va ilova aktivlarini yaratish. Open Graph kartasi uchun aniq 1200×630, so'ngra ilova ikonkasi uchun 512×512 ni o'rnating; og'ir muharrir ochmasdan bir necha bosmada har birini eksport qiling.
• QA yoki qo'llab-quvvatlash skrinshot larini biletlarga qo'shishdan oldin toplu ravishda kichraytirish. 50 ta skrinshot papkasini 50% ga o'lcham o'zgartirish odatda bug tracker ga kirishdan oldin arxiv o'lchamini taxminan uch chorakka kamaytiradi.

Amaliy misol: 4000 px suratdan 1600 px veb rasmga

Telefondan to'g'ridan-to'g'ri 4000×3000 piksellik surat har qanday veb maket keragidan ancha katta keng tarqalgan yukdir. Bu o'lcham o'zgartirishning nima tejashini o'lchash uchun adolatli mezondir.

Suratni yuklash maydoniga tashlang, rejimni Eng uzun tomonni cheklash da qoldiring va qiymatni 1600 ga o'rnating. Canvas quvuri rasmni nisbat saqlanib 1600×1200 da qayta chizadi, so'ngra asl formatda qayta kodlaydi. Chiqish kartasi yangi o'lchamlar va fayl hajmini ko'rsatadi, bu odatiy JPEG uchun bir necha megabaytdan bir necha yuz kilobaytga tushadi. Bitta faylni olish uchun kartadagi Yuklab olish tugmasini bosing yoki bitta o'tishda bir nechta rasmni o'lchamini o'zgartirgan bo'lsangiz ZIP yuklab olish tugmasini bosing. Tashlashdan yuklab olishga qadar butun jarayon soniyaning bir qismida ishlaydi va sahifaning o'zi yuklanganidan so'ng nol tarmoq o'tkazuvchanligi ishlatadi.

Qaysi o'lcham o'zgartirish rejimlari mavjud?

Uchta. Eng uzun tomonni cheklash kenglik yoki balandlikning uzunrog'ini piksel qiymatiga cheklaydi va ikkinchi tomonni moslashtirib o'lchamini o'zgartiradi — bu hech qachon buzilmasligi uchun xavfsiz standartdir. Aniq kengligi × balandligi har ikkala raqamni kiritishga imkon beradi, birinchisini tahrirlashda ikkinchisini manba nisbatidan qayta hisoblash uchun nisbat qulfi bilan — shakl aniq nomutanosib o'lcham talab qilganda qulfni o'chiring. Foiz bilan miqyos har ikkala o'lchamni bitta koeffitsientga ko'paytiradi, butun toplu ishni bir vaqtda ikki barobarga kamaytirish yoki ikki barobarga oshirish uchun qulay. Oltita bir marta bosish presetlari (1920×1080 dan 150×150 miniatyuraga qadar) eng keng tarqalgan maqsadlarni qamrab oladi.

Bu qurilmamda sodir bo'ladimi?

Ha, to'liq. Sahifa har bir rasmni xotirada dekodlash, qayta chizish va qayta kodlash uchun brauzerning mahalliy Canvas API'sidan va Web File API'dan foydalanadi. Serverga hech qanday rasm ma'lumotlari yuborilmaydi, vaqtinchalik yuklash yo'q, bulut aylanishi yo'q. Buni o'zingiz tekshirishingiz mumkin: DevTools ni oching, Network paneliga o'ting va o'lcham o'zgartirish o'tkazing. Ko'radigan yagona chiquvchi so'rovlar sahifaning boshlang'ich yuklanishi va reklama chaqiruvlaridir. Rasm shaklidagi hech narsa tabdan chiqmaydi, bu esa skanerlangan shaxsiy hujjatlar, tibbiy rasmlar va hech qachon yuklashni xohlamasangiz boshqa materiallar uchun xavfsiz qiladi.

O'lcham o'zgartirish sifatni pasaytiradimi?

Rasmni kichraytirish (kichraytirish o'lchami) ajoyib ko'rinadi — brauzer manba piksellarini kam pikselga o'rtalashtiradi, shuning uchun tafsilotlar aniq qoladi va fayl ancha kichrayadi. Manba ruxsatidan yuqoriga kattalashtirish (kattalashtirish o'lchami) hech qachon olinmagan tafsilotlarni ixtiro qila olmaydi, shuning uchun kattalashtirilgan kichik rasm yumshoq ko'rinadi — bu har qanday o'lcham o'zgartiruvchining cheklovi, faqat bu emas. Chiqish manba formatini saqlaydi: PNG yoʻqotishsiz qoladi, JPEG va WebP yuqori sifat sozlamasida qayta kodlanadi, shuning uchun asl nusxadan ko'rinadigan farqni payqash qiyin.

Qaysi fayl formatlari qo'llab-quvvatlanadi?

Kirish tomonida, brauzer dekodlay oladigan har qanday format qabul qilinadi: PNG, JPEG, WebP, GIF va BMP telefon, kamera yoki skrinshot vositasi tomonidan ishlab chiqarilgan deyarli har qanday faylni qamrab oladi. Chiqish Canvas kodlovchisi qo'llab-quvvatlaydigan joyda manba formatini saqlaydi — PNG, JPEG va WebP bevosita ishlaydi. Canvas API dekodlashi, lekin qayta kodlamasligi mumkin bo'lgan GIF va BMP yoʻqotishsiz PNG sifatida saqlanadi. O'lchamlari o'zgartirilgan fayl nomi yangi o'lchamlarni o'z ichiga oladi (masalan, photo-1600x1200.jpg), shuning uchun toplu ishni saralash oson.

Rasmlaringizni tashlang, o'lchamni tanlang, o'zgartiring. Hamma narsa yorlig'ingizda ishlaydi. Yuklash yo'q, hisob yo'q, server navbatini kutish yo'q.