រូបភាព
រូបភាព គឺជាធាតុសំខាន់មួយក្នុងគេហទំព័រ ដែលធ្វើឲ្យមាតិកាកាន់តែគួរឲ្យចាប់អារម្មណ៍ និងងាយយល់ ។ ដើម្បីបញ្ចូលរូបភាព ត្រូវប្រើ <img> ។ ពាក្យពេញរបស់ img គឺ image ។
បញ្ចូលរូបភាព
src attribute ប្រើសំរាប់កំណត់ URL នៃរូបភាព ។ ពាក្យពេញរបស់ src គឺ source (ប្រភព) ។
សំគាល់: <img> គឺជា Self-closing tag (មិនមាន tag បិទនោះទេ) ។
Attributes សំខាន់ៗនៃ img
1. src Attribute (ទីតាំងរូបភាព)
Attribute នេះចាំបាច់ ត្រូវមានជានិច្ច ។ វាបញ្ជាក់ពីទីតាំងនៃឯកសាររូបភាព ។
2. alt Attribute (អត្ថបទជំនួស)
បញ្ជាក់អត្ថបទពន្យល់អំពីរូបភាព ។ វានឹងបង្ហាញនៅពេលរូបភាពមិនអាចផ្ទុកបាន ហើយជួយដល់ការចូលដំណើរការ (accessibility) និង SEO ។
អត្ថប្រយោជន៍នៃ alt attribute: ជួយអ្នកពិការភ្នែក, ល្អសម្រាប់ SEO, បង្ហាញពេលរូបភាពមិនផ្ទុក
3. width និង height Attributes (ទំហំរូបភាព)
កំណត់ទំហំរូបភាព ។ ខ្នាតរបស់វាត្រូវបានគិតជា pixel ។
ចំណាំ: បើកំណត់តែ width ឬ height ម្យ៉ាង ទំហំមួយទៀតនឹងត្រូវគណនាស្វ័យប្រវត្តិតាមសមាមាត្រដើម ។
4. title Attribute (ចំណងជើង)
បង្ហាញអត្ថបទបន្ថែមនៅពេលដាក់ទ្រនិចលើរូបភាព ។
5. loading Attribute (របៀបផ្ទុក)
កំណត់របៀបផ្ទុករូបភាព ។
loading="lazy"- ផ្ទុកនៅពេលចាំបាច់ (ល្អសម្រាប់ល្បឿន)loading="eager"- ផ្ទុកភ្លាម (លំនាំដើម)
ទម្រង់រូបភាពដែលគាំទ្រ
ទម្រង់រូបភាពដែលគាំទ្រដោយកម្មវិធីរុករកភាគច្រើន ។
| ទម្រង់ | ពណ៌នា | ប្រើសម្រាប់ |
|---|---|---|
.jpg / .jpeg |
រូបថត, រូបភាពពណ៌ច្រើន | រូបថត, ផ្ទៃខាងក្រោយ |
.png |
គាំទ្រភាពថ្លា (transparency) | ឡូហ្គោ, រូបតុបតែង, រូបដែលត្រូវការភាពថ្លា |
.gif |
រូបភាពចល័ត | រូបភាពចល័តធម្មតា |
.svg |
Vector (មិនបាត់គុណភាព) | រូបតុបតែង, រូបតំណាង, រូបដែលត្រូវការធំតូចបាន |
.webp |
ទម្រង់ទំនើប (ទំហំតូច) | គ្រប់ប្រភេទ (សម្រាប់គេហទំព័រទំនើប) |
រូបភាពមានតំណភ្ជាប់
យើងអាចបង្កើតតំណភ្ជាប់ទៅឲ្យរូបភាពបាន ។ មានន័យថា នៅពេលដែលចុចលើរូបភាពនោះ វានាំយើងទៅកាន់ URL ដែលបានកំណត់ ។
ឧទាហរណ៍ជាក់ស្តែង
Responsive Images (រូបភាពឆ្លើយតប)
ធ្វើឲ្យរូបភាពសមស្របទៅនឹងទំហំអេក្រង់ផ្សេងៗគ្នា ។
ប្រើ CSS width
ប្រើ srcset Attribute
ផ្តល់រូបភាពច្រើនទំហំសម្រាប់អេក្រង់ផ្សេងៗគ្នា ។
Figure និង Figcaption
ប្រើសម្រាប់ដាក់ចំណងជើងឲ្យរូបភាព ។
Image Map (ផែនទីរូបភាព)
បង្កើតតំណភ្ជាប់លើផ្នែកផ្សេងៗនៃរូបភាពតែមួយ ។
ការប្រើប្រាស់ល្អបំផុត (Best Practices)
- ប្រើ
altattribute រហូត (សម្រាប់ accessibility និង SEO) - រក្សាទំហំឯកសារឲ្យតូច (បង្រួមរូបភាពមុនពេលប្រើ)
- ប្រើទម្រង់សមស្រប (WebP សម្រាប់គេហទំព័រទំនើប)
- កំណត់
widthនិងheightដើម្បីកុំឲ្យទំព័រលោត - ប្រើ
loading="lazy"សម្រាប់រូបភាពនៅខាងក្រោមទំព័រ - ប្រើឈ្មោះឯកសារមានអត្ថន័យ (product-image.jpg មិនមែន img001.jpg)