ยินดีต้อนรับสู่บทเรียนที่เจ็ดของซีรีย์การทำเว็บไซต์สำหรับเด็กของเรา วันนี้เราจะเรียนรู้เกี่ยวกับรูปภาพสำหรับเว็บทั้งหมด!

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

ระหว่างเดินทาง อย่าลืมถามคำถามที่กล่องคอมเม้นท์ด้านล่างละกัน

รูปภาพที่ใช้สำหรับเว็บ

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

มันมีหลายสิ่งที่ต้องคิดเกี่ยวกับการใช้รูปภาพสำหรับเว็บ อย่างเช่นว่า format ไหนดีที่สุด ที่ไหนที่เราสามารถหารูปมาใช้ได้ (โดยไม่ผิดลิขสิทธิ์) และจะใส่มันในเว็บเราได้ไหม ด้วยวิธีการอย่างไร?

ระหว่างบทเรียนนี้ เราจะทำการใส่เอฟเฟ็กต์ให้กับรูปภาพ อย่างเช่นภาพแผนที่เมืองในฝันของเรา

ชนิดของรูปภาพ

ชนิดของรูปภาพที่ถูกใช้มากที่สุดบนเว็บคือ JPEG, PNG และ SVG ลองมาคุยกันอย่างละเอียดเกี่ยวกับพวกมันดู

JPEG

ชนิด JPEG ก็เช่นไฟล์รูปที่ลงท้ายด้วยนามสกุล .jpeg หรือ .jpg รูปภาพเหล่านี้คือสิ่งที่เรานำมาใช้ประกอบเว็บกันเป็นส่วนมาก

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

PNG

ชนิด PNG นั้นจะมีนามสกุลต่อท้ายว่า ".png" ขณะที่ไฟล์ JPEG จะทำให้สูญเสียคุณภาพของภาพบ้างเล็กน้อย แต่ PNG นั้นจะไม่ ไฟล์เหล่านี้จะทำให้ภาพมีขอบตรงและแหลมเหมือนกับไฟล์ต้นฉบับ แต่ในขณะเดียวกันคุณภาพนี้ก็ทำให้ขนาดของไฟล์นั้นใหญ่กว่า .jpeg

PNG นั้นเป็นตัวเลือกที่ดีสำหรับรูปลายเส้น ตัวอักษร ไอคอนกราฟิกที่มันมีไฟล์ที่ขนาดเล็กอยู่แล้ว มันยังเป็นไปได้ที่จะมีแบ็คกราวน์แบบใส (transparent) ด้วย PNG ซึ่งมันทำไม่ได้ใน JPEG

SVG

SVG (Scalable Vector Graphics) คือรูปภาพที่สามารถย่อหรือขยายได้เท่าที่เราต้องการโดยไม่ทำให้ภาพนั้นแตก ไม่เหมือนกับที่ JPEG หรือ PNG เป็น รูปภาพเหล่านี้จะถูกบันทึกไว้ด้วยนามสกุล .svg และมันเหมาะมากกับพวกภาพลายเส้นและโลโก้ต่างๆ ของบริษัท

รูปภาพที่เราใช้ในเว็บเมืองในฝันของเราเป็น SVG ทั้งหมด! ถ้าเรากลับไปที่ไฟล์ CSS ของเราและเปลี่ยนค่า width ของรูปใดๆ ก็ตามเป็น 1000px มันจะใหญ่ขึ้นมากแต่ยังให้ความคมชัดเช่นเดิม

จะหารูปภาพได้จากที่ไหนบ้าง

มีที่ๆ เราจะสามารถหารูปฟรีได้ง่ายๆ บนเว็บ

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

ให้แน่ใจเสมอว่าได้เช็ค licensing (หรือขออนุญาตแล้ว) เมื่อคุณไม่แน่ใจ แต่สำหรับขณะนี้เรามีตัวเลือกต่างๆ มาให้ทั้งฟรีทุกกรณี และ ฟรีสำหรับการใช้งานเท่านั้น

• Cupcake นั้นมีข้อเสนอหลากหลายสำหรับรูปถ่ายต่างๆ เมื่อคุณเจอภาพบางอันที่คุณชื่นชอบ คุณสามารถคลิกที่ลิ้งค์ Download High Res มันจะให้ชื่อไฟล์และเซฟมันลงที่คอมพิวเตอร์ของคุณ
• FancyCrave นั้นคืออีกเว็บไซต์สำหรับรูปถ่ายที่ฟรีเต็มที่สำหรับการใช้งาน และมันมีตัวเลือกมากมายให้เลือก เราสามารถใช้สิ่งเหล่านี้ด้วยการคลิกปุ่ม Download และบันทึกไปที่โฟลเดอร์งานของเรา
• สำหรับไอคอน SVG ทั้งหลาย IcoMoon นั้นมีกราฟิกฟรีจำนวนมากให้ได้เลือก ตั้งแต่การไฮไลท์ icon ที่เราต้องการโดยการคลิกพวกมัน เราสามารถเลือก Generate SVG ... ที่ใต้รูปภาพจากนั้นคลิก Download ได้เลย

