გამოიწერე YouTube-ის არხიyoutube logoგამოწერა
რა არის srcset ატრიბუტი და რესპონსიული სურათები?

რა არის srcset ატრიბუტი და რესპონსიული სურათები?

მოცემულ ბლოგში განვიხილავთ რესპონსიულ სურათებს - სურათებს რომლებიც იდეალურად ერგება ყველა სახის მოწყობილობებს, ისეთებს, როგორებიცაა მობილური, პლანშეტური თუ ე.წ. 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 ატრიბუტი

srcset ატრიბუტში წარმოდგენილია ფოტოების მისამართები, რომლებიც არიან სპეციფიური ზომის, ისინი ერთმანეთისგან გამოიყოფიან მძიმით და ჰარით.

მაგალითში მოცემული გვაქვს სურათი img-small.jpg რომელიც არის ფაილის სახელი. ასევე თუ დავაკვირდებით ფაილის დასახელების და ჰარის შემდეგ მას მოსდევს 500w, რომელიც აღნიშნავს ფოტოს ზომას.

size ატრიბუტი

მოცემული ატრიბუტის დახმარებით ჩვენ შეგვიძლია მივუთითოთ ბრაუზერს, თუ რა ეკრანის ზომაზე რომელი ზომის ფოტო ჩამოტვირთოს. (max-width: 600px) 500px იგივეა რაც ვუთხრათ ბრაუზერს "როდესაც viewport-ის სიგანე არის 600 ან ნაკლები პიქსელი"

მუშაობს თუ არა srcset ატრიბუტი ძველ ბრაუზერებში?

ბრაუზერებში, რომლებსაც არ აქვთ srcset ატრიბუტის მხარდაჭერა ჩაიტვირთება სტანდარტულ src ატრიბუტში მითითებული სურათი ხოლო srcset ატრიბუტი უბრალოდ დაიგნორდება

კურსები პროგრამირების შესახებ

HTML, CSS-ის სა...

HTML, CSS-ის საწყისი კურსი, დამწყებთათვის (deprecated - მოძველებული)

ჯავასკრიპტის (J...

ჯავასკრიპტის (Javascript) უფასო კურსი დამწყებთათვის

JavaScript-ის D...

JavaScript-ის DOM-ის კურსი დამწყებთათვის

TypeScript-ის კ...

TypeScript-ის კურსი დამწყებთათვის

Angular-ის კურს...

Angular-ის კურსი დამწყებთათვის

ეთიკური ჰაკინგი...

ეთიკური ჰაკინგის კურსი

HTML, CSS-ის კუ...

HTML, CSS-ის კურსი დამწყებთათვის

Reactjs-ის კურს...

Reactjs-ის კურსი დამწყებთათვის

ალგორითმები...

ალგორითმები

Node.js-ის უფას...

Node.js-ის უფასო კურსი დამწყებთათვის

Dart-ის კურსი დ...

Dart-ის კურსი დამწყებთათვის

უახლესი ბლოგები პროგრამირებაზე

Nginx-ის ინსტალ...

Nginx-ის ინსტალაცია Macintosh-ზე

ინგლისური ენის ...

ინგლისური ენის მნიშვნელობა პროგრამირების სამყაროში

როგორ ავაჩქაროთ...

როგორ ავაჩქაროთ საიტი, loading ატრიბუტის დახმარებით

nginx-ის კონფიგ...

nginx-ის კონფიგურაცია (ჩემი ჩანაწერები)