เครื่องสร้างรูปภาพ Placeholder Lorem Picsum

เครื่องสร้างรูปภาพ Placeholder Lorem Picsum เป็นเครื่องมือฟรีบนเบราว์เซอร์ที่สร้างรูปภาพ Placeholder ที่แม่นยำระดับพิกเซลสำหรับ Mockup, Wireframe, Prototype และการพัฒนา Front-end กำหนดความกว้างและความสูงได้สูงสุด 4000 พิกเซล เลือกสีของคุณ เพิ่มข้อความกำหนดเอง และการแสดงตัวอย่างที่ขับเคลื่อนด้วย Canvas จะอัปเดตทันทีโดยไม่ต้องรอผลจากเซิร์ฟเวอร์ ดาวน์โหลดเป็น PNG, JPG, WEBP หรือ SVG หรือรับโค้ด HTML / Markdown / React และ Hotlink URL สำหรับ Lorem Picsum, Placehold.co และ DummyImage

Placeholder image คืออะไรและทำไมฉันถึงต้องใช้?

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

กรณีการใช้งานทั่วไป

• การทำ Wireframe และ Mockup — แสดงให้ลูกค้าเห็นว่ารูปภาพแต่ละภาพจะอยู่ตรงไหนและมีขนาดเท่าใด
• Front-end Prototyping — พัฒนาเลย์เอาต์ที่รองรับอุปกรณ์ต่างๆ ก่อนที่จะได้รับไฟล์ภาพจริง
• การทดสอบ CMS — ใส่เนื้อหาทดสอบและหน้าผลิตภัณฑ์ด้วยขนาดรูปภาพที่สมจริง
• เทมเพลตอีเมล — สำรองพื้นที่แบนเนอร์และภาพผลิตภัณฑ์สำหรับแคมเปญการตลาด
• เอกสารประกอบและระบบการออกแบบ — แสดงตัวอย่างอัตราส่วนภาพ ระยะห่าง และ Breakpoint ต่างๆ
• การทดสอบ Lazy-load — สร้างภาพขนาดใหญ่ได้อย่างรวดเร็วเพื่อทดสอบกลยุทธ์การโหลดรูปภาพ

ความแตกต่างระหว่าง Lorem Picsum และ Placehold.co คืออะไร?

Lorem Picsum (picsum.photos) จะส่งคืนภาพถ่ายจริงแบบสุ่มตามขนาดที่ต้องการ ซึ่งเหมาะสำหรับ Mockup ที่ดูสมจริง ส่วน Placehold.co และ DummyImage จะส่งคืนรูปสี่เหลี่ยมสีพื้นพร้อมตัวเลขขนาดพิมพ์อยู่ตรงกลาง ซึ่งเหมาะสำหรับ Wireframe และการแสดงตำแหน่งที่แน่นอนของรูปภาพ เครื่องมือสร้างนี้รวม URL สำหรับทั้งสองสไตล์ไว้ในที่เดียว พร้อมทั้งสร้างภาพสีพื้น ไล่ระดับสี หรือลายตารางที่ขับเคลื่อนด้วย Canvas ของเราเองเพื่อให้คุณดาวน์โหลดเป็นไฟล์ได้

ฉันจะสร้างชุดรูปภาพ Placeholder แบบ Retina-ready ได้อย่างไร?

กำหนดความกว้างและความสูงพื้นฐานของคุณ จากนั้นคลิก สร้าง URL และโค้ดตัวอย่าง เพื่อแสดงแผงผลลัพธ์ แล้วคลิก ดาวน์โหลด 1x / 2x / 3x เครื่องมือจะสร้างสำเนาของภาพเดียวกันสามขนาดที่สเกล 1×, 2×, และ 3× พร้อมใช้งานในแอตทริบิวต์ srcset สำหรับหน้าจอที่มี DPI สูง แต่ละไฟล์จะถูกดาวน์โหลดพร้อมชื่อไฟล์ที่ชัดเจน เช่น [email protected]

ทำไมการแสดงตัวอย่างถึงอัปเดตโดยไม่ต้องส่งคำขอไปยังเซิร์ฟเวอร์?

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

ฉันสามารถดาวน์โหลดไฟล์รูปภาพรูปแบบใดได้บ้าง?

