თეგი img

თეგი img ქმნის სურათს. სურათის გზა მითითებულია ატრიბუტში src. არ საჭიროებს დამხურავ თეგს.

ატრიბუტები

ატრიბუტი	აღწერა
src	აზუსტებს სურათის გზას. სავალდებულო ატრიბუტი.
alt	ალტერნატიული ტექსტი, რომელიც გამოჩნდება სურათის ნაცვლად, თუ ის ვერ მოიძებნა (მაგალითად, არასწორია მითითებული გზა მისკენ). სავალდებულო ატრიბუტი. მისი არარსებობის შემთხვევაში დაიწუნებს ვალიდატორი (პროგრამა, რომელიც ამოწმებს HTML-ის ან CSS-ის კორექტულობას).
width	სურათის სიგანე, პიქსელებში (ამ შემთხვევაში საზომი ერთეულები არ მიუთითება) ან პროცენტებში სურათის მშობელთან მიმართებაში.
height	სურათის სიმაღლე, პიქსელებში (ამ შემთხვევაში საზომი ერთეულები არ მიუთითება) ან პროცენტებში სურათის მშობელთან მიმართებაში.

ნიუანსები

თუ სურათისთვის არ არის მითითებული არც სიგანე, არც სიმაღლე - სურათს ექნება თავისი რეალური ზომა. თუ მითითებულია სიმაღლე - სურათი მიიღებს მითითებულ სიმაღლეს, ხოლო სიგანე მოარგებს ისე, რომ მისი პროპორციები არ იყოს დამახინჯებული.

თუ მითითებულია მხოლოდ სიგანე - ანალოგიურად, სურათი მოარგებს სიმაღლეს ისე, რომ შეინარჩუნოს პროპორციები.

თუ მითითებულია როგორც სიგანე, ასევე სიმაღლე - სურათის პროპორციები შეიძლება დამახინჯდეს (ან არაც, როგორ გამოიცნობთ). თუ სიგანე ან სიმაღლე (ან ორივე ერთად) რეალურზე მეტია - სურათი გაიზრდება, მაგრამ დაკარგავს ხარისხს.

რეკომენდებულია სურათების სიგანის და სიმაღლის მითითება ატრიბუტებში (და არა CSS-ის მეშვეობით) - ამ შემთხვევაში ბრაუზერი უფრო სწრაფად ჩატვირთავს გამოსახულებებს - მას არ ექნება საჭიროება გამოთვალოს თითოეული სურათის ზომა მისი მიღების შემდეგ.

არ არის რეკომენდებული რეალური სურათის ზომის შემცირება აუცილებლობის გარეშე. მაგალითად, სურათის რეალური ზომაა 1000 ჯერ 1000 პიქსელი, ხოლო თქვენ მიუთითებთ მას სიგანეს 100px-ში. ამ შემთხვევაში სურათი ეკრანზე გამოიყურება 100 პიქსელის ზომის, მაგრამ ჰქონდეს ზომა მთელი ათასის და, შესაბამისად, ჩაიტვირთება გაცილებით უფრო დიდი ხანი.

მაგალითი

დავამატოთ საიტზე სურათი და არ მივუთითოთ ატრიბუტები height და width. სურათს ექნება თავისი რეალური ზომა:

:

მაგალითი

შევეცადოთ სურათს დავუმატოთ სიგანე ატრიბუტის width მეშვეობით, სიმაღლე ამ შემთხვევაში უნდა მოარგოს ისე, რომ შენარჩუნდეს სურათის პროპორციები:

:

მაგალითი

ახლა კი სურათს დავუმატოთ სიმაღლე ატრიბუტის height მეშვეობით, სიგანე ამ შემთხვევაში მოარგებს ისე, რომ შენარჩუნდეს სურათის პროპორციები:

:

მაგალითი

დავუმატოთ ერთდროულად სურათს როგორც სიმაღლე, ასევე სიგანე. სურათის პროპორციები ამ შემთხვევაში უნდა გახდეს დამახინჯებული (არა აუცილებელი, მაგრამ ამ შემთხვევაში სიმაღლე და სიგანე შერჩეულია ისე, რომ პროპორციები დამახინჯდეს):

:

მაგალითი

მივუთითოთ სურათის არასწორი გზა (სიმარტივისთვის დავტოვოთ ის ცარიელი). სურათის ნაცვლად ჩვენ ვნახულობთ ატრიბუტის alt-ის შიგთავსს (როგორც ჩანს, ეს ჩვეულებრივი ტექსტია - მაგრამ სცადეთ მისი კოპირება - თქვენ არაფერი გამოგივათ, ის წაიყვანება როგორც სურათი):

:

იხილეთ აგრეთვე