ตอนที่ 1 - เริ่มจาก Cloudinary หรือ https://cloudinary.com คือ บริการให้จัดเก็บรูปภาพและวีดีโอพร้อมด้วยตัวจัดการที่ให้บริการในแบบ Cloud (SaaS) สำหรับข้อมูลอ้างอิงเพิ่มเติมจากใน wiki ดูได้ที่นี่: https://en.wikipedia.org/wiki/Cloudinary

สำหรับการใช้งานสามารถ Sign up ได้ฟรี ซึ่งสำหรับ Free Plan จะกำหนดไว้ให้แค่ 1 Account ต่อ 1 User และสามารถใช้งานได้ตามข้อกำหนดนี้:

20,000 + 6,750 Extra จำนวนครั้งที่รับ-ส่งได้ในแต่ละเดือน
300,000 + 250,000 Extra จำนวนรูปภาพและวีดีโอที่เก็บได้ทั้งหมด
10 GB + 2.5 GB Extra เนื้อที่จัดเก็บทั้งหมด
20 GB + 5 GB Extra Bandwidth ที่ให้ได้สำหรับการดูในแต่ละเดือน
10 MB ขนาดสูงสุดของ 1 ไฟล์รูป
100 MB ขนาดสูงสุดของ 1 ไฟล์วีดีโอ

การใช้งานที่พวกเราใช้กันมากสุดก็คือเก็บรูปภาพ แล้วเรียกมาแสดงในเว็บ โดย:

  • ปรับขนาดรูปที่แสดงใหม่
  • ใส่ Filter
  • เปลี่ยนขนาดไฟล์ให้เล็กลง
  • เปลี่ยนไฟล์ Format - หลัก ๆ ก็จะใช้งานอยู่ประมาณนี้ครับ

ดูตัวอย่าง: จากรูปจริงที่มีขนาด 3888 x 2592 แต่เราจะเอามาแสดงที่ขนาดกว้าง 600 - ใน Media Library ของ Cloudinary ให้คลิกเพื่อ Edit รูปที่ต้องการ แล้วปรับค่าตัวเลือก จะเห็นว่าค่าตัวเลือกจะทำให้ URL ที่อ้างเพื่อแสดงรูปจะเปลี่ยนไปจากเดิม ลองดูจากการอ้าง URL ข้างล่างนี้ ดูตรง c_scale,w_600 คือกำหนดขนาดเป็นกว้าง (width) 600 และจัดการรักษาสัดส่วนให้โดยอัตโนมัติ

https://res.cloudinary.com/sdees-reallife/image/upload/c_scale,w_600/v1548237664/dayne-topkin-67327-unsplash.jpg

Sample 600
Photo by Dayne Topkin on Unsplash

สำหรับอันนี้ c_scale,w_300 ก็จะปรับขนาดเป็นกว้าง 300 และจัดการรักษาสัดส่วนให้โดยอัตโนมัติ

https://res.cloudinary.com/sdees-reallife/image/upload/c_scale,w_300/v1548237664/dayne-topkin-67327-unsplash.jpg

Sample 300

ส่วนอันนี้เป็น c_fill,g_auto,h_150,w_150 แสดงขนาด 150 x 150 พร้อมกับหาเนื้อหลักในภาพอัตโนมัติ

https://res.cloudinary.com/sdees-reallife/image/upload/c_fill,g_auto,h_150,w_150/v1548237664/dayne-topkin-67327-unsplash.jpg

Sample 150

ถัดมาอันนี้ c_fill,g_auto,h_150,w_150,r_max ทุกอย่าง 150 x 150 เพิ่มเติมคือตัดมุมรัศมีเป็นวงกลมด้วย r_max

https://res.cloudinary.com/sdees-reallife/image/upload/c_fill,g_auto,h_150,w_150,r_max/v1548237664/dayne-topkin-67327-unsplash.jpg

Sample r_max

คิดว่าคงจะพอเข้าใจกันแล้วนะครับว่าเวลาจะเปลี่ยนการแสดงผลรูป ก็แค่ตั้งค่าแล้วแก้ URL ที่เขียนไว้ใน Code ให้ตรงกันก็เรียบร้อย - เอาตัวอย่างพอให้เห็นภาพกันสักเท่านี้ก่อนนะครับ สรุปสำหรับประโยชน์ที่ได้และต้องขอบคุณ Cloudinary ไว้เป็นอย่างมากก็คือการที่:

  • เราได้พื้นที่เก็บรูป
  • เรียกใช้รูปได้บน Cloud
  • จัดการรูปได้เลยในตอนเรียกใช้
  • และถ้าใช้แบบที่ไม่ใช่ Free Plan ก็สามารถมี User หลาย ๆ คนและกำหนดผู้ดูแลได้ด้วย - ตามเนื้อหานี้ครับ

ถ้าสนใจจะดูตัวอย่างทั้งหมดของ Cloudinary ก็คลิกที่นี่เลยครับ: Cloudinary Demo - ครั้งหน้าเรามาต่อกันที่ Unsplash Source นะครับ