คุณสามารถดาวน์โหลด Placeholder ที่สร้างขึ้นในรูปแบบ:

• PNG — ไม่สูญเสียรายละเอียด รองรับความโปร่งใส เหมาะสำหรับสีพื้นและข้อความที่คมชัด
• JPG — ขนาดไฟล์เล็กลง เหมาะสำหรับเนื้อหาที่คล้ายภาพถ่ายที่ยอมรับความไม่สมบูรณ์จากการบีบอัดได้บ้าง
• WEBP — รูปแบบที่ทันสมัยพร้อมการบีบอัดที่ดีที่สุดในคุณภาพที่เท่ากัน รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมด
• SVG — รูปแบบเวกเตอร์ ปรับขนาดได้ไม่จำกัด ขนาดไฟล์เล็กมากสำหรับพื้นหลังสีพื้นและไล่ระดับสี
• Base64 Data URL — คัดลอกรูปภาพเป็นข้อความอินไลน์เพื่อวางใน HTML หรือ CSS โดยตรง

วิธีใช้งานเครื่องมือนี้

1. เลือกขนาด: พิมพ์ความกว้างและความสูงเป็นพิกเซล หรือคลิกที่ขนาดที่กำหนดไว้ล่วงหน้า เช่น อวตาร, แบนเนอร์, Hero หรือ Twitter Card
2. เลือกสไตล์พื้นหลัง: Solid สำหรับสีเรียบ, Gradient สำหรับการผสมสองสี หรือ Checker สำหรับพื้นหลังสไตล์ความโปร่งใส
3. กำหนดสี: ใช้เครื่องมือเลือกสี พิมพ์รหัส Hex โดยตรง หรือคลิกที่จานสีด่วน
4. เพิ่มข้อความกำหนดเอง (ไม่บังคับ): ปล่อยว่างไว้เพื่อแสดงขนาดโดยอัตโนมัติ (เช่น 600 × 400)
5. ดูการแสดงตัวอย่างสด: Canvas จะอัปเดตทุกครั้งที่คุณพิมพ์ — ไม่ต้องกดส่ง
6. ดาวน์โหลดหรือสร้าง URL: คลิก ดาวน์โหลดรูปภาพ เพื่อรับไฟล์ทันที หรือ สร้าง URL และโค้ดตัวอย่าง เพื่อรับ Hotlink URL และโค้ดสำหรับคัดลอก

ตารางอ้างอิงขนาดด่วน

เคล็ดลับเพื่อผลลัพธ์ที่ดีที่สุด

• ล็อกอัตราส่วนภาพ เมื่อปรับขนาดเพื่อคงสัดส่วนเดิมไว้ — มีประโยชน์สำหรับชุดภาพ Responsive
• ใช้ลายตาราง (Checker) เมื่อออกแบบสำหรับภาพซ้อนทับที่โปร่งใส เพื่อจำลองวิธีการแสดงผลความโปร่งใส
• เลือกสีที่มีคอนทราสต์สูง (ข้อความสีเข้มบนพื้นหลังสีอ่อน หรือในทางกลับกัน) เพื่อให้อ่านตัวเลขขนาดได้ง่าย
• ใช้ข้อความสั้นๆ — ข้อความยาวๆ จะถูกย่อขนาดโดยอัตโนมัติ แต่ข้อความ 4 ถึง 12 ตัวอักษรจะดูสะอาดตาที่สุด
• SVG สำหรับการปรับขนาดที่คมชัด — สำหรับงานออกแบบที่จะแสดงในหลายขนาด SVG จะคมชัดกว่าในทุกระดับการซูม
• WEBP สำหรับการใช้งานจริง — เล็กกว่า JPG ประมาณ 30% ที่คุณภาพเท่ากัน และรองรับการทำงานบนเบราว์เซอร์ได้ดีเยี่ยม

ฉันสามารถใช้รูปภาพที่สร้างขึ้นในโครงการเชิงพาณิชย์ได้หรือไม่?

