• 16 Jul 2018
• การเริ่มต้นทำเว็บ

การทำขนาดรูป ที่เหมาะสม ขึ้นบนเว็บไซต์

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

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



      ขนาดรูปภาพ (Images size) ในส่วนนี้ต้องดูก่อนว่าหน้าเว็บของเราแสดงผลส่วนของเนื้อหามีความกว้าง เท่าไหร่ ยกตัวอย่างเช่น มีความกว้างอยู่ที่ 1,000 px  เราก็ควรกำหนดขนาดรูปของเรา ความกว้าง ของรูป ไม่ให้เกิน 1,000 px ส่วนความสูงนั้น เราจะปล่อย auto เผื่อไม่ให้ขนาดของรูปผิดรูปทรงไป เพราะขนาดรูปที่จะประกอบเว็บนั้น จะมีความสูง ไม่เท่ากัน แต่ความกว้างเราจะกำหนดให้เท่ากัน 
      ความละเอียดของภาพ (Resolution) รูปแต่ล่ะไฟล์ขนาดของความละเอียดภาพจะไม่เท่ากัน ถึงแม้ว่าขนาดของรูปภาพนั้นจะเท่ากันก็ตาม ทั้งนี้อยู่ที่ต้นฉบับ ของรูปว่าไฟล์ทีได้มานั้นตั้งความละเอียดของรูปอยู่ที่เท่าไหร่ ในกรณีของการกำหนดความละเอียดของภาพในการขึ้นเว็บนั้น เราควรอยู่ที่ 75 PPI (Pixels Per Inch เป็นค่าบอกความละเอียดรูปภาพบนหน้าจอแสดงผล ในแง่ของจำนวนเม็ดพิกเซลต่อพื้นที่แสดงผลขนาด 1 ตารางนิ้ว เช่น คอมพิวเตอร์ และ โทรศัพท์) 

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

      นามสกุล ของไฟล์ภาพ ในการนำรูปภาพไปใช้นั้น ส่วนมากภาพถ่าย หรือภาพที่มีรายละเอียดเยอะ แนะนำให้ บันทึกภาพเป็นไฟล์ .jpg หรือ .jpeg และถ้าภาพมีความละเอียดน้อย เช่นภาพพื้นหลัง ที่มีโทนสี น้อย เป็นภาพแนว vector ให้บันทึกเป็น .gif เพราะบันทึกออกมาขนาดไฟล์จะมีขนาดที่เล็กกว่า ที่จะบันทึกเป็นภาพ .jpg หรือ .jpeg 
     การกำหนด Quality และ ​Format Option = Progressive (Scans) ในส่วนนี้จะเป็นส่วนขั้นตอนสุดท้ายในการบันทึกภาพของไฟล์ .jpg หรือ .jpeg ในส่วนนี้บางท่านอาจจะกดบันทึกข้ามไปเลย แต่ยังมีทริกอีกนิดที่จะทำให้ขนาดของภาพเล็กลง และแสดงผลได้เร็วขึ้น โดยการกำหนด Quality โดยค่าที่ตั้งไว้จะอยู่ที่ Quality=12 แต่เพื่อลดขนาดของไฟล์ภาพและคุณภาพไม่ลดลงมากพอรับได้ ให้ลดมาเหลือที่ Quality=10 ขนาดภาพก็จะลงลงมา
     และอีกส่วนที่จะทำให้การแสดงผลได้เร็วขึ้นคือ Progressive Scans ค่าพื้นฐานนั้นจะอยู่ที่ 3 ค่าตรงนี้คือ การแสดงรูป 3 Step กรณีถ้าไฟล์ใหญ่ จะเห็นได้ชัด การแสดงครั้งแรกจะเป็นภาพเบรอ แสกนครั้งที่สองจะ ชัดขึ้นมาอีกระดับ ส่วนครั้งที่สามก็จะแสดงภาพ สมบูรณ์ ในส่วนนี้ถ้าอินเตอร์เน็ทแรงๆ หรือภาพขนาดไม่ใหญ่มากนักก็จะไม่เห็นการแสดงแบบนี้ 




    การกำหนด ข้อมูลของภาพ (File Info)  ในส่วนนี้ การกำหนดข้อมูล Title, Description, Keywords, Copyright Notice ให้กับรูปภาพโดยการฝังไว้ในรูปภาพ ส่วนนี้บางคนอาจมองข้าม และไม่รู้ว่าใส่อย่างไร ข้อมูลส่วนนี้จะส่งผลให้รูปภาพของเรานั้น ไปอยู่ในส่วนของ SEO ในส่วนของการค้นหารูปภาพด้วย เช่นเดียวกันกับการทำ SEO หน้าเว็บ


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