แทรกรูปภาพด้วย HTML - ทำงานอย่างไร
หากคุณต้องการแทรกภาพบนเว็บไซต์ด้วย HTML ให้ใช้แท็ก img อ่านที่นี่ว่าทำงานได้อย่างไรและสิ่งที่คุณต้องระวัง
วิธีแทรกรูปภาพด้วย HTML - พื้นฐาน
- ด้วยวันที่
สามารถแทรกรูปภาพ - แหล่งที่มาของภาพได้รับภายในแท็ก:
แทรกไฟล์ "testbild.webp" จากโฟลเดอร์ย่อย "รูปภาพ" บนเว็บไซต์ - แหล่งภายนอกผ่าน URL ก็เป็นไปได้เช่นกัน:
รวมโลโก้ CHIP จากเซิร์ฟเวอร์ของเรา
คุณลักษณะ HTML สำหรับภาพที่ฝัง
สามารถเพิ่มแอตทริบิวต์ต่าง ๆ ได้ภายในแท็ก img:
- ใช้ "ความกว้าง" และ "ความสูง" เพื่อกำหนดขนาดของภาพบนเว็บไซต์: ภาพ
จะแสดงสี่เหลี่ยมจัตุรัสที่มีความยาวด้านข้าง 100 พิกเซล - ด้วย "alt" คุณกำหนดข้อความสำรองที่จะปรากฏขึ้นหากไม่สามารถโหลดรูปภาพที่เกี่ยวข้องได้ คุณควรตั้งค่าคุณลักษณะนี้ทุกครั้งเมื่อแทรกรูปภาพด้วย HTML
- แอตทริบิวต์ "เส้นขอบ" ระบุความหนาของเฟรมเป็นพิกเซล รูปภาพด้วย
มีเฟรมที่ค่อนข้างหนามีห้าพิกเซล - ใช้ "จัดตำแหน่ง" เพื่อจัดแนวกราฟิก ค่าสำหรับแอตทริบิวต์นี้คือ "ด้านล่าง", "ด้านบน", "กลาง", "ซ้าย", "ขวา" และ "กึ่งกลาง"
- ด้วย "hspace" และ "vspace" คุณสามารถ (แนวนอนและแนวตั้ง) ตั้งระยะห่างจากภาพได้
ฉันควรใช้รูปแบบใด
มีรูปแบบภาพต่าง ๆ ที่คุณสามารถรวมไว้ในรหัส HTML
- JPG: รูปภาพรูปแบบ JPG มักใช้กับหน้าเว็บเป็นส่วนใหญ่ รูปแบบนี้แสดงถึง 16.7 ล้านสีนอกจากนี้ JPG สามารถบีบอัดได้ดีมาก ไฟล์รูปภาพจึงสามารถมีขนาดเล็กมากซึ่งทำให้สามารถโหลดได้อย่างรวดเร็ว
- PNG: รูปแบบ PNG สามารถแสดงสีได้ 16.7 ล้านสีและสามารถบีบอัดได้ ข้อดีของรูปแบบ JPG คือการบีบอัดข้อมูลทำได้โดยไม่มีการสูญเสีย
- พื้นที่ที่กำหนดในรูปแบบ PNG สามารถแสดงได้อย่างโปร่งใส อย่างไรก็ตามเบราว์เซอร์ที่เก่ามากมีปัญหาในการแสดงแผ่นใส
- GIF: หากคุณต้องการแทรกภาพเคลื่อนไหวด้วย HTML รูปแบบ GIF นั้นเหมาะสม มีเพียง 256 สีที่แสดงในรูปแบบนี้และการบีบอัดจะเกิดขึ้นโดยอัตโนมัติ
- รูปแบบ GIF เหมาะสมที่สุดสำหรับกราฟิกขนาดเล็กภาพเคลื่อนไหวหรือโลโก้ เพื่อให้แน่ใจว่าโลโก้นั้นกลมกลืนกันในหน้าเดียวสามารถใช้แผ่นใสในรูปแบบ GIF เช่น PNG
ตัวอย่างเช่น HTML
- สิ่งนี้รวมโลโก้ CHIP จากเว็บไซต์ของเรา
- มันจะแสดงด้วยความสูง 100 พิกเซลและกว้าง 200 พิกเซล
- หากไม่สามารถโหลดได้ "CHIP-Logo" จะปรากฏเป็นข้อความว่างเปล่า
- ภาพถูกล้อมกรอบด้วยสองพิกเซล
- มันจัดชิดขวาและ 50 พิกเซลนอกเหนือจากองค์ประกอบด้านอื่น ๆ