Tarkib
Men img yorlig'i bilan murakkab munosabatlarga egaman.
Oldindan aytishim kerakki, img yorlig'i doimo yuragimda alohida o'rin tutadi. Aytmoqchimanki, biz ko'p yaxshi kunlarni birga o'tkazdik. Giflar - oh, animatsion giflar! Uy mebellaridan tushayotgan mushuklarning ilmoqlarini tomosha qilib, qanday kulamiz.
Hamma narsa o'zgaradi. Men o'zgardim; Internet o'zgargan. Eng muhimi: foydalanuvchilarning ko'rib chiqish kontekstlari o'zgargan va tubdan. Odamlar Internetga ajoyib qurilmalar orqali kirishmoqda: o'rtacha kosmik kemadan ko'ra ko'proq hisoblash quvvatiga ega telefonlar, o'ta yuqori darajadagi planshetlar va ulkan televizorlar. Natijada, ko'pchiligimiz vebga bo'lgan falsafiy yondashuvlarimiz nuqtai nazaridan ham, natijada ishlab chiqilgan texnik jihatdan ham dizayner va ishlab chiquvchi sifatida o'zgardik. Javob beruvchi veb-dizayn bizga noaniqlik bilan ishlash uchun juda kuchli vositalar to'plamini taqdim etadi va foydalanuvchilarga kontentni har qanday ko'rib chiqish konteksti uchun buyurtma qilingan ko'rinishda etkazib berishda katta qadam tashlashga imkon beradi. Javob beruvchi veb-dizayn uchun hech qanday ahamiyatga ega emasligimiz sababli, biz yillar davomida veb-saytga o'rnatmoqchi bo'lgan statik kenglikdagi qulaylik zonalaridan qochishni boshladik - 1024px, 960px, 320px va boshqalar - va biz boshladik. butun vaqt davomida Internetga xos bo'lgan moslashuvchanlikni qabul qilish.
Img yorlig'i biz bilan deyarli o'zgarmadi. Yaxshiyamki, biz uchun - va moslashuvchan maketlarga bo'lgan yangi minnatdorchiligimiz - tasvirlar doimo moslashuvchan bo'lib kelgan. Balandlik va kenglik atributlarini img yorlig'idan olib tashlab, CSS-da maksimal kengligi 100% ni o'rnatgan holda, biz "bu tasvirni har doim ota-ona idishidan oshib ketishiga yo'l qo'ymaslik" deb aytamiz. Bizning maketimiz o'zgarganligi sababli bizning rasmlarimiz ham o'zgaradi.
Bu erda narsalar murakkablashadi, ammo: egiluvchan tasvirlardan foydalanishda, biz imkon qadar kattaroq displeyda, biz oqilona kutishimiz mumkin bo'lgan hajmga qadar o'ynash uchun ommaviy axborot vositalarining etarlicha katta bo'lishini ta'minlashimiz kerak. Biz hozirda foydalanuvchilarga katta foyda keltirdik, bu esa hech qanday foyda keltirmasligi mumkin - kengligi 2000 pikselli tasvir 300 pikselli displeyda katta va isrofgarchilikni anglatadi.
Yashirin narx
Endi, bu namoyishni to'xtatadigan muammo emas deb bahslashish mumkin; bizda "Retina" tasvirlari paydo bo'lishida faktoring qilish uchun juda ko'p o'tkazish qobiliyati borligi. Ya'ni, albatta, eng yomon ulanishni o'rtacha 3G / 4G, rivojlangan va o'ziga xos xususiyatlarga ega qurilmadan foydalanish deb taxmin qilish kerak. Ammo, hozirgi kunda dunyo bo'ylab millionlab odamlar faqat mobil aloqalar orqali Internetga ulanishmoqda, har bir kilobayt uchun to'lovlarni amalga oshirmoqdalar. Ba'zi foydalanuvchilar biroz yaxshilangan tajribadan bahramand bo'lishlari uchun biz ommaviy tasvirlarga beparvolik bilan xizmat ko'rsatish ularga foydalanuvchilarga qo'shimcha narxlarda xizmat ko'rsatishni anglatishini yodda tutishimiz kerak - shunchaki tarmoqli kengligi jihatidan emas, balki haqiqiy iqtisodiy xarajatlar. Hech bo'lmaganda o'zim uchun gapiradigan bo'lsam, men "Internetda eng yaxshi ko'riladigan Internet Explorer 6" ni veb-saytning pastki qismiga "birinchi dunyoda eng yaxshi ko'rilgan" ga qo'ygan bo'lardim. Ikkinchisi, avvalgisiga qaraganda ko'proq haqoratli deb topadigan narsalarning juda qisqa ro'yxatida.
Internet [...] Internetga ulanishi mumkin bo'lgan har qanday qo'shimcha qurilmadan foydalanish imkoniyatiga ega bo'lishi kerak: statsionar yoki mobil, kichik ekranli yoki katta Tim Tim Berners-Li, Internet uzoq yashasin: ochiq veb-standartlar va betaraflikni davom ettirishga chaqiriq.
Biz Filament Group-da BostonGlobe.com loyihasi ustida ishlayotganimizda, biz darhol rasmlarga nisbatan eng katta o'lchamdagi yondashuv mutlaqo imkonsiz bo'lishini angladik. Bunga javoban, Scott Jehl img yorlig'iga turli xil to'xtash nuqtalarini kiritish vositasini ishlab chiqdi.
Buning kaliti JavaScript orqali ekranning kengligini olish va to'g'ri rasmni olish uchun ushbu ma'lumotni serverga o'z vaqtida etkazish edi - aks holda biz kattaroq ekranlarda har bir rasm uchun ikkita so'rov yuboramiz.
Biz topgan eng samarali echim - bu mijozning ekrani haqida ma'lumotni cookie-faylga o'rnatish. Hech bo'lmaganda jozibali emas, lekin funktsional: hujjatning boshiga cookie-fayllarni o'rnatgan holda, sahifaning asosiy qismidagi rasmlar uchun so'rovlar bilan bir qatorda, mijoz tashrif buyurgan bo'lsa ham, mijozning ekran o'lchamini taqdim etishi mumkin. sayt birinchi marta. Keyin biz asl o'lchamdagi, mobil o'lchamdagi rasm uchun so'rovni to'xtatib, 1x1 bo'shliq gif-ga yo'naltirishimiz mumkin. E'tirof etish kerakki, spacer gif-lari cookie-fayllarga asoslangan funktsionallik kabi "1999 yildagi partiya" kabi, ammo bu asl so'rov ta'sirini minimallashtirish uchun eng samarali usul edi. Keyinchalik JavaScript-ni asl atvorni ma'lumotlar atributida ko'rsatilgan manba bilan shartli ravishda almashtirish uchun ishlatishimiz mumkin. Ushbu yakuniy qadam taqqoslash bilan og'riqsiz edi, garchi o'ziga xos asoratlarsiz.
Agar siz davom etayotgan "sezgir tasvirlar" dostonini kuzatayotgan bo'lsangiz, shuni bilasizki, bu yondashuv bundan keyin ham qulab tushgan va shunga o'xshash ko'plab echimlar mavjud. Bir nechta brauzerlar DNS-ni oldindan olib tashlashning tajovuzkor ta'mini tatbiq etishdi va bu BAAlarga hujjat tanasini ajratishdan oldin aktivlarni olishlariga imkon berdi. Tezroq yuklanadigan sahifalar haqida juda xafa bo'lish juda qiyin, lekin bu biz mijozning ekran o'lchamini serverga ushbu dastlabki so'rovni qoldirish uchun vaqtida etkaza olmasligimizni anglatadi. Adolat uchun, biz o'rnatgan cookie-fayllar usuli o'sha paytdagi yirik brauzerlarning o'ziga xos bo'lmagan xatti-harakatlariga asoslangan edi va taxmin qilingan xatti-harakatlarga asoslangan echimlar kamdan-kam hollarda kelajakda eng qulay bo'lishi mumkin.
Chizilgan taxtaga to'liq qaytish bilan biz o'z maqsadlarimizni bir nechta asosiy tushunchalarga ajratishdan boshladik:
- Barcha foydalanuvchilar - har qanday sharoitda ham vakili tasvirni olishlari kerak.
- Kattaroq displeylardagi ortiqcha so'rovni yo'q qiling - yoki, hech bo'lmaganda, bu iltimosni iloji boricha engillashtiring.
- Badiiy yo'nalish bo'yicha tasvirni shunchaki kattalashtirish har doim ham eng yaxshi yondashuv bo'lmasligi mumkin. Serverdagi eng katta rasmning o'lchamini o'zgartirish o'rniga muqobil rasm manbalarini ko'rsatishga qodir bo'lish kichikroq rasmlarni rasm mavzusiga mos ravishda mos ravishda qisqartirishga va kattalashtirishga imkon beradi.
Ikki marta ko'paytirilgan sa'y-harakatlarimiz davomida biz o'zlarining sa'y-harakatlarini ommaviy ravishda hujjatlashtirgan ishlab chiqaruvchilar hamjamiyatining xuddi shunday qoqilgan a'zolariga murojaat qildik. Keyinchalik, miyadagi hujum va shov-shuvli Git jamoat iste'moliga yaramaydigan majburiyatlar paydo bo'ldi - noscript>, dinamik ravishda AOK qilingan tayanch> teglar va hujjat.yozish. Biz zamonaviy ishlab chiqaruvchiga o'xshash gulxan dahshatli hikoyalarini to'qib chiqdik, echim izlash uchun frontend kodlashning eng quyuq chuqurliklarida suv o'tkazdik. Bu juda yoqimli emas edi va bundan ham muhimi: biz hech qanday texnikani sinab ko'rmadik.
Biz tobora xafa bo'lganimiz sababli, tashqi nuqtai nazarga ega bo'lish uchun brauzerlarning ishlab chiquvchilar bilan aloqalar guruhlari a'zolari bilan tanishishimiz kerakligi aniq bo'ldi. Bizning davom etayotgan muzokaralarimizga Opera-dan Mayk Teylor va Xromlik Pol Irish qo'shilishdi va bu bizning son-sanoqsiz muvaffaqiyatsiz "javob beradigan tasvirlar" yondashuvlarimizga bir oz oydinlik kiritishga xizmat qilgan bo'lsa-da, yangi erishilgan aniqlik bizni haqiqiy echimga yaqinlashtirmadi.
Yangi element
Ishlab chiquvchilar suhbatga qo'shilishlari bilan va bir nechta brauzer vakillarining doimiy yordami bilan biz duch keladigan masalalarni faqat boshlang'ich nuqtamiz sifatida yangi element bilan yaxshi hal qilishimiz mumkinligi tobora aniqroq bo'ldi.
Ushbu g'oya, video yorlig'ini belgilash naqshini ilhom sifatida ishlatishdir, chunki uning manba elementlaridagi atributlar ichidagi media-so'rovlardan foydalanishga ruxsat berish va uni tanimagan har qanday brauzerda yorliq ichidagi belgini ishonchli tarzda ko'rsatish. Video va audio teglarda bo'lgani kabi, ushbu echim ham oxirgi foydalanuvchi kontekstiga mos tarkibni ishonchli etkazib berish uchun hech qanday maxsus skriptlarni, HTTP / SPDY sarlavhalarini yoki server tomonidagi texnologiyalarni talab qilmasligi kerak. Media atributlaridan foydalanish orqali biz nafaqat kichik displeyli foydalanuvchilar uchun isrofgarchilikka bo'lgan talablarni kamaytira olmas edik, balki tasvirlarimizning rezolyutsiyasini yuqori displeyli foydalanuvchilarga yoki bosma nashrga moslashtira olamiz.
Hozirgi mujassamlanishiga erishishdan oldin biz rasmiy ravishda tavsiya etilgan belgilash sxemasi bo'yicha son-sanoqsiz takrorlanishlarni boshdan kechirdik:
- picture alt = "Alt yorlig'i barcha manbalar tomonidan tasvirni aniq tasvirlab berishi kerak, ammo kesish va kattalashtirish farq qilishi mumkin.">
- source src = "mobile.webp" />! - Odatiy bo'lib mos keladi. ->
- source src = "high-res.webp" media = "min-width: 800px" />! - Biron bir aktivni olishdan oldin avvalgi manbani 800px dan yuqori qiymatga o'zgartiradi, natijada bitta so'rov paydo bo'ladi. ->
- img src = "mobile.webp" />
- ! - Yiqilgan kontent, agar rasm> yorlig'i qo'llab-quvvatlanmasa. ->
- / rasm>
Pol bizni W3C-ning nisbatan yangi Hamjamiyat guruhlarining sa'y-harakatlari orqali o'z muhokamalarimizni yanada ochishga undaydi. Jamoatchilikning javoblari aql bovar qilmaydigan darajada edi - biz Responsive Images Community Group-ni ishga tushirganimizda hosil bo'lgan trafik Jamoatchilik guruhlarining serverlarini tushirgan darajada. Biz har doim yangi ovozlarni mamnuniyat bilan qabul qilamiz va ushbu forum "sezgir tasvirlar" suhbatining boshqa tomonlari - tarmoqli kengligini aniqlashdan tortib, qurilmalarni tavsiflovchi sarlavhalargacha bo'lgan ko'plab qiziqarli postlarga yo'l ochib berdi. Haqida yozishdan oldin rasm> element, xususan, "Umumiy savollar va tashvishlar" sahifasini o'qishni unutmang. Shuningdek, guruh davomida bir necha oy davomida suhbatlar mavjud va ko'p sonli xabarlar tashqi saytlardagi munozaralar va pochta jo'natmalariga bog'lanib, janjalga o'tishdan oldin o'z vaqtiga arziydi. "Buning o'rniga JavaScript / CSS dan foydalanishni o'ylab ko'rganmisiz" degan takliflar bu jarayonga birinchi kundan boshlab jalb qilingan biz uchun amaldagi hazilga aylandi. Va'da beraman: bizda bor.
Afsuski, barcha jamoatchilik muhokamasiga qaramay rasm> element, biz WHATWG tomonidan juda ko'p qiziqishlarni eshitmadik. Biz shuni tushunamizki, aksariyat odamlar standartlarga chuqur jalb qilingan bo'lib, muammolar va takliflarning katta miqdordagi ortda qolishi ostida mehnatga ishlov berishadi. Biz umidsizlikka uchragan ishlab chiquvchilar guruhidan keladigan yangi element uchun har bir so'rovga darhol javob kutishimiz mumkin emas - bu so'rov qancha tomdan baqirilmasin. Biroq, bu sukutdan tushkunlikka tushmaslik qiyin - ayniqsa, Retina ekranli iPad-lar paydo bo'lishi va tezkor veb-dizaynning tezkor qabul qilinishidan keyin ekranga mos tasvirlarni taqdim etish xavfi ortib borayotgani sababli.
WHATWG-dan nisbatan jim bo'lishiga qaramay, biz harakatlarimizda hayajonli nuqtaga erishdik - bu bizning taklif qilingan element namunani amalga oshirishga tayyorligini his qiladi.
Rasm naqshlari
Ushbu jarayon davomida Opera va Chrome ishlab chiquvchilar bilan aloqalar guruhlari a'zolari bilan yaqindan ishlash natijasida rasm> belgilash naqshlari ikkala jamoaga ham men yarim hazil bilan "psevdospek" deb atagan narsam orqali taqdim etildi. Bu so'zma-so'z kodlash uchun mo'ljallangan spetsifikatsiya emas, balki Jamoatchilik guruhidagi nasr sahifalarini varaqlamay varaqlamasdan amalga oshirishning muhim tafsilotlarini topish uchun yagona joy. Men buni hozircha ommaviy GitHub reposiga joylashtirdim, ammo munozarani Jamoatchilik guruhida markazlashtirilishini afzal ko'raman. Darhaqiqat, yuqoridagi havolada keltirilgan tafsilotlar va talablarga asoslanib, Scott Jehl allaqachon olib kelish uchun polyfill yozgan rasm>Brauzerlarning funktsionalligi, aks holda uni qo'llab-quvvatlamaydi. Ushbu polyfill bugungi kunda ishlaydi, ammo u hali ham nazariy bo'lib, uni hech qachon ishlab chiqarish maydonchasida ishlatmaslik kerak.
Rasm naqshlari mutlaq idealdan yiroq, albatta. O'tkazish qobiliyatini aniqlash vositasini topish - bu optimallashtirilgan usulda aktivlarni etkazib berishning o'ta muhim bosqichidir - bu bo'limda kichik hajmdagi ishlar bajarilmaydi. Mijozlar imkoniyatlarini aniqlashda yangi usullardan foydalanish imkoniyatiga ega bo'lishimiz juda muhim, chunki ular biz uchun mavjud bo'lib, rasm elementi bizni qurish uchun mustahkam asos yaratadi. Agar ushbu element standart bo'lib qolsa, bu bizga bitta mavzuni ifodalovchi turli xil aktivlarni boshqarish vositasi, tasvir manbalarini juda kam isrofgarchilik bilan etkazib berishning boshlang'ich usuli va eski brauzerlar uchun mas'uliyatli pasayish uslubini beradi. Video yorlig'i manbaiga mos keladigan holda, aktivlarni etkazib berishning kelajakdagi uslublari juda ko'p aktivlarga qo'llanilishi mumkin. Img yorlig'i talab qilinadigan barcha jihozlarni hisobga olgan holda ushbu maqsadlarga mos kelmaydi. Bundan tashqari, qadimgi zamonlardan beri mavjud bo'lgan yorliqdagi o'zgartirishlar eski brauzerlarda muammolarni keltirib chiqarmaydi deb hech qachon aniq aytishimiz mumkin emas edi.
Rasm elementi img o'rnini bosmaydi. Har doim oddiy img elementi ish uchun eng yaxshi vosita bo'ladi, rasm elementi esa kattaroq "qahramon" tasvirlari va yuqori aniqlikdagi fotosuratlar uchun saqlanib qoladi. Bizda bunday moslashuvchanlik borligi juda muhim va men bu moslashuvchanlikni img yorlig'i doimo tushunib etgan narsa deb o'ylashni yaxshi ko'raman. Bu shaxsiy narsa emas, albatta, img yorlig'i. Va bundan keyin nima bo'lishidan qat'i nazar: bizda har doim mushuk giflari bo'ladi.
So'zlar: Mat Marquis
Mat "Wilto" Markiz - Bostondagi Filament Group-da ishlaydigan dizayner-slash-developer. Mat jQuery Mobile guruhining a'zosi, A List Apart-ning texnik muharriri va ochiq manba hamjamiyatining faol a'zosi. U, ehtimol, biz gaplashayotganda Twitter-da nimadir haqida o'ylab topgan bo'lishi mumkin.