การแก้ไขรูปภาพ

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

ระบบปฏิบัติการส่วนมากมักจะมีโปรแกรมที่สามารถแก้ไขภาพได้ง่ายๆ ให้เราอยู่แล้ว "Preview" นั้นคือโปรแกรมที่เป็นตัวเลือกของคุณถ้าคุณมีเครื่อง Mac ที่ซึ่งช่วยให้คุณปรับขนาด ทำการ crop หรือบันทึกไฟล์รูปภาพเป็น format อื่นๆ การเปิดโปรแกรม Preview คุณสามารถพิมพ์คำสั่ง search บนคอมพิวเตอร์ของคุณ (รูปสัญลักษณ์แว่นขยายที่อยู่มุมบนขวาของจอนั่นแหละ!) หรือ เปิดรูปภาพด้วยการดับเบิ้ลคลิกมัน เหมือนกับว่ามันเป็นโปรแกรม default ที่ใช้ในการเปิดรูปภาพอยู่แล้ว

สำหรับเครื่องที่ใช้ Windows โปรแกรม "Windows Photo Viewer" หรือ "Paint" จะเป็นโปรแกรม default ที่เราสามารถใช้งานได้ อีกครั้ง มันทำได้แค่การแก้ไขภาพง่ายๆ เท่านั้นนะ

การ Crop รูปภาพ (Cropping)

เมื่อเราได้คุยเกี่ยวกับการ crop นั้นหมายถึงการเอาส่วนที่ไม่ต้องการของรูปภาพออก

การ crop สามารถใช้ได้ดีเมื่อเราต้องการแค่บางส่วนของรูปภาพขนาดใหญ่ รู้ไหมว่าบางทีเราก็สามารถ Crop เป็นรูปอื่นๆ ได้เช่นวงกลมเป็นต้น!

แก้ไขมันด้วย CSS

เหมือนกับการเปลี่ยนขนาดของรูปภาพด้วย CSS เรามี filter เพื่อสร้างเอฟเฟ็กต์อีกหลายชนิดให้เราได้ใช้ อย่างเช่นการสร้างรูปภาพสีขาวดำ รูปภาพพื้นหลังโปร่งแสง หรือ ใช้ปรับความเข้มแสงบนรูปภาพ

ภาพขาวดำ (Grayscale)

เราสามารถแปลงรูปภาพให้มีแค่สีขาวกับดำที่ CSS ได้โดยใช้พร้อพเพอร์ตี้ filter

ภายในพร้อพเพอร์ตี้นี้ เราจะใส่ grayscale และจากนั้นค่าเปอร์เซ็นต์ภายในวงเล็บ

นี่คือวิธีที่รวดเร็วเพื่อดู CSS ซึ่งจะสร้างภาพขาวดำอย่างสมบูรณ์แบบเลยทีเดียว

img {
    filter: grayscale(100%);
} 

ค่าความทึบแสง (Opacity)

Opacity นั้นเกี่ยวกับการทำให้ภาพนั้นโปร่งแสง หรือ มองทะลุผ่านได้ พร้อพเพอร์ตี้ opacity นั้นจะใช้ค่าจาก .0 ถึง 1 ด้วย .0 นั้นเราจะสามารถมองทะลุได้ (ล่องหน) และ 1 นั้นจะทึบ ไม่สามารถมองทะลุได้ ค่าทั้งหมดนั้นจะอยู่ระหว่างการให้ค่าความเข้มของการโปร่งแสง

ยกตัวอย่าง ถ้าเราตั้งค่า opacity: .5; ในวงกลมเหล่านี้ที่ไฟล์ CSS ผลลัพธ์นั้นก็จะได้แบบที่เห็นนี้

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

ค่าความเบลอ (Blur)

เรานั้นสามารถทำให้รูปภาพนั้นเบลอโดยใช้ CSS filter ภายในพร้อพเพอร์ตี้ filter เราต้องการใช้ blur ตามด้วยค่าความเบลอเป็น pixel ภายในวงเล็บ

img {
    filter: blur(5px);
}

ยิ่งค่า pixel มีค่ามาก ความเบลอของรูปภาพก็จะยิ่งมากขึ้นตามไปด้วย

หมายเหตุ สำหรับรายการ CSS filter ทั้งหมด สามารถดูได้จากที่นี่เลย เพียงแค่คลิกบน CSS tab ของ demo ใดๆ ก็ตามที่เห็นเพื่อดูผลลัพธ์

สรุป

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

ถัดไปเราจะได้พูดคุยเกี่ยวกับพื้นฐานการออกแบบ ที่ๆ เราจะคุยว่าทำอย่างไรเราจึงจะจัดเรียงสิ่งต่างๆ บนหน้าเพจได้ลงตัวเหมาะสม

แล้วเจอกันรอบเมืองเช่นเดิม