รูปภาพที่สร้างโดยใช้ Canvas generator ของเครื่องมือนี้ (ภาพสีพื้นที่คุณดาวน์โหลด) เป็นของคุณ 100% และสามารถนำไปใช้ที่ไหนก็ได้โดยไม่มีข้อจำกัด รูปภาพจาก Lorem Picsum ใช้ใบอนุญาต Unsplash และฟรีสำหรับการใช้งานเชิงพาณิชย์และส่วนตัว สำหรับ Placehold.co และ DummyImage ก็ใช้งานได้ฟรีเช่นกัน แต่ควรตรวจสอบข้อกำหนดปัจจุบันของแต่ละบริการก่อนเริ่มใช้งานจริง

คำถามที่พบบ่อย

มีขนาดรูปภาพสูงสุดหรือไม่?

เครื่องมือนี้รองรับขนาดสูงสุด 4000 × 4000 พิกเซลต่อด้าน ซึ่งครอบคลุมเกือบทุกกรณีการใช้งานจริง รวมถึงรูปภาพ Hero แบบ DPI สูงและจอแสดงผล 4K เบราว์เซอร์จะเป็นผู้ประมวลผลหลัก ดังนั้นภาพขนาดใหญ่มากอาจทำให้การแสดงตัวอย่างช้าลงชั่วคราวในอุปกรณ์รุ่นเก่า

ฉันสามารถสร้าง Placeholder แบบโปร่งใสได้หรือไม่?

ได้ — ให้ดาวน์โหลดเป็น PNG หรือ SVG และใช้โหมดพื้นหลัง Checker เพื่อดูว่าความโปร่งใสจะแสดงผลอย่างไร หากต้องการดาวน์โหลดแบบโปร่งใสทั้งหมด ให้ตั้งค่าสีพื้นหลังและสีรองเป็นค่าเดียวกันและเลือกรูปแบบ PNG

รูปภาพจะทำงานใน Photoshop, Figma หรือ Sketch ได้หรือไม่?

แน่นอน PNG, JPG, WEBP และ SVG ล้วนเป็นรูปแบบรูปภาพมาตรฐานที่รองรับโดยเครื่องมือออกแบบสมัยใหม่ทุกประเภท คุณสามารถลากและวางไฟล์ที่ดาวน์โหลดมาลงในโปรเจกต์ของคุณ หรือใช้ Data URL ใน CSS สำหรับพื้นหลังแบบอินไลน์ได้โดยตรง

ทำไมต้องใช้เครื่องมือนี้แทนที่จะพิมพ์ URL ของ Placehold.co โดยตรง?

มีสามเหตุผล: (1) การแสดงตัวอย่างภาพจริงก่อนจะนำ URL ไปใช้ — คุณจะเห็นสิ่งที่ได้รับอย่างชัดเจน (2) การคัดลอกโค้ด HTML, Markdown, JSX, CSS และ BBCode ได้ในคลิกเดียวพร้อมๆ กัน (3) ไฟล์ที่ดาวน์โหลดมาโฮสต์เองได้ สำหรับการใช้งานแบบออฟไลน์หรือโครงการที่ไม่สามารถพึ่งพาบริการจากภายนอกได้

มันทำงานบนอุปกรณ์มือถือได้หรือไม่?

ได้ อินเทอร์เฟซทั้งหมดปรับให้เข้ากับหน้าจอโทรศัพท์และแท็บเล็ต การแสดงตัวอย่างบน Canvas จะย่อขนาดให้พอดี ส่วนควบคุมต่างๆ จะจัดเรียงในแนวตั้ง และการดาวน์โหลด/คัดลอกทั้งหมดทำงานผ่าน Mobile Clipboard API

ฉันสามารถสร้างหลายขนาดพร้อมกันได้หรือไม่?

ปุ่ม 'ชุดภาพ Retina' จะดาวน์โหลดขนาด 1×, 2×, และ 3× ของขนาดปัจจุบันของคุณในคลิกเดียว สำหรับขนาดอื่นๆ คุณสามารถคลิกที่ปุ่มขนาดที่กำหนดไว้ล่วงหน้าและดาวน์โหลดได้ทันที Canvas จะประมวลผลใหม่ด้วยความเร็วมากกว่า 60 FPS ทำให้การทำงานซ้ำรวดเร็วมาก

เครื่องมือที่เกี่ยวข้อง

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

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

• Lorem Picsum — บริการรูปภาพสุ่มฟรี
• Placehold.co — บริการรูปภาพ Placeholder สมัยใหม่
• MDN: img element & srcset
• Lorem ipsum — ประวัติของเนื้อหา Placeholder