Iorem Ipsum สำหรับภาพ

ทุกคนคงรู้จัก Lorem Ipsum กันอยู่แล้วว่ามันเป็นตัวอักษรจำลองแทนข้อความจริงๆ ใช้สำหรับงานที่ต้องแสดงตัวอย่างคร่าวๆให้กับลูกค้าดูก่อน แต่ถ้าเราอยากได้เป็นภาพล่ะมีที่ไหนมีบ้าง

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

1. picsum
เจ้านี้พึ่งมาใหม่ในตลาดแต่ฟังก์ชันให้ใช้งานครบมากไม่ว่าจะเป็นปรับขนาดรูปตามต้องการ เปลี่ยนจากภาพสีเป็นขาวดำ หรือทำภาพเบลอ ไม่แน่ใจว่าพึ่งเปิดใหม่เลยไม่ค่อยมีคนใช้หรือว่า server ดีมากๆเพราะเว็บนี้ทำงานได้เร็วมากแนะนำเลย https://picsum.photos/ 

2. lorempixel
เจ้านี้อยู่ในตลาดมานานมากๆแล้วมีข้อดีคือสามารถดึงภาพตามกลุ่มที่เราต้องการได้เช่น ดึงเฉพาะภาพในเมือง ภาพอาหาร แต่น่าจะทำมานานแล้วคนใช้กันเยอะหลังๆเลยเปิดได้ช้ามาก http://lorempixel.com/

3. placeholder
สำหรับคนที่ไม่อยากได้ภาพที่มีสีสันแต่อยากได้แค่ว่าตรงนี้เป็นภาพนะขนาดเท่านี้ เว็บนี้เลยเหมาะสมมาก เพราะมันจะแสดงภาพที่บอกขนาดภาพให้คุณเองโดยไม่ต้องไปทำเอง https://placeholder.com/ ถ้านึกไม่ออกดูตัวอย่างด้านล่าง

คำสั่งแสดงภาพโดยใส่ URL จาก placeholder ลงไป ขนาดภาพคือ 350 x 150 px

<img src="http://via.placeholder.com/350x150">

เมื่อเปิดผ่าน browser เราจะได้ภาพนี้มา

4. dummyimage
ถ้า placehoder ยังไม่ได้ดังใจที่ต้องการ มาดู dummyimage กันมันสามารถเปลี่ยนสีสำหรับพื้นหลังของภาพได้ https://dummyimage.com/

จริงๆมีอีกหลายเว็บไซต์แต่ส่วนใหญ่ที่ผมใช้บ่อยๆก็จะมีแค่นี้ครับ

author
นันทวัฒน์ ไชยรัตน์

สวัสดีครับผมเป็นโปรแกรมเมอร์ที่ทำงานมาหลายที่ เปลี่ยนมาหลายสายงานครับเลยพอจะมีประสพการณ์มาเขียนบทความหลายๆเรื่องครับ ผมชอบลองทำอะไรใหม่ๆครับบางครั้งลองไปก็ลืมเลยต้องหาที่จดครับ เลยมาขอจดไว้ที่เว็บนี้ครับ