ยินดีต้อนรับสู่ "เรียนรู้รูปภาพ"

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

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

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

สิ่งที่คุณจะได้เรียนรู้มีดังนี้

ประวัติโดยย่อของรูปภาพบนเว็บ

ประวัติของรูปภาพบนเว็บ โดยเริ่มจากองค์ประกอบรูปภาพในปี 1993

ปัญหาหลักด้านประสิทธิภาพ

เรียนรู้วิธีทำให้คำขอรูปภาพมีขนาดเล็กและมีประสิทธิภาพที่สุดเท่าที่จะเป็นไปได้

ภาพเวกเตอร์

เรียนรู้เกี่ยวกับ SVG ซึ่งเป็นรูปแบบรูปภาพเวกเตอร์ที่ใช้บนเว็บ

รูปภาพแรสเตอร์

สำรวจรูปภาพแรสเตอร์ เช่น JPEG, GIF, PNG และ WebP

รูปแบบรูปภาพ: GIF

ทำความเข้าใจรูปแบบของรูปภาพ GIF รวมถึงคำอธิบายวิธีการทำงานของการเข้ารหัสรูปภาพ

รูปแบบรูปภาพ: PNG

หาคำตอบว่าควรเลือก PNG เป็นรูปแบบรูปภาพที่ดีที่สุดเมื่อใด

รูปแบบรูปภาพ: JPEG

ดูข้อมูลเกี่ยวกับรูปแบบรูปภาพที่ใช้กันมากที่สุดบนเว็บ

รูปแบบรูปภาพ: WebP

ดูข้อมูลเกี่ยวกับ WebP และทำความเข้าใจความแตกต่างระหว่างรูปแบบนี้กับรูปแบบอื่นๆ

รูปแบบรูปภาพ: AVIF

AV1 Image File Format (AVIF) คือการเข้ารหัสตามตัวแปลงรหัสวิดีโอ AV1 แบบโอเพนซอร์ส

รูปภาพที่ตอบสนองตามอุปกรณ์

เจาะลึกเกี่ยวกับรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์

ไวยากรณ์ที่สื่อความหมาย

การใช้ srcset และขนาดเพื่อให้ข้อมูลเกี่ยวกับแหล่งที่มาของรูปภาพและวิธีการใช้งานแหล่งที่มารูปภาพแก่เบราว์เซอร์

ไวยากรณ์ที่ต้องสั่งโดยแพทย์

ค้นหาเกี่ยวกับองค์ประกอบรูปภาพ

การบีบอัดและการเข้ารหัสอัตโนมัติ

ทำให้การสร้างแหล่งที่มาของรูปภาพที่มีประสิทธิภาพสูงเป็นส่วนหนึ่งของกระบวนการพัฒนาที่ราบรื่น

เครื่องมือสร้างเว็บไซต์ เฟรมเวิร์ก และ CMS

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

เครือข่ายนำส่งข้อมูลรูปภาพ

เรียนรู้ว่า CDN รูปภาพมีความสามารถในการเปลี่ยนรูปแบบและเพิ่มประสิทธิภาพเนื้อหาของรูปภาพอย่างไร

สรุป

แหล่งข้อมูลเพิ่มเติม

แล้วคุณพร้อมจะเรียนรู้เกี่ยวกับรูปภาพหรือยัง