วิธีเพิ่มรูปภาพใน HTML

วิธีเพิ่มรูปภาพใน HTML

HTML (HyperText Markup Language) คือ ภาษามาร์กอัป มาตรฐานที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหา บนเว็บ. หนึ่งในคุณสมบัติทั่วไปและมีประโยชน์ที่สุดในการพัฒนาเว็บคือความสามารถในการเพิ่มรูปภาพ ในบทความนี้เราจะได้เรียนรู้วิธีการ เพิ่มรูปภาพในรูปแบบ HTML เรียบง่ายและมีประสิทธิภาพ

กายวิภาคของแท็กรูปภาพใน HTML

แท็กรูปภาพใน HTML จะแสดงด้วยองค์ประกอบ . แท็กนี้ไม่มีการปิดและใช้เพื่อฝังรูปภาพในหน้าเว็บ นี่คือการแสดง กายวิภาคพื้นฐานของแท็กรูปภาพใน HTML:

"`html

-

- แหล่งที่มา: เป็นแอตทริบิวต์ที่จำเป็นซึ่งระบุเส้นทางหรือ URL ของภาพที่จะแสดง
- alt: เป็นแอตทริบิวต์ที่จำเป็นซึ่งระบุข้อความแสดงแทนสำหรับรูปภาพ ในกรณีที่ไม่สามารถโหลดรูปภาพได้ มันเป็นสิ่งสำคัญสำหรับการเข้าถึงเว็บ
- ความกว้าง: เป็นแอตทริบิวต์เสริมที่กำหนดความกว้างของรูปภาพเป็นพิกเซล
- ความสูง: เป็นแอตทริบิวต์เสริมที่กำหนดความสูงของรูปภาพเป็นพิกเซล

การเพิ่มภาพท้องถิ่น

สำหรับ เพิ่มรูปภาพท้องถิ่นใน HTMLขั้นแรก คุณต้องแน่ใจว่าคุณได้บันทึกรูปภาพไว้ในโฟลเดอร์หรือไดเร็กทอรีเดียวกันกับไฟล์ HTML ที่คุณกำลังทำงานอยู่ จากนั้นคุณสามารถใช้แท็ก และแอตทริบิวต์ src เพื่อระบุเส้นทางสัมพัทธ์ของรูปภาพ

โดยสรุปแล้ว เพิ่มรูปภาพในรูปแบบ HTML เป็นกระบวนการง่ายๆ ที่สามารถปรับปรุงรูปลักษณ์และเนื้อหาของหน้าเว็บได้อย่างมาก เมื่อเชี่ยวชาญการใช้แท็กรูปภาพและคุณลักษณะของแท็กแล้ว คุณจะสามารถปรับแต่งและทำให้เป็นจริงได้ โครงการของคุณ เว็บได้อย่างมีประสิทธิภาพมากขึ้น แสดงความคิดสร้างสรรค์ของคุณโดยผสมผสานภาพที่น่าดึงดูดและเกี่ยวข้อง!

1. องค์ประกอบ HTML พื้นฐานเพื่อเพิ่มรูปภาพ

แท็ก HTML เพื่อเพิ่มรูปภาพ
ในการเพิ่มรูปภาพในรูปแบบ HTML จะใช้แท็กหลักสองแท็ก: y ฉลาก ใช้เพื่อกำหนดรูปภาพเองในขณะที่แท็ก ใช้ในการระบุตำแหน่งของภาพ ภายในฉลาก มีการใช้แอตทริบิวต์ แหล่งที่มา เพื่อระบุที่มาของภาพและคุณลักษณะ อัลท์ เพื่อระบุข้อความแสดงแทนในกรณีที่ไม่สามารถโหลดรูปภาพได้

คุณลักษณะเพิ่มเติมเพื่อปรับปรุงการแสดงภาพ
นอกจากแอตทริบิวต์พื้นฐานแล้ว ยังมีคุณลักษณะเพิ่มเติมที่สามารถใช้เพื่อปรับปรุงการแสดงภาพได้ จากภาพ ในรูปแบบ HTML คุณลักษณะประการหนึ่งคือคุณลักษณะ ความกว้าง, ที่ใช้ เพื่อระบุความกว้างของภาพเป็นพิกเซลหรือเปอร์เซ็นต์ คุณลักษณะที่มีประโยชน์อีกประการหนึ่งคือคุณลักษณะ ความสูงซึ่งใช้ในการระบุความสูงของภาพ คุณยังสามารถใช้แอตทริบิวต์ได้ จัดแนว เพื่อจัดแนวรูปภาพให้สัมพันธ์กับข้อความโดยรอบ และ สไตล์ เพื่อนำสไตล์ที่กำหนดเองไปใช้กับรูปภาพ เช่น ขนาดตัวอักษรหรือสีพื้นหลัง

ข้อควรพิจารณาในการเพิ่มประสิทธิภาพและการเข้าถึง
เมื่อเพิ่มรูปภาพใน HTML สิ่งสำคัญคือต้องพิจารณาการเพิ่มประสิทธิภาพและการเข้าถึง เพื่อปรับภาพให้เหมาะสม แนะนำให้บีบอัดเพื่อลดขนาดไฟล์โดยไม่สูญเสียคุณภาพของภาพมากเกินไป ช่วยให้หน้าเว็บโหลดเร็วขึ้นและปรับปรุงประสบการณ์ผู้ใช้ ในส่วนของการเข้าถึง จำเป็นต้องจัดเตรียมข้อความแสดงแทนที่มีความหมายในแอตทริบิวต์ อัลท์ จากฉลาก . ซึ่งช่วยให้ผู้ที่มีความบกพร่องทางการมองเห็นหรือผู้ที่ใช้โปรแกรมอ่านหน้าจอสามารถเข้าใจเนื้อหาของรูปภาพได้ นอกจากนี้ คุณต้องตรวจสอบให้แน่ใจว่าข้อความแสดงแทนนั้นสื่อความหมายและเกี่ยวข้องกับบริบทของรูปภาพ

2. การรวมฉลาก และคุณสมบัติที่สำคัญ

ฉลาก เป็นหนึ่งใน HTML ที่ใช้มากที่สุดในการแทรกรูปภาพลงในหน้าเว็บ หากต้องการรวมรูปภาพไว้ในโค้ดของเรา เราจำเป็นต้องเพิ่มแท็กนี้และคุณลักษณะที่จำเป็นบางอย่างที่จำเป็นสำหรับการแสดงรูปภาพอย่างถูกต้องในเบราว์เซอร์ คุณลักษณะที่สำคัญที่สุดประการหนึ่งคือ แหล่งที่มาซึ่งระบุเส้นทางหรือ URL ของภาพที่เราต้องการแสดง หากไม่มีแอตทริบิวต์นี้ แท็ก ฉันคงไม่มีภาพมาโชว์

คุณสมบัติที่สำคัญอีกประการหนึ่งคือ อัลท์ซึ่งระบุข้อความแสดงแทนที่จะแสดงหากโหลดรูปภาพไม่สำเร็จหรือหากผู้ใช้ปิดใช้งานการโหลดรูปภาพ สิ่งสำคัญคือต้องใส่ข้อความอธิบายไว้ในแอตทริบิวต์นี้ เนื่องจากช่วยให้ผู้พิการทางสายตาเข้าใจเนื้อหาของรูปภาพได้

นอกจากคุณสมบัติเหล่านี้แล้ว ยังมีคุณสมบัติอื่นๆ เช่น ความกว้าง y ความสูงซึ่งช่วยให้คุณระบุความกว้างและความสูงของภาพเป็นพิกเซล แอ็ตทริบิวต์เหล่านี้เป็นทางเลือก แต่ขอแนะนำให้คุณใช้เพื่อควบคุมขนาดของรูปภาพและป้องกันไม่ให้เกิดการบิดเบี้ยวบนเพจ

กล่าวโดยสรุป หากต้องการเพิ่มรูปภาพใน HTML เราจำเป็นต้องใช้แท็ก และเพิ่มคุณสมบัติที่สำคัญเช่น แหล่งที่มา y อัลท์. เรายังสามารถใช้คุณสมบัติเสริมเช่น ความกว้าง y ความสูง เพื่อควบคุมขนาดภาพ สิ่งสำคัญคือต้องทราบว่าข้อความแสดงแทนในแอตทริบิวต์ อัลท์ จะต้องมีคำอธิบายและเกี่ยวข้องเพื่อให้แน่ใจว่าสามารถเข้าถึงเว็บไซต์ของเราได้

3. การคัดเลือกและจัดทำภาพให้เหมาะสม

ในส่วนนี้ คุณจะได้เรียนรู้วิธีเลือกและเตรียมรูปภาพที่เหมาะสมเพื่อเพิ่มลงในเว็บเพจ HTML ของคุณ สิ่งสำคัญคือต้องเลือกภาพที่เกี่ยวข้องและน่าดึงดูด สำหรับผู้ใช้เนื่องจากจะช่วยดึงดูดความสนใจและปรับปรุงประสบการณ์การท่องเว็บ นอกจากนี้ การเตรียมรูปภาพที่เหมาะสมยังช่วยให้แน่ใจว่ารูปภาพจะปรากฏอย่างถูกต้อง อุปกรณ์ต่างๆ และขนาดหน้าจอ

การเลือกภาพ: ก่อนที่จะเพิ่มรูปภาพลงในหน้าเว็บของคุณ สิ่งสำคัญคือต้องเลือกรูปภาพที่เหมาะกับเนื้อหาและวัตถุประสงค์ของไซต์ของคุณ คุณสามารถใช้ภาพของคุณเองหรือค้นหาธนาคารภาพฟรีหรือมีค่าใช้จ่าย ขอแนะนำให้เลือกรูปภาพคุณภาพสูงด้วยรูปแบบที่รองรับโดยทั่วไป เช่น JPG, PNG หรือ GIF นอกจากนี้ ตรวจสอบให้แน่ใจว่าคุณมีสิทธิ์ที่จำเป็นในการใช้รูปภาพ หากคุณไม่ได้เป็นเจ้าของ

การแก้ไขและการเพิ่มประสิทธิภาพ: เมื่อคุณเลือกรูปภาพแล้ว ก็ถึงเวลาแก้ไขและปรับให้เหมาะสม สำหรับเว็บ. คุณสามารถใช้โปรแกรมแก้ไขรูปภาพ เช่น Photoshop หรือ GIMP เพื่อปรับขนาด ครอบตัดส่วนที่ไม่จำเป็น และปรับปรุงคุณภาพได้ นอกจากนี้ สิ่งสำคัญคือต้องปรับรูปภาพให้เหมาะสมเพื่อลดขนาดและปรับปรุงความเร็วในการโหลดหน้าเว็บของคุณ ใช้เครื่องมือเช่น TinyPNG หรือ JPEGmini เพื่อบีบอัดภาพโดยไม่สูญเสียคุณภาพ

แท็ก Alt และชื่อ: เพื่อปรับปรุงการเข้าถึงและทำให้รูปภาพเข้าใจง่ายขึ้น สิ่งสำคัญคือต้องเพิ่มแท็ก Alt และ Title แท็ก alt ให้ข้อความแสดงแทนที่จะแสดงในกรณีที่รูปภาพโหลดไม่ถูกต้องหรือสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็นโดยใช้โปรแกรมอ่านหน้าจอ ข้อความแท็ก Alt ควรอธิบายเนื้อหาของรูปภาพโดยย่อ แอตทริบิวต์ title ถูกใช้เพื่อให้คำอธิบายเพิ่มเติมของรูปภาพเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ

จดจำ: การเลือกรูปภาพที่เกี่ยวข้องและน่าดึงดูด การแก้ไขและเพิ่มประสิทธิภาพอย่างเหมาะสม รวมถึงการเพิ่มแท็ก Alt และ Title ถือเป็นสิ่งสำคัญสำหรับหน้าเว็บที่น่าดึงดูดและเข้าถึงได้ ทำตามขั้นตอนเหล่านี้เพื่อเพิ่มรูปภาพ อย่างมีประสิทธิภาพ บนไซต์ของคุณและปรับปรุงประสบการณ์ผู้ใช้

4. การใช้คุณสมบัติ alt เพื่อปรับปรุงการเข้าถึงและ SEO

คุณสมบัติ alt ใน HTML มีความสำคัญทั้งเพื่อปรับปรุงการเข้าถึง จากเว็บไซต์หนึ่ง เว็บไซต์เพื่อเพิ่มประสิทธิภาพ SEO ของคุณ แท็ก alt ใช้เพื่อจัดเตรียมข้อความแสดงแทนสำหรับรูปภาพเมื่อไม่สามารถแสดงได้หรือเมื่ออ่านออกเสียงเนื้อหาของหน้า สิ่งสำคัญคือต้องรวมคุณสมบัตินี้ไว้ในรูปภาพทั้งหมด เนื่องจากจะช่วยให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นสามารถเข้าใจเนื้อหาภาพผ่านโปรแกรมอ่านหน้าจอหรือ อุปกรณ์อื่นๆ ความช่วยเหลือ.

เมื่อเพิ่มข้อความแสดงแทนในคุณสมบัติ Alt สิ่งสำคัญคือต้องแน่ใจว่าได้อธิบายสิ่งที่แสดงในรูปภาพอย่างเพียงพอ ควรสื่อความหมายและกระชับ โดยสื่อข้อมูลสำคัญของภาพ นอกจากนี้ ขอแนะนำให้ใช้คำสำคัญที่เกี่ยวข้องกับหัวข้อของหน้าเพื่อปรับปรุง SEO ซึ่งจะช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหารูปภาพและจัดอันดับเว็บไซต์ได้ดีขึ้นในผลการค้นหา

นอกเหนือจากการปรับปรุงการเข้าถึงและ SEO แล้ว การใช้คุณสมบัติ alt อย่างเหมาะสมยังมีประโยชน์ต่อผู้ใช้ที่มีการเชื่อมต่อที่ช้าหรือจำกัดอีกด้วย เมื่อไม่สามารถแสดงรูปภาพได้เนื่องจากปัญหาในการโหลด ข้อความแสดงแทนที่ให้ไว้ในคุณสมบัติ alt จะช่วยให้ผู้ใช้เข้าใจเนื้อหาของรูปภาพโดยไม่ต้องรอให้โหลด สิ่งนี้จะช่วยปรับปรุงประสบการณ์ผู้ใช้และหลีกเลี่ยงความคับข้องใจที่อาจเกิดขึ้น

กล่าวโดยสรุป การใช้คุณสมบัติ alt ถือเป็นสิ่งสำคัญในการปรับปรุงการเข้าถึงและ SEO ของเว็บไซต์ การใส่ข้อความแสดงแทนที่สื่อความหมายและเกี่ยวข้องสำหรับแต่ละภาพจะช่วยให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นเข้าใจเนื้อหาภาพ และช่วยให้เครื่องมือค้นหาจัดทำดัชนีเว็บไซต์ได้ดีขึ้น นอกจากนี้ยังจะเป็นประโยชน์ต่อผู้ใช้ที่มีการเชื่อมต่อที่ช้าหรือจำกัด โดยอนุญาตให้พวกเขาเข้าใจเนื้อหาภาพโดยไม่ต้องรอให้รูปภาพโหลด อย่าลืมใส่คุณสมบัติ alt ไว้ในรูปภาพทั้งหมดของคุณเสมอ เพื่อปรับปรุงประสบการณ์ผู้ใช้ และเพิ่มการมองเห็นเว็บไซต์ของคุณในเครื่องมือค้นหา

5. การปรับขนาดและตำแหน่งของภาพ

การปรับขนาดและตำแหน่งของรูปภาพใน HTML ถือเป็นสิ่งสำคัญเพื่อให้ได้การออกแบบที่น่าดึงดูดและสมดุลบนหน้าเว็บ เพื่อให้บรรลุเป้าหมายนี้ มีตัวเลือกมากมายที่ให้คุณปรับแต่งและปรับแต่งรูปภาพได้ตามความต้องการของโปรเจ็กต์ เทคนิคหลักในการปรับเปลี่ยนจะมีรายละเอียดด้านล่าง

การปรับขนาด: หากต้องการปรับขนาดรูปภาพ คุณสามารถใช้แอตทริบิวต์ "width" และ "height" ในแท็กได้ . คุณลักษณะเหล่านี้ช่วยให้คุณระบุความกว้างและความสูงของรูปภาพเป็นพิกเซลได้ ตัวอย่างเช่น, . นอกจากนี้ คุณยังสามารถใช้แอตทริบิวต์ "style" เพื่อกำหนดขนาดเป็นเปอร์เซ็นต์หรือเป็นหน่วยสัมพันธ์ (% หรือ em) ตัวอย่างเช่น, .

การปรับตำแหน่ง: หากต้องการแก้ไขตำแหน่งของภาพที่สัมพันธ์กับคอนเทนเนอร์ สามารถใช้แอตทริบิวต์ "style" ร่วมกับคุณสมบัติ "float" ได้ ตัวอย่างเช่น, . ซึ่งจะทำให้รูปภาพจัดชิดทางด้านซ้ายของคอนเทนเนอร์ คุณยังสามารถใช้คุณสมบัติ "margin" เพื่อปรับระยะขอบหรือช่องว่างรอบๆ รูปภาพได้ ตัวอย่างเช่น, .

การปรับตำแหน่ง: หากต้องการจัดแนวรูปภาพในแนวนอนภายในคอนเทนเนอร์ คุณสามารถใช้คุณสมบัติ CSS "text-align" บนคอนเทนเนอร์ได้ ตัวอย่างเช่น หากคุณต้องการจัดแนวรูปภาพให้อยู่ตรงกลาง คุณสามารถใช้ "text-align: center;" ไปที่คอนเทนเนอร์ นอกจากนี้ คุณยังสามารถใช้คุณสมบัติ "จัดแนวแนวตั้ง" เพื่อจัดแนวรูปภาพในแนวตั้งภายในข้อความได้ ตัวอย่างเช่น, . เทคนิคเหล่านี้ช่วยให้คุณสามารถปรับขนาดและตำแหน่งของรูปภาพบนหน้าเว็บได้อย่างเหมาะสม ปรับปรุงประสบการณ์การมองเห็นของผู้ใช้

6. การเพิ่มประสิทธิภาพและการจัดรูปแบบภาพเพื่อปรับปรุงความเร็วในการโหลด

เมื่อปรับภาพให้เหมาะสมเพื่อปรับปรุงความเร็วในการโหลดของเว็บไซต์ สิ่งสำคัญคือต้องพิจารณารูปแบบและขนาดของภาพ เมื่อเลือกรูปแบบภาพ ขอแนะนำให้ใช้รูปแบบ เช่น JPEG หรือ PNG เนื่องจากเป็นรูปแบบที่ใช้กันทั่วไปและรองรับโดยเบราว์เซอร์ส่วนใหญ่ นอกจากนี้ รูปแบบเหล่านี้ยังช่วยให้สามารถบีบอัดรูปภาพได้โดยไม่สูญเสียคุณภาพของภาพมากเกินไป

การบีบอัดภาพเป็นสิ่งสำคัญ เพื่อลดขนาดไฟล์และปรับปรุงความเร็วในการโหลด มีเครื่องมือออนไลน์และซอฟต์แวร์พิเศษมากมายที่สามารถช่วยได้ เช่น Photoshop, TinyPNG หรือ JPEG Optimizer เครื่องมือเหล่านี้ช่วยให้คุณปรับคุณภาพของภาพ ลดความละเอียด และขจัดข้อมูลเมตาที่ไม่จำเป็น โปรดจำไว้ว่าขนาดรูปภาพจะต้องเหมาะสมสำหรับการใช้งานบนเว็บไซต์ หลีกเลี่ยงการใช้รูปภาพที่มีขนาดใหญ่เกินไปเนื่องจากจะทำให้การโหลดหน้าเว็บช้าลง

นอกเหนือจากการบีบอัดแล้ว สิ่งสำคัญอีกประการหนึ่งคือขนาดของภาพเป็นพิกเซล. ขอแนะนำให้ปรับขนาดรูปภาพโดยตรงใน HTML โดยใช้แอตทริบิวต์เช่น "ความกว้าง" และ "ความสูง" ซึ่งช่วยให้เบราว์เซอร์สามารถจองพื้นที่เพียงพอสำหรับรูปภาพ ป้องกันไม่ให้เลย์เอาต์ยุบในขณะที่โหลดเพจ นอกจากนี้ การใช้เครื่องมือ เช่น "srcset" เพื่อระบุเวอร์ชันต่างๆ ของรูปภาพสำหรับขนาดหน้าจอและความละเอียดที่แตกต่างกันยังมีประโยชน์อีกด้วย

โดยสรุป เพื่อปรับปรุงความเร็วในการโหลดหน้าเว็บ จำเป็นต้องปรับให้เหมาะสมและจัดรูปแบบรูปภาพให้เหมาะสม ซึ่งเกี่ยวข้องกับการเลือกรูปแบบที่ถูกต้อง การบีบอัดภาพโดยไม่สูญเสียคุณภาพ และการปรับขนาดพิกเซลเพื่อให้มั่นใจถึงประสิทธิภาพสูงสุด กำลังติดตาม เคล็ดลับเหล่านี้คุณจะสามารถปรับปรุงประสบการณ์ผู้ใช้และตำแหน่งของเว็บไซต์ของคุณในเครื่องมือค้นหาได้

7. การเพิ่มคำอธิบายหรือชื่อเรื่องให้กับภาพ

วิธีเพิ่มคำอธิบายหรือชื่อเรื่องให้กับรูปภาพในรูปแบบ HTML

เมื่อเราเพิ่มรูปภาพลงในหน้าเว็บของเรา สิ่งสำคัญคือต้องระบุคำอธิบายหรือชื่อเพื่อปรับปรุงการเข้าถึงและประสบการณ์ผู้ใช้ ใน HTML เรามีวิธีที่แตกต่างกันในการบรรลุเป้าหมายนี้ ด้านล่างนี้ฉันจะอธิบายวิธีการยอดนิยมสามวิธีในการเพิ่มคำอธิบายหรือชื่อให้กับภาพของคุณ

1. แอตทริบิวต์ “alt” ในป้ายกำกับ : วิธีทั่วไปในการเพิ่มคำอธิบาย ให้เป็นรูปภาพในรูปแบบ HTML คือการใช้แอตทริบิวต์ "alt" ในแท็ก . คุณลักษณะนี้ใช้เพื่อจัดเตรียมข้อความทางเลือกที่จะแสดงหากรูปภาพโหลดไม่ถูกต้อง นอกจากนี้ เสิร์ชเอ็นจิ้นและผู้ช่วยในการอ่านยังใช้คำอธิบายนี้เพื่อทำความเข้าใจเนื้อหาของรูปภาพ ข้อความควรสั้นและชัดเจน โดยจับส่วนที่สำคัญที่สุดของภาพ

2. คุณลักษณะ «ชื่อ» บนฉลาก : อีกวิธีในการเพิ่มคำอธิบายหรือชื่อเรื่องให้กับรูปภาพคือการใช้แอตทริบิวต์ "title" ในแท็ก . คุณลักษณะนี้ใช้เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับรูปภาพเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ คุณสามารถใช้สิ่งนี้เพื่อเสนอรายละเอียดเพิ่มเติมเกี่ยวกับรูปภาพหรือให้บริบทเฉพาะแก่รูปภาพได้

3. ป้ายกำกับ

y