วิธีสร้างรูปภาพจำลอง (Image Placeholder) สำหรับงานออกแบบ ฟรี!
เวลาออกแบบเว็บไซต์หรือทำ Mockup เคยเจอปัญหาไม่มีรูปจริงมาใส่ไหมครับ? แทนที่จะปล่อยว่างไว้ ลองใช้ Image Placeholder หรือรูปภาพจำลองที่มีขนาดเป๊ะๆ มาวางแทนที่ดูสิ ช่วยให้งานออกแบบดูสมบูรณ์ขึ้นเยอะเลย!
ดูวิธีใช้งานใน 1 นาที
ทำไมต้องใช้ Image Placeholder?
วิธีสร้างรูปจำลองง่ายๆ
1. กำหนดขนาด
ใส่ความกว้าง (Width) และความสูง (Height) ที่ต้องการ เช่น 800x600 px
2. ปรับแต่งสีและข้อความ
เลือกสีพื้นหลัง สีตัวอักษร และพิมพ์ข้อความที่ต้องการสื่อสาร เช่น "Banner Header" หรือ "Product Image"
3. นำไปใช้งาน
กด ดาวน์โหลด PNG เพื่อนำไฟล์ไปใช้ใน Photoshop/Figma หรือกด Copy Data URI
เพื่อนำโค้ดไปวางใน HTML src="..." ได้ทันที
เทคนิคสำหรับ Dev
การใช้ Data URI (Base64) จะช่วยลดจำนวน HTTP Request ทำให้หน้าเว็บโหลดเร็วขึ้นในระหว่างการพัฒนา ไม่ต้องเสียเวลาอัปโหลดไฟล์รูปจำลองขึ้นเซิร์ฟเวอร์ครับ
