เครื่องมือสร้างรูปภาพ Responsive สร้าง srcset
ปรับขนาดรูปภาพเป็นเบรกพอยต์หลายความกว้างในคราวเดียวผ่านเบราว์เซอร์ของคุณ
รองรับการบันทึกไฟล์ ZIP และสร้างโค้ด HTML
รูปภาพจะถูกประมวลผลอย่างปลอดภัยในเบราว์เซอร์ของคุณและจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ใดๆ
คลิกหรือลากและวางรูปภาพที่นี่
รองรับ JPEG / PNG / WebP
⚙️ การตั้งค่า
📋 โค้ดที่สร้างขึ้น
🖼️ ดูตัวอย่างและบันทึก
เกี่ยวกับเครื่องมือสร้างรูปภาพ Responsive
เครื่องมือสร้างรูปภาพ Responsive เป็นยูทิลิตี้ที่สร้างรูปภาพหลายขนาดที่ปรับให้สอดคล้องกับเบรกพอยต์ (ความกว้างหน้าจอ) ต่างๆ อัตโนมัติจากไฟล์รูปภาพเดียว
ด้วยการส่งมอบรูปภาพที่มีขนาดเหมาะสมที่สุดสำหรับอุปกรณ์ต่างๆ เช่น สมาร์ทโฟน แท็บเล็ต และคอมพิวเตอร์เดสก์ท็อป คุณสามารถปรับปรุงความเร็วในการโหลดเว็บไซต์และคะแนน Core Web Vitals ของคุณได้อย่างมาก
เนื่องจากการประมวลผลรูปภาพทั้งหมดเสร็จสมบูรณ์ในเบราว์เซอร์ของคุณ คุณจึงสามารถใช้งานได้อย่างปลอดภัยแม้กับรูปภาพที่มีความลับสูง
วิธีใช้งาน
เลือกรูปภาพ
โหลดรูปภาพที่คุณต้องการประมวลผล (JPEG, PNG, WebP) โดยการลากและวางหรือเลือกรูปภาพ รูปภาพของคุณจะไม่ถูกส่งไปยังเซิร์ฟเวอร์เพื่อปกป้องความเป็นส่วนตัว
ตั้งค่าเบรกพอยต์และรูปแบบ
เลือกความกว้างเป้าหมายที่ต้องการส่งออก (เช่น 320px, 640px, 1024px) และปรับรูปแบบผลลัพธ์ (แนะนำเป็น WebP) รวมถึงคุณภาพ
คัดลอกโค้ดและบันทึกรูปภาพ
คัดลอกโค้ด HTML ที่สร้างขึ้นอัตโนมัติซึ่งมีแอตทริบิวต์ srcset หรือแท็ก picture และบันทึกรูปภาพที่ปรับขนาดทั้งหมดพร้อมกันเป็นไฟล์ ZIP
คำศัพท์รูปภาพ Responsive
- รูปภาพ Responsive (Responsive Images)
- เทคนิคการนำเสนอข้อมูลรูปภาพที่เหมาะสมและปรับตามขนาดและความละเอียดหน้าจอของอุปกรณ์ผู้ใช้ มีความจำเป็นในการปรับปรุงความเร็วในการโหลดหน้าเว็บ
- แอตทริบิวต์ srcset
- แอตทริบิวต์ที่เพิ่มลงในแท็ก HTML
<img>เพื่อให้เบราว์เซอร์มีรายการไฟล์รูปภาพทางเลือกและขนาดของรูปภาพ - แอตทริบิวต์ sizes
- แอตทริบิวต์ที่ใช้เพื่อบอกเบราว์เซอร์ว่ารูปภาพจะแสดงบนหน้าจอกว้างเท่าใดเมื่อเทียบกับความกว้างของวิวพอร์ต
- อิลิเมนต์ picture
- แท็ก HTML ที่มีแท็กลูก
<source>และ<img>ช่วยให้นักพัฒนาสามารถให้บริการรูปภาพที่แตกต่างกัน ไม่เพียงแต่ตามขนาดหน้าจอ แต่ยังขึ้นอยู่กับการรองรับรูปแบบไฟล์ (เช่น WebP) อีกด้วย - WebP
- รูปแบบรูปภาพที่พัฒนาโดย Google ซึ่งช่วยลดขนาดไฟล์ได้อย่างมากเมื่อเทียบกับรูปแบบ JPEG หรือ PNG ทั่วไป แนะนำให้ใช้อย่างยิ่งในฐานะมาตรฐานเว็บสมัยใหม่
- เบรกพอยต์ (Breakpoint)
- ในการออกแบบเว็บไซต์ คือความกว้างของหน้าจอที่กำหนด (เป็นพิกเซล) ซึ่งเลย์เอาต์หรือรูปภาพที่แสดงผลจะเปลี่ยนแปลงให้เหมาะสมกับขนาดของอุปกรณ์
- ความหนาแน่นพิกเซล (DPR)
- อัตราส่วนระหว่างพิกเซลจริงบนหน้าจอต่อพิกเซล CSS (เช่น หน้าจอ Retina คือ 2x) จำเป็นต้องมีรูปภาพที่มีความละเอียดสูงขึ้นเพื่อรองรับหน้าจอเหล่านี้โดยไม่ทำให้ภาพเบลอ
- โหลดแบบ Lazy (Lazy Loading)
- เทคนิคที่หน่วงเวลาการโหลดรูปภาพจนกว่าจะใกล้ปรากฏบนหน้าจอ ใช้งานได้ง่ายๆ ด้วยการเพิ่มแอตทริบิวต์
loading="lazy"ซึ่งจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บเริ่มต้น - อัตราส่วนภาพ (Aspect Ratio)
- ความสัมพันธ์สัดส่วนระหว่างความกว้างและความสูงของรูปภาพ แนะนำให้ระบุแอตทริบิวต์
widthและheightใน HTML ตามอัตราส่วนดั้งเดิมเพื่อป้องกันการขยับของเลย์เอาต์ (layout shifts) - Core Web Vitals
- ตัวชี้วัดสำคัญที่ได้รับการสนับสนุนโดย Google เพื่อมอบประสบการณ์การใช้งานที่ยอดเยี่ยม การนำเสนอรูปภาพที่มีขนาดเหมาะสมจะปรับปรุงคะแนน LCP (Largest Contentful Paint) ได้อย่างมาก
คำถามที่พบบ่อย
- ถาม:ฉันควรเลือกเบรกพอยต์ (breakpoints) อย่างไร?
- เราขอแนะนำให้ตั้งค่าความกว้างตามขนาดอุปกรณ์ทั่วไป: สมาร์ทโฟน (320px-480px), แท็บเล็ต (768px), แล็ปท็อป (1024px) และเดสก์ท็อป (1280px+) ค่าเริ่มต้นจาก CSS frameworks หลักก็เป็นจุดเริ่มต้นที่ดีเช่นกัน
- ถาม:รูปภาพที่สร้างขึ้นจะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่เลย ตั้งแต่การโหลดรูปภาพ การปรับขนาด ไปจนถึงการสร้างไฟล์ ZIP การประมวลผลทั้งหมดจะเสร็จสิ้นภายในเบราว์เซอร์ของคุณ (สภาพแวดล้อมภายในเครื่อง) เท่านั้น จึงมีความปลอดภัยสูง
- ถาม:ฉันควรเลือกรูปแบบรูปภาพใด?
- โดยทั่วไปเราแนะนำ "WebP" เนื่องจากมีขนาดไฟล์เล็กกว่าและมีคุณภาพดีกว่า หากคุณจำเป็นต้องรองรับเบราว์เซอร์เก่าจริงๆ ให้เลือก JPEG หรือ PNG
- ถาม:ฉันควรใช้ img+srcset หรืออิลิเมนต์ picture?
- หากคุณต้องการเพียงแค่แสดงขนาดที่แตกต่างกันตามความกว้างของหน้าจอ "img+srcset" นั้นเรียบง่ายและเหมาะสมที่สุด ใช้อิลิเมนต์ "picture" หากคุณต้องการ fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ WebP หรือหากคุณต้องการเปลี่ยนอัตราส่วนภาพหรือการจัดองค์ประกอบภาพตามความกว้างของหน้าจอ (Art Direction)
- ถาม:จะเกิดอะไรขึ้นหากฉันระบุเบรกพอยต์ที่ใหญ่กว่าขนาดรูปภาพต้นฉบับ?
- การขยายรูปภาพให้ใหญ่กว่าขนาดดั้งเดิมจะทำให้คุณภาพลดลง (ทำให้ภาพเบลอ) ดังนั้นเครื่องมือนี้จะตัดเบรกพอยต์ที่ใหญ่กว่ารูปภาพต้นฉบับออกโดยอัตโนมัติ หรือส่งออกตามขนาดต้นฉบับ
กรณีการใช้งานรูปภาพ Responsive
การเพิ่มประสิทธิภาพความเร็วเว็บไซต์
ให้บริการรูปภาพขนาดเล็กที่น้ำหนักเบาแก่ผู้ใช้มือถือ และรูปภาพความละเอียดสูงสำหรับผู้ใช้พีซี ซึ่งจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บได้อย่างมหาศาล
การออกแบบ UI แบบ Mobile-First
ประหยัดการใช้ข้อมูลมือถือในขณะที่ยังคงแสดงรูปภาพที่สวยงามและคมชัดสำหรับอุปกรณ์ที่มีความหนาแน่นพิกเซลสูง เช่น หน้าจอ Retina
รูปภาพสินค้าอีคอมเมิร์ซ
สำหรับร้านค้าออนไลน์ที่ใช้รูปภาพจำนวนมหาศาล การนำเสนอรูปภาพในขนาดที่เหมาะสมจะช่วยป้องกันอัตราการตีกลับ (bounce rate) และมีส่วนช่วยเพิ่มยอดขาย
ย้ายไปยังรูปแบบสมัยใหม่
ตอบสนองมาตรฐานเว็บสมัยใหม่ได้อย่างง่ายดายด้วยการแปลงรูปภาพ JPEG ที่มีอยู่เป็น WebP และสร้างโค้ด responsive ไปพร้อมๆ กันด้วยเครื่องมือนี้
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง