გამოწერაგამოწერა
მოცემულ ბლოგში განვიხილავთ რესპონსიულ სურათებს - სურათებს რომლებიც იდეალურად ერგება ყველა სახის მოწყობილობებს, ისეთებს, როგორებიცაა მობილური, პლანშეტური თუ ე.წ. desktop მოწყობილობები.
srcset ატრიბუტის დახმარებით ჩვენ შევძლებთ მაქსიმალურად გავაუმჯობესოთ ჩვენი აპლიკაციის წარმადობა.
რესპონსიული სურათების საჭიროების დასადგენად წარმოვიდგინოთ მაგალითი, რომელიც დაგვეხმარება მისი საჭიროების გააზრებისთვის.
პირველ მაგალითში განვიხილოთ შემთხვევა, რომლის დროსაც სიატის დიზაინში გათვალისწინებულია desktop მოწყობილობებზე, ე.წ. ულტრა განიერი ფოტო რეზოლუციით 2560×1080. მობილურში კი ფოტო, რომელიც აღარაა ულტრა განიერი და პროპორციებით არის 4/3-ზე 320x240 პიქსელზე სიგანით.
მოცემული მაგალითის რამდენიმენაირი გადაწყვეტა არსებობს, მაგალითად ჯავასკრიპტით ან თუნდაც მხოლდ CSS-ის დახმარებით, მაგრამ აქ იჩენს ერთი პრობლემა წარმადობასთან დაკავშირებით.
მოგეხსენებათ ფოტო რომლის ზომა 2560x1080-ზეა წონით გაცილებით მეტი იქნება, ვიდრე ფოტო, რომელიც 320x240-ზე, ეს კი საკმაოდ დიდ დისკომფორტს ქმნის მომხმარებლის მხარეს, რომელიც მობილური მოწყობილობიდან ეცდება 2560x1080-ზე ზომის ფოტოთი ვებგვერდის გახსნას, ვინაიდან მობილურ მოწყობილობებზე შესაძლებელია სწრაფი ინტერნეტი ყოველთვის არ იყოს ხელმისაწვდომი.
მოცემულ ბლოგში ვისაუბრებთ თუ როგორ გადავჭრით მსგავს პრობლემას srcset ატრიბუტის დახმარებით.
პრობლემის გადაჭრაში დაგვეხმარება HTML-ის 2 ატრიბუტი - srcset და - sizes, რომელთა დამხარებითაც ჩვენ შევძლებთ მივუთითოთ ბრაუზერებს თუ რა ზომის ფოტო ჩამოტვირთონ ჩვენთვის სასურველ რეზოლუციაზე.
მაგალითი:
<img srcset="img-small.jpg 500w, img-large.jpg 800w" sizes="(max-width: 600px) 500px, 800px" src="img-800w.jpg" alt="srcet example" />თითქოს ატრიბუტები რთულად გამოიყურება, მაგრამ საქმე არც ისე რთულადაა, ქვემოთ განვიხილავთ თუ როგორ მუშაობს ის.
srcset ატრიბუტში წარმოდგენილია ფოტოების მისამართები, რომლებიც არიან სპეციფიური ზომის, ისინი ერთმანეთისგან გამოიყოფიან მძიმით და ჰარით.
მაგალითში მოცემული გვაქვს სურათი img-small.jpg რომელიც არის ფაილის სახელი. ასევე თუ დავაკვირდებით ფაილის დასახელების და ჰარის შემდეგ მას მოსდევს 500w, რომელიც აღნიშნავს ფოტოს ზომას.
მოცემული ატრიბუტის დახმარებით ჩვენ შეგვიძლია მივუთითოთ ბრაუზერს, თუ რა ეკრანის ზომაზე რომელი ზომის ფოტო ჩამოტვირთოს. (max-width: 600px) 500px იგივეა რაც ვუთხრათ ბრაუზერს "როდესაც viewport-ის სიგანე არის 600 ან ნაკლები პიქსელი"
ბრაუზერებში, რომლებსაც არ აქვთ srcset ატრიბუტის მხარდაჭერა ჩაიტვირთება სტანდარტულ src ატრიბუტში მითითებული სურათი ხოლო srcset ატრიბუტი უბრალოდ დაიგნორდება
