შესვლა

HTML › დამწყები › სურათები

სურათის ზომა

მარტივი⏱ 7 წთ+20 XP👑 Pro#HTML#width#height#loading#lazy

რას ისწავლი

  • როგორ მიუთითო სურათის ზომა width და height ატრიბუტებით
  • რატომ იცავს ზომის მითითება გვერდს „ხტომისგან“
  • რას აკეთებს loading="lazy"

width და height

სურათის ეკრანზე საჩვენებელი ზომა ორი ატრიბუტით შეიძლება მიუთითო:

HTML
<img src="/og.jpg" alt="CodeQuest-ის ბანერი" width="600" height="315">

რიცხვები პიქსელებშია და ერთეული არ იწერება: width="600" და არა width="600px". თუ მხოლოდ ერთს მიუთითებ, მაგალითად width-ს, ბრაუზერი მეორეს თვითონ გამოთვლის ისე, რომ სურათის პროპორციები შენარჩუნდეს.

ფაილი /og.jpg 1200×630 პიქსელისაა. ზემოთ მოცემულ მაგალითში ის ზუსტად ორჯერ დაპატარავებულია: 600×315. პროპორცია იგივეა, ამიტომ სურათი ბუნებრივად გამოიყურება.

პროპორციების დარღვევა

თუ ორივე რიცხვს მიუთითებ და ისინი ფაილის პროპორციას არ ემთხვევა, სურათი გაიჭიმება ან შეიკუმშება:

HTML
<!-- 1200×630 ფაილი კვადრატად: ბანერი შეიკუმშება -->
<img src="/og.jpg" alt="შეკუმშული ბანერი" width="300" height="300">

ასეთი დამახინჯებული სურათი არაპროფესიონალურად გამოიყურება. ამიტომ ან ერთი რიცხვი მიუთითე, ან ორივე სწორი პროპორციით.

რატომ მიუთითო ზომა საერთოდ

გახსოვს, სურათი HTML-ზე გვიან მოდის, ცალკე მოთხოვნით. თუ ბრაუზერმა წინასწარ არ იცის სურათის ზომა, ის ჯერ ტექსტს ხატავს თითქოს სურათი არ არსებობს. როცა სურათი ჩამოვა, ბრაუზერი მისთვის ადგილს ათავისუფლებს და მთელი ტექსტი ქვემოთ „ხტება“. ალბათ გქონია ასეთი შემთხვევა: ღილაკზე დაჭერას აპირებდი და ბოლო წამს ის ადგილიდან გაიქცა, რადგან ზემოთ სურათი ჩაიტვირთა.

როცა width და height წერია, ბრაუზერი სურათის ადგილს წინასწარ იტოვებს და გვერდი აღარ ხტება. ამიტომ თანამედროვე რეკომენდაციაა: ყოველ სურათს მიუთითე ორივე ატრიბუტი ფაილის ნამდვილი ზომით ან მისი პროპორციით. CSS-ში მოგვიანებით ზომის შეცვლაც შეგიძლია, მაგალითად ტელეფონზე სიგანის შესამცირებლად, და ბრაუზერი პროპორციას მაინც შეინარჩუნებს.

width ფაილს არ ამსუბუქებს

ხშირი შეცდომაა ვიფიქროთ, რომ width="200" სურათს „ამცირებს“. სინამდვილეში ბრაუზერი მაინც მთლიან ფაილს ჩამოტვირთავს, მაგალითად 4000 პიქსელიანს და 5 მეგაბაიტიანს, და მხოლოდ ეკრანზე აჩვენებს პატარად. ფაილის წონის შესამცირებლად სურათი ფოტორედაქტორში ან სპეციალურ ხელსაწყოში უნდა შეამცირო, როგორც წინა თავში ვისაუბრეთ.

ზარმაცი ჩატვირთვა

გრძელ გვერდზე, ბევრი სურათით, ყველა სურათის ერთბაშად ჩატვირთვა საჭირო არ არის: ქვემოთ მდებარე სურათებს მომხმარებელი შეიძლება არც კი მიაღწიოს. ატრიბუტი loading="lazy" ბრაუზერს ეუბნება: „ეს სურათი მაშინ ჩატვირთე, როცა მასთან ახლოს გადაახვევენ“.

HTML
<img src="photo-12.jpg" alt="..." width="600" height="400" loading="lazy">

ეს ზოგავს ტრაფიკს და გვერდის თავი უფრო სწრაფად ჩნდება. ოღონდ გვერდის ზედა, პირველივე ეკრანზე მდებარე სურათებს lazy არ მისცე: ისინი მაშინვე უნდა ჩანდეს.

სცადე თავად

გაუშვი და შეადარე სამი სურათი: სწორი პროპორცია, დამახინჯებული და მხოლოდ სიგანით. მერე შეცვალე რიცხვები.

HTML · სცადე თავად

ხშირი შეცდომები

  • px ატრიბუტში. width="300px" არასწორია. HTML ატრიბუტში მხოლოდ რიცხვი იწერება.
  • არასწორი პროპორცია. ორივე რიცხვი ფაილის პროპორციით უნდა იყოს, თორემ სურათი დამახინჯდება.
  • დიდი ფაილი პატარა width-ით. მომხმარებელი მაინც მთლიან ფაილს ჩამოტვირთავს.

სავარჯიშო

ბიტის სურათი /icons/icon-512.png 512×512 პიქსელია. ჩასვი ის სამჯერ: 128×128, 64×64 და 256 სიგანით, სიმაღლის გარეშე. ყველას ჰქონდეს alt. ბოლო სურათს დაამატე loading="lazy".

HTML · სცადე თავად
💡 მინიშნება

კვადრატული ფაილისთვის width და height ტოლი უნდა იყოს.

✅ ამოხსნის ნახვა
HTML
<img src="/icons/icon-512.png" alt="ბიტი, საშუალო" width="128" height="128">
<img src="/icons/icon-512.png" alt="ბიტი, პატარა" width="64" height="64">
<img src="/icons/icon-512.png" alt="ბიტი, დიდი" width="256" loading="lazy">

მინი-ქვიზი

1როგორ იწერება სიგანე 300 პიქსელი <img>-ის ატრიბუტში?

2რატომ მიუთითო width და height?

3რას აკეთებს loading="lazy"?

შეჯამება

  • width და height პიქსელებში, ერთეულის გარეშე. ერთი რიცხვით პროპორცია ავტომატურად შენარჩუნდება.
  • ორივე რიცხვი ფაილის პროპორციით უნდა იყოს, თორემ სურათი დამახინჯდება.
  • ზომის მითითება გვერდს ჩატვირთვისას „ხტომისგან“ იცავს.
  • width ფაილს არ ამსუბუქებს. loading="lazy" ქვედა სურათებს გვიან ტვირთავს.
📝 ჩემი შენიშვნა