เครื่องมือรูปภาพสำหรับนักพัฒนา

สร้าง favicon, ไอคอน PWA, srcset และเนื้อหารูปภาพของเว็บ

สร้าง ZIP ไอคอนที่พร้อมสำหรับการติดตั้ง ชุด WebP ที่ตอบสนอง ตัวยึดตำแหน่ง LQIP/Data URI สไปรท์ชีท รูปภาพอาร์ตพิกเซล และการแสดงตัวอย่างพื้นผิวในเครื่อง

สร้างเนื้อหาเว็บ อ่านคู่มือการใช้งาน

Favicon + กปภTool Office

srcset ที่ตอบสนองTool Office

LQIP / Base64Tool Office

สไปรต์ CSSTool Office

โปรแกรมสร้างเนื้อหารูปภาพบนเว็บ

ขั้นตอนการทำงานของนักพัฒนารายหนึ่งครอบคลุมอนุพันธ์ของรูปภาพและข้อมูลโค้ดโดยไม่ต้องแยกหน้าสำหรับทุกขนาดไอคอนหรือรูปแบบตัวยึดตำแหน่ง

วิธีเตรียมเนื้อหารูปภาพสำหรับเว็บไซต์

เริ่มต้นด้วยอิมเมจต้นฉบับที่ปลอดภัย เลือกกลุ่มเนื้อหา จากนั้นดาวน์โหลดไฟล์ชื่อไฟล์ที่สอดคล้องกันและตัวอย่างการใช้งาน

สร้างไอคอนแอป

สร้าง favicons แบบคลาสสิก ไอคอน Apple touch ไอคอน Android/PWA และรายการเว็บใน ZIP เดียว

สร้างรูปภาพที่ตอบสนอง

ส่งออกความกว้าง WebP หลายรายการ และคัดลอกส่วนย่อย srcset/ขนาด เพื่อให้เบราว์เซอร์สามารถเลือกทรัพยากรที่เหมาะสมได้

สร้างตัวอย่างแบบมีน้ำหนักเบา

ใช้สีที่โดดเด่นและ Data URI ที่เบลอเล็กน้อยในขณะที่โหลดรูปภาพเต็ม

เอาต์พุตที่พร้อมสำหรับนักพัฒนา

ZIP ที่ส่งออกจะรวมเนื้อหาและโค้ดไว้ด้วยกัน ช่วยลดข้อผิดพลาดในการตั้งชื่อและการติดตั้ง

บรรจุภัณฑ์ขนาดมาตรฐาน

สร้างเบราว์เซอร์ทั่วไป ขนาด Apple และ PWA จากแหล่งสี่เหลี่ยมจัตุรัสเดียว

คำแนะนำด้านประสิทธิภาพ

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

ยูทิลิตี้สร้างสรรค์

สร้างหรือแยกภาพต่อเรียง ปรับขนาดภาพพิกเซล และตรวจสอบรอยต่อของพื้นผิวที่ซ้ำกัน

คำถามที่พบบ่อยเกี่ยวกับเนื้อหารูปภาพบนเว็บ

รวม favicon และ PWA ขนาดใดบ้าง

แพ็คเกจประกอบด้วยไอคอน Fav ขนาด 16, 32 และ 48 พิกเซล, ไอคอน Apple touch 180 พิกเซล และไอคอน Android/PWA 192 และ 512 พิกเซล

srcset ที่ตอบสนองช่วยได้อย่างไร

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

ตัวยึดตำแหน่ง Base64 เร็วกว่าเสมอหรือไม่

ไม่ พวกเขาลดคำขอเพิ่มเติมสำหรับการแสดงตัวอย่างเล็กๆ น้อยๆ แต่เพิ่มไบต์ HTML หรือ CSS วัดกันที่หน้างานจริง