រូបភាព

ការដាក់រូបភាព (HTML Images)

រូបភាពអាចជួយកែលម្អការរចនា និងរូបរាងនៃគេហទំព័ររបស់អ្នកអោយមានភាពរស់រវើក និងទាក់ទាញជាងមុនរាប់រយដង។ នៅក្នុង HTML យើងប្រើ Tag <img> ដើម្បីបញ្ចូលរូបភាព។

១. របៀបប្រើប្រាស់ Tag <img> និង src Attribute

Tag <img> គឺជា Empty Element (មានន័យថាវាគ្មាន Tag បិទ </img> ទេ)។ វាទាមទារនូវ Attribute យ៉ាងហោចណាស់មួយគឺ src (Source) ដើម្បីបញ្ជាក់ពីទីតាំង ឬ URL របស់រូបភាព។

២. ការប្រើប្រាស់ alt Attribute (Alternative Text)

alt គឺជាអត្ថបទជំនួស ក្នុងករណីដែលរូបភាពមិនអាចបង្ហាញបាន (ឧទាហរណ៍៖ អ៊ីនធឺណិតដើរយឺត ឬ URL រូបភាពខុស) វានឹងបង្ហាញអក្សរនេះជំនួសវិញ។

ការដាក់ alt គឺចាំបាច់បំផុតសម្រាប់អ្នកអភិវឌ្ឍន៍អាជីព! វាមិនត្រឹមតែជួយនៅពេលរូបភាព Error ប៉ុណ្ណោះទេ តែវាក៏ជួយដល់ជនពិការភ្នែក (Screen Readers នឹងអានអក្សរនេះអោយគាត់ស្តាប់) និងជួយអោយគេហទំព័ររបស់អ្នកជាប់ចំណាត់ថ្នាក់ល្អលើ Google ផងដែរ (Google មិនអាចមើលរូបភាពឃើញទេ វាមើលឃើញតែអក្សរ alt នេះឯង)។

៣. ការកំណត់ទំហំរូបភាព (width និង height)

ជាទូទៅ រូបភាពនឹងបង្ហាញទំហំដើមរបស់វា ដែលអាចធំពេក ឬតូចពេក។ អ្នកអាចកំណត់ប្រវែងទទឹង (width) និងកម្ពស់ (height) បានដោយផ្ទាល់នៅក្នុង Tag។ ខ្នាតរបស់វាគឺគិតជា Pixel (px) ប៉ុន្តែអ្នកមិនចាំបាច់សរសេរអក្សរ px នោះទេ។

៤. ការប្រើប្រាស់ loading="lazy" (បច្ចេកវិទ្យាថ្មី)

ប្រសិនបើគេហទំព័ររបស់អ្នកមានរូបភាពច្រើន (ឧទាហរណ៍ ៥០ រូបភាព) វានឹងធ្វើអោយវិបសាយដើរយឺតណាស់ ព្រោះ Browser ត្រូវទាញយករូបទាំង ៥០ មកម្តងទាំងអស់។

ដើម្បីដោះស្រាយបញ្ហានេះ HTML5 បានបន្ថែម Attribute ថ្មីមួយគឺ loading="lazy"។ វាប្រាប់ Browser ថា "កុំទាន់អាលទាញយករូបភាពនេះអី ចាំទាល់តែអ្នកប្រើប្រាស់អូស (Scroll) មកជិតដល់រូបហ្នឹង សឹមទាញយកមក!"។ នេះជួយអោយវិបសាយដើរលឿនដូចហោះ!