เราหวังว่าบทความนี้จะเป็นประโยชน์กับคุณ มีความสุขในการอ่าน!

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

แต่คุณไม่ควรมีส่วนร่วมหากคุณไม่ได้ใช้ Instagram หรือร้านค้าออนไลน์ ขอแนะนำว่ารูปภาพ:

• เป็นข้อมูล
• เข้ากับโทนสีของเว็บไซต์ของคุณ
• มีความเหมาะสม

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

สำหรับผู้ที่ไม่ชอบจ่ายเงินมากเกินไปเราได้เตรียมไว้ท้ายบทความแล้ว โบนัส- รายชื่อธนาคารภาพถ่ายหลายแห่งที่คุณสามารถดาวน์โหลดวัสดุสวยงามคุณภาพสูงจำนวนมากได้ฟรี :)

รูปแบบภาพ

รูปภาพที่ใช้บนเวิลด์ไวด์เว็บส่วนใหญ่มี 3 ประเภท:

กิ๊ฟ(รูปแบบการแลกเปลี่ยนกราฟิก - รูปแบบการแลกเปลี่ยนภาพ)

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

เจเพ็กอาคา JPG(กลุ่มผู้เชี่ยวชาญด้านการถ่ายภาพร่วม - กลุ่มผู้เชี่ยวชาญด้านการถ่ายภาพร่วม -ซึ่งเป็นชื่อองค์กรพัฒนา)

เหมาะสำหรับการสร้างภาพสีคุณภาพสูง ภาพถ่าย- ขนาดของรูปภาพดังกล่าวมีขนาดใหญ่ ดังนั้นจึงมักจะทำให้เซิร์ฟเวอร์มีภาระงานมาก หากคุณต้องการบีบอัด jpeg (สำหรับภาพที่มีน้ำหนักน้อยกว่า) เราขอแนะนำให้ใช้ขนาดของภาพสุดท้าย หลายเท่าของแปด ดังนั้นการสูญเสียคุณภาพจึงเกิดขึ้นน้อยที่สุด

PNG(กราฟิกเครือข่ายพกพา - กราฟิกเครือข่ายแบบพกพา- ออกเสียงแบบเดียวกับ ปิง คือ -

รูปแบบนี้เดิมได้รับการพัฒนาสำหรับเว็บ เช่น รูปภาพมักจะมีน้ำหนักเพียงเล็กน้อยและไม่ทำให้หน้าเว็บช้าลงเมื่อโหลด รูปแบบนี้ถูกสร้างขึ้นเพื่อแทนที่ GIF ที่ล้าสมัย แต่ไม่รองรับภาพเคลื่อนไหว PNG-8เช่น gif ใช้เพียง 256 สีเท่านั้น รูปแบบ png-24รองรับ 16 ล้านสี แม้จะค่อนข้างหนักอยู่แล้วก็ตาม PNG-32มีจำนวนสีเท่ากับ png-24 และยังช่วยให้คุณได้ภาพอีกด้วย มีพื้นหลังโปร่งใส และคุณสามารถปรับระดับความโปร่งใสได้ เมื่อลดขนาด PNG คุณภาพสีจะไม่ลดลง

มาสรุปกัน

กิ๊ฟ- สำหรับแอนิเมชั่น

เจเพ็ก- สำหรับรูปถ่าย

PNG- สำหรับไอคอน ปุ่ม พื้นหลัง โลโก้ ภาพหน้าจอ ภาพวาด ข้อความ ภาพถ่ายที่มีพื้นหลังโปร่งใส

การแทรกรูปภาพลงในไฟล์ html

หากต้องการเพิ่มรูปภาพลงในเพจ ให้ใช้ แท็ก (จากภาพภาษาอังกฤษ - รูปภาพ, รูปภาพ)นี่เป็นแท็กเดียวและไม่จำเป็นต้องมีแท็กปิด แท็กนี้มีแอตทริบิวต์อยู่ภายใน

คุณลักษณะ src(จากแหล่งที่มาภาษาอังกฤษ - แหล่งที่มา) ระบุเส้นทางไปยังไฟล์ (ตำแหน่งที่ภาพตั้งอยู่) หากรูปภาพอยู่ในคอมพิวเตอร์ของคุณ (ไซต์ยังอยู่ระหว่างการพัฒนา) หรือบนเซิร์ฟเวอร์ของคุณ ให้ใช้ลิงก์ที่เกี่ยวข้อง หากรูปภาพมาจากเครือข่าย จำเป็นต้องมีลิงก์แบบสัมบูรณ์ อ่านวิธีดำเนินการในบทความ "ลิงก์"

ดังนั้น ในการเชื่อมต่อรูปภาพเข้ากับหน้าเว็บของคุณ คุณต้องเขียนโค้ดดังนี้:

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

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

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

ความสูงและความกว้างของภาพ

คุณยังสามารถตั้งค่าความสูงและความกว้างของรูปภาพได้หากรูปภาพต้นฉบับเป็นเช่น มากกว่าที่คุณต้องการ

ใน HTML5 ขอแนะนำให้ทำเช่นนี้โดยใช้ CSS หรือ คุณลักษณะสไตล์ , แบบนี้:

ในตัวอย่างนี้ เราใช้ความกว้าง 30% ไม่ใช่ของภาพต้นฉบับ แต่เป็นขนาดหน้าต่างเบราว์เซอร์ เมื่อความกว้าง = 100% รูปภาพจะเปิดเต็มความกว้างของเบราว์เซอร์ จำคุณลักษณะนี้ไว้ เปอร์เซ็นต์เป็นหน่วยวัด

อย่างไรก็ตาม ถ้าเราเขียนเฉพาะความกว้าง ผลลัพธ์ก็จะเหมือนเดิม ลอง:

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

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

ลองรันโค้ดนี้แล้วดูผลลัพธ์:

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

ลูกเหม็นนิดหน่อย

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

หน้าต่างนี้มี 3 แท็บ: แท็บแรกที่คุณเห็นโค้ด html, โค้ด CSS ที่สอง, และแท็บสุดท้าย - เช่นเคย - ผลลัพธ์ วิธีนี้ทำงานเหมือนกับว่าแท็บแรกเป็นไฟล์ index.html แท็บที่สองเป็นไฟล์ style.css และแท็บที่สามเป็นเบราว์เซอร์ ตอนนี้ CSS ของเราบอกว่าองค์ประกอบทั้งหมดที่มีแท็ก img มีความกว้าง 100% ขนาดเริ่มต้นของแอตทริบิวต์ความกว้างและความสูงจะเป็นพิกเซล ดังนั้นจึงไม่จำเป็นต้องเพิ่มหน่วยใดๆ ที่นี่

ผลลัพธ์ความแตกต่างชัดเจน :)

นอกจากนี้ใน html เวอร์ชันเก่ายังมีการใช้คุณลักษณะต่อไปนี้:

จัดตำแหน่งซึ่งใช้ในการจัดแนวภาพในแนวนอนหรือแนวตั้ง

เฮสเปซ- การเยื้องด้านซ้ายและขวาของภาพไปยังเนื้อหาโดยรอบ (เช่น ข้อความหรือรูปภาพที่อยู่ติดกัน)

วีสเปซ- การเยื้องด้านบนและด้านล่างจากรูปภาพไปยังเนื้อหาที่อยู่รอบๆ

ชายแดน- กำหนดความหนาของกรอบรอบภาพ (โดยค่าเริ่มต้นจะเป็นศูนย์)

ทุกวันนี้ การจัดการทั้งหมดนี้ (และอีกมากมาย) ทำได้โดยใช้ CSS ดังนั้นเราจึงตัดสินใจที่จะไม่รบกวนคุณที่นี่ หากคุณยังคงสนใจวิธีทำงานกับคุณลักษณะเหล่านี้ เขียนความคิดเห็น เราจะเพิ่มรายการนี้ :)

การใส่รูปภาพในโค้ด

จากที่เราวางแท็กของเรา ขึ้นอยู่กับว่าจะแสดงอย่างไรในเบราว์เซอร์

ตัวอย่างที่ 1 - หน้าย่อหน้า:

องค์ประกอบต่างๆ เช่น

และ

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

ตัวอย่างที่ 2 - ที่จุดเริ่มต้นของย่อหน้า

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

คำบรรยายสำหรับภาพประกอบ

หากต้องการทำเครื่องหมายหรือเซ็นชื่อภาพถ่ายบนเพจ ให้ใช้ แท็ก