ONLINE - კურსები - HTML
გაკვეთილი 9. სურათები, ფოტოსურათები (გაგრძელება)
ტეგს <img> ყოველთვის «თან უნდა ახლდეს» ატრიბუტი "src" - ი, რომელიც ბრაუზერს მიუთითებს, სად დევს სურათი. ამის გარდა არსებობს სხვა ატრიბუტები, რომლებიც შესაძლებელია დაგჭირდეთ გამოსახულებებთან მუშაობისას.
ატრიბუტი "alt" -ი გამოიყენება გამოსახულების ალტერნატიული აღწერისათვის, თუ, რაიმე მიზეზის გამო, ისარ იყო ნაჩვენები მომხმარებლისთვის. ინტერნეტის განვითარებამ და იმ სიჩქარემ, რომლითაც ის გადაეცემა, ამ ატრიბუტის გამოყენებას არააქტუალურს ხდის, თუმცა ჯერ კიდევ არსებობენ მომხმარებლები, რომელთაც ძალიან დაბალი სიჩქარის ინტერნეტ აქვთ და ამის გამო სურატები შესაძლებელია დიდხანს უნდებოდეს ჩატვირთვას ან საერთოდაც ვერ იტვირთებოდეს. სწორედ მათთვის გამოიყენება ატრიბუტი "alt" -ი:
ატრიბუტი "alt" -ი გამოიყენება გამოსახულების ალტერნატიული აღწერისათვის, თუ, რაიმე მიზეზის გამო, ისარ იყო ნაჩვენები მომხმარებლისთვის. ინტერნეტის განვითარებამ და იმ სიჩქარემ, რომლითაც ის გადაეცემა, ამ ატრიბუტის გამოყენებას არააქტუალურს ხდის, თუმცა ჯერ კიდევ არსებობენ მომხმარებლები, რომელთაც ძალიან დაბალი სიჩქარის ინტერნეტ აქვთ და ამის გამო სურატები შესაძლებელია დიდხანს უნდებოდეს ჩატვირთვას ან საერთოდაც ვერ იტვირთებოდეს. სწორედ მათთვის გამოიყენება ატრიბუტი "alt" -ი:
<Img src = "logo.gif" alt = "პროექტის ლოგოტიპი">
ეს ნიშნავს იმას, რომ სანამ სურათი იტვირთება (ან თუ საერთოდ არ იტვირთება) მომხმარებელი გამოსახულების ნაცვლად ამ სიტყვებს დაინახავს, რომელიც სურათის შინაარსს აღწერს. სუსტი არგუმენტია, მაგრამ ასეთი მაინც არსებობს.
კიდევ ორი მნიშვნელოვანი ატრიბუტი - "width" და "height":
<Img src = "logo.png" width = "141" height = "32">
Width - სიგანე, height - სიმაღლე. ამ ატრიბუტების მითითება არ არის აუცილებელი, მაგრამ თქვენი გამოსახულების კორექტული ასახვისათვის ნებისმიეი ბრაუზერისთვის ეს აუცილებელია!
ამის გარდა ეს ატრიბუტები ძალიან მოსახერხებელია, მაშინ როდესაც ერთი და იგივე გამოსახულებებს ვიყენებთ სხვადასხვა ზომებში. თქვენ არ მოგიწევთ ერთი სურათის რამდენიმე ასლის გაკეთება, უბრალოდ ყოველ ჯერზე უნდა მიუთითოთ განკუთვნილ ადგილზე საჭირო ზომები და პროგრამა თავად დააპატარავებს ან გაზრდის მას ამ ზომებამდე.
გთავაზობთ მაგალითს, როგორ გამოიყურება ერთი და იგივე სურათი სხვადასხვა ზომებში:
ამის გარდა ეს ატრიბუტები ძალიან მოსახერხებელია, მაშინ როდესაც ერთი და იგივე გამოსახულებებს ვიყენებთ სხვადასხვა ზომებში. თქვენ არ მოგიწევთ ერთი სურათის რამდენიმე ასლის გაკეთება, უბრალოდ ყოველ ჯერზე უნდა მიუთითოთ განკუთვნილ ადგილზე საჭირო ზომები და პროგრამა თავად დააპატარავებს ან გაზრდის მას ამ ზომებამდე.
გთავაზობთ მაგალითს, როგორ გამოიყურება ერთი და იგივე სურათი სხვადასხვა ზომებში:
<Img src = "logo.jpg" width = "32" height = "32">
<Img src = "logo.jpg" width = "100" height = "100">
ამასთან ერთად საჭიროა იცოდეთ!
პირველი: თუ თქვენ არ გსურთ რომ სურათი დამახინჯდეს მისი ზომების შეცვლისას ზომის ატრიბუტების გამოყენებისას, მაგალითად ასე:
<Img src = "logo.jpg" width = "150" height = "100">
ბრაუზერში ასე გამოიყურება e:
აუცილებელია ზომების შეცვლისას დავიცვათ პროპორციები. ამის გაკეთება ადვილია, თუ გამოსახულება კვადრატულია - უბრალოდ ერთნაირ ზომებს აძლევთ სიგრძესა და სიგანეს: 32x32 ან ან 100x100 250x250 - პროპორციები ნარჩუნდება. მაგრამ როგორ მოვიქცეთ თუ გამოსახულების ორიგინალური ზომები მაგალითად არის 131h58, როგორ შევინარჩუნოთ მისი პროპორციები ზომების ცვლილებისას? ამ შემთხვევაში საჭიროა:
... ან ხელით უნდა გამოვთვალოთ მისი პროპორციები კარკულატორის დახმარებით, უნდა ავიღოთ ერთერთი პარამეტრი - მაგალითად ან სიგრძე, ან სიგანე. თუ საჭიროა სიგანე 100 პიქსელი (131 -ის ნაცვლად), მაშინ ტოლობა ასე გამოიყურება:
131 - 100
58 - x
x = 100h58 131
შედეგი: 100 პიქსელი სიგანის შემთხვევაში სიმაღლე 44,28 პიქსელის ტოლი იქნება და პროპორციებიც შენარჩუნდება.
... ან უნდა გამოვიყენოთ პროგრამა Photoshop -ი, რომელშიც შესაძლებელია სურათის დაპატარავება პროპორციების დაცვით.
საუკეთესო ვარიანტი კი ოროგინალი გამოსახულების იმ ზომებში გადაწყვეტაა, რომლის პროპოერციული ცვლა ადვილი იქნება. მაგალითად: 200x100 ან 500h250.
მეორე: ასევე არ უნდა დაგვავიწყდეს რომ, გამოსახულების ზომა კილობაიტებში უცვლელი რჩება, და შესაბამისად ასეთი გამოსახულებაც ზუსტად იმ დროს მოანდომებს ჩატვირთვას რასაც ორიგინალი, თუმცა ბრაუზერში სხვა ზომებში აისახება. ამიტომ, არასდროს არ შეამციროთ გამოსახულების ზომები ატრიბუტებით width და height , თუ ეს გამოსახულება მრავალჯერ გამოიყენება საიტზე თქვენს მიერ. თუ გამოსახულებას ერთჯერადად იყენებთ საიტზე - ის თავიდანვე სასურველ ზომებამდე შეამცირეთ.
მესამე: სურათის გადიდება ატრიბუტების მეშვეობით კატეგორიულად არ არის რეკომენდირებული. რადგან გამოსახულებები ინტერნეტისთვის კეთდება ძალიან «მსუბუქები», მათ არ გააჩნიათ ხარისხის მარაგი და ნებისმიერი ზომის გადიდება აისახება მისი ხარისხის დაკარგვაზე! გტავაზობთ მაგალითს სადაც გამოსახულების ზომები ორჯერ არის გაზრდილი რომლის ორიგინალური ზომებია 100x100 პიქსელი:
... ან ხელით უნდა გამოვთვალოთ მისი პროპორციები კარკულატორის დახმარებით, უნდა ავიღოთ ერთერთი პარამეტრი - მაგალითად ან სიგრძე, ან სიგანე. თუ საჭიროა სიგანე 100 პიქსელი (131 -ის ნაცვლად), მაშინ ტოლობა ასე გამოიყურება:
131 - 100
58 - x
x = 100h58 131
შედეგი: 100 პიქსელი სიგანის შემთხვევაში სიმაღლე 44,28 პიქსელის ტოლი იქნება და პროპორციებიც შენარჩუნდება.
... ან უნდა გამოვიყენოთ პროგრამა Photoshop -ი, რომელშიც შესაძლებელია სურათის დაპატარავება პროპორციების დაცვით.
საუკეთესო ვარიანტი კი ოროგინალი გამოსახულების იმ ზომებში გადაწყვეტაა, რომლის პროპოერციული ცვლა ადვილი იქნება. მაგალითად: 200x100 ან 500h250.
მეორე: ასევე არ უნდა დაგვავიწყდეს რომ, გამოსახულების ზომა კილობაიტებში უცვლელი რჩება, და შესაბამისად ასეთი გამოსახულებაც ზუსტად იმ დროს მოანდომებს ჩატვირთვას რასაც ორიგინალი, თუმცა ბრაუზერში სხვა ზომებში აისახება. ამიტომ, არასდროს არ შეამციროთ გამოსახულების ზომები ატრიბუტებით width და height , თუ ეს გამოსახულება მრავალჯერ გამოიყენება საიტზე თქვენს მიერ. თუ გამოსახულებას ერთჯერადად იყენებთ საიტზე - ის თავიდანვე სასურველ ზომებამდე შეამცირეთ.
მესამე: სურათის გადიდება ატრიბუტების მეშვეობით კატეგორიულად არ არის რეკომენდირებული. რადგან გამოსახულებები ინტერნეტისთვის კეთდება ძალიან «მსუბუქები», მათ არ გააჩნიათ ხარისხის მარაგი და ნებისმიერი ზომის გადიდება აისახება მისი ხარისხის დაკარგვაზე! გტავაზობთ მაგალითს სადაც გამოსახულების ზომები ორჯერ არის გაზრდილი რომლის ორიგინალური ზომებია 100x100 პიქსელი:
<Img src = "logo.jpg" width = "200" height = "200">
აი ის ბრაუზერნა როგორ აჩვენა:
მეოთხე და ბოლო: რაც ნაკლებია გამოსახულების ფაილის ზომა, ბრაუზერი მას უფრო მალე ჩატვირთავს. ჩვეულებრივ, სურათის ზომა ინტერნეტ გვერდზე არ აღემატება 50-70 კილობაიტს. გამონაკლისს წარმოადგენენ ერთეული უნიკალური სურათები, რომელშიც აუცილებლად უნდა იყოს ნაჩვენები მათი ხარისხიანობა. მაგრამ ამ შემთხვევებშიც კი, გაილის ზომა 200 კილობაიტზე მეტი არ უნდა იყოს, წინააღმდეგ შემთხვევაში ვერავინ ვერ დაინახავს ამ უნიკალურობას - მომხმარებლები უბრალოდ სხვა გვერდებზე და საიტებზე გადავლენ, და არ დაელოდებიან ამ უნიკალურობის ჩატვირთვას.
