วิธีเพิ่มประสิทธิภาพภาพเว็บของคุณ

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

ปัญหา

ดังนั้น คุณจึงเพิ่งสร้างไซต์ใหม่และปรับปรุงทุกอย่างที่เป็นไปได้ รวมทั้งขนาดรูปภาพที่คุณกำหนดเอง แล้วส่งต่อให้ผู้ใช้ สองสัปดาห์ต่อมา คุณจะได้รับข้อความว่า "ทำไมความเร็วหน้าเว็บของฉันจึงแย่มาก" หรือ “ทำไมหน้าโหลดนานจัง” คำถาม คุณไปตรวจสอบเว็บไซต์และพบว่าภาพมีขนาดใหญ่มาก! ฉันแน่ใจว่านักพัฒนาทุกคนเคยอยู่ในตำแหน่งนี้มาก่อน เป็นเรื่องยากที่จะจัดการกับสภาพปัจจุบันของภาพความละเอียดสูงที่มาจากกล้อง DSLR โทรศัพท์และจอเรตินา แต่หวังว่าโพสต์นี้จะครอบคลุมถึงบางสิ่งง่ายๆ ที่คุณสามารถนำไปใช้เพื่อหลีกเลี่ยงปัญหาเหล่านี้ ท้ายที่สุด แม้แต่รูปภาพขนาดใหญ่เพียงภาพเดียวก็สามารถลดคะแนนความเร็วหน้าเว็บของคุณได้อย่างมาก

สถานการณ์โลกที่สมบูรณ์แบบ

ก่อนเริ่มสร้างเว็บไซต์ สนทนากับนักออกแบบของคุณเพื่อให้แน่ใจว่ารูปภาพทั้งหมดในการออกแบบเป็นไปตามอัตราส่วนกว้างยาวของรูปภาพมาตรฐาน การครอบตัดรูปภาพไม่ควรกลายเป็นปัญหาหากคุณกำหนดขนาดรูปภาพที่กำหนดเองตามนั้น ลองใช้ 3:2, 4:3 หรือ 16:9 เนื่องจากเป็นอัตราส่วนกว้างยาวมาตรฐานของกล้อง หากไม่สามารถทำได้และคุณจะใช้รูปภาพจากไซต์ปัจจุบันเพื่อสร้างใหม่ ให้ตรวจดูว่าอัตราส่วนกว้างยาวเป็นอย่างไรและออกแบบให้สอดคล้องกันเพื่อรวมสิ่งเหล่านี้ มิฉะนั้นคุณจะประสบปัญหาบางอย่างในระยะไม่ไกล อนาคต.

จำกัดขนาดไฟล์อัพโหลด

มีปลั๊กอินมากมายที่ให้คุณควบคุมสิ่งนี้ได้ มากมายที่ฉันจะไม่แสดงรายการ แต่การค้นหาง่ายๆ จะแสดงให้คุณเห็นว่ามีกี่รายการ ปลั๊กอินเหล่านี้มีหลายรูปแบบ แต่ฉันจะเลือกแบบที่ง่ายที่สุด โดยปกติพวกเขาจะเพิ่มตัวเลือกเพิ่มเติมในการตั้งค่า/ตัวเลือกสื่อของคุณใน WordPress ซึ่งคุณสามารถตั้งค่าได้เมื่อเข้าสู่ระบบในฐานะผู้ดูแลระบบ และจะมีลักษณะคล้ายกับภาพด้านล่าง

หากคุณไม่ต้องการให้ปลั๊กอินขยายตัวมากขึ้น ก็สามารถทำได้โดยเชื่อมต่อกับ 'wp_handle_upload_prefilter' ตัวอย่างที่ดีของวิธีใช้สิ่งนี้สามารถเห็นได้ในโพสต์บล็อกนี้ที่ด้านล่างของหน้า

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

คุณคิดว่าการบังคับขนาดอัปโหลดสูงสุดก็เพียงพอแล้วใช่ไหม น่าเสียดายที่มันไม่ได้หยุดไคลเอ็นต์จากการอัปโหลดภาพขนาด 500kb ที่มีขนาดเพียง 100px x 100px และจะไม่ลบข้อมูล EXIF ​​​​(meta) ออกจากไฟล์ ดังนั้นเราจะต้องดำเนินการตรวจสอบอีกชั้นหนึ่ง

ปรับภาพให้เหมาะสม

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

ปลั๊กอิน

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

การเพิ่มประสิทธิภาพภาพออนไลน์

มีอีกมาก แต่ TinyPNG เป็นหนึ่งในตัวเลือกที่ง่ายที่สุด: อัปโหลดไฟล์ของคุณและดาวน์โหลดเวอร์ชันที่บีบอัด TinyPNG ลบข้อมูล EXIF ​​​​ทั้งหมด

ยังไม่เพียงพอ?

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

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

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

ให้ความรู้ผู้ใช้ของคุณ

แนวทางแก้ไขที่เป็นไปได้สำหรับผู้ใช้

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

รู้จักประเภทไฟล์ของคุณ

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

• ภาพถ่ายที่มีผู้คน ทิวทัศน์ ฯลฯ = JPG
• คัตเอาท์ของบุคคลหรือผลิตภัณฑ์ที่ซ้อนทับอย่างอื่นที่ไม่ได้อยู่ในพื้นหลังของภาพ = PNG
• อินโฟกราฟิกหรือไอคอน = GIF หรือ PNG

หากคุณกำลังคิดที่จะอัปโหลดสิ่งอื่น เช่น TIF, PSD หรือ AI เป็นไฟล์รูปภาพบนเว็บไซต์ของคุณ ให้หยุดเดี๋ยวนี้

สถานการณ์กรณีปกติ

ซอฟต์แวร์

• ระบบปฏิบัติการ Windows โดยใช้ Microsoft Paint

รูปภาพ

• ขยายเบราว์เซอร์ให้ใหญ่สุดเพื่อให้คุณเห็นขนาดวิวพอร์ตที่ใหญ่ที่สุดที่มีการใช้รูปภาพ ใช้เครื่องมือสนิปของ Windows เพื่อหาขนาดพิกเซลที่แท้จริงของรูปภาพ
• สร้างแคนวาส/เอกสารใหม่ใน MS Paint ตามขนาดของเครื่องมือสนิป
• ใส่รูปภาพใหม่ของคุณลงในผืนผ้าใบใหม่
• รูปภาพต้องการพื้นหลังโปร่งใสหรือไม่?
• ใช่ ? บันทึกเป็น GIF หรือ PNG
• ไม่ ? บันทึกเป็น JPG
• ใช้ TinyPNG เพื่อบีบอัดภาพของคุณ
• อัปโหลดรูปภาพที่บีบอัด

สถานการณ์กรณีที่ดีที่สุด

ซอฟต์แวร์

• ระบบปฏิบัติการใด ๆ ที่ใช้ Photoshop

รูปภาพ

• ขยายเบราว์เซอร์ให้ใหญ่สุดเพื่อให้คุณเห็นขนาดวิวพอร์ตที่ใหญ่ที่สุดที่มีการใช้รูปภาพ ใช้เครื่องมือจับภาพหน้าจอ (เครื่องมือ Mac) เพื่อหาขนาดพิกเซลที่แท้จริงของภาพ
• สร้างแคนวาส/เอกสารใหม่ใน Photoshop ตามขนาดของเครื่องมือสนิป
• ใส่รูปภาพใหม่ของคุณลงในผืนผ้าใบใหม่
• เลือกบันทึกสำหรับเว็บ
• ตรวจสอบว่าคุณกำลังดูภาพที่ 100%
• รูปภาพต้องการพื้นหลังโปร่งใสหรือไม่?
• ใช่ ? เลือก GIF, PNG8 หรือ PNG24 จากดรอปดาวน์ (คุณจะเห็นคุณภาพของภาพและขนาดไฟล์เปลี่ยนไปเมื่อคุณทำเช่นนี้)
• ไม่ ? เลือก JPG จากดรอปดาวน์
• เปลี่ยนการตั้งค่าตามรูปแบบภาพต่างๆ จนกว่าคุณจะได้ภาพที่มีคุณภาพ/การแลกเปลี่ยนขนาดที่ดี
• เลือกรายการดรอปดาวน์ข้อมูลเมตาและเลือกไม่มี
• บันทึกแล้วอัปโหลดไปยังเว็บไซต์ของคุณ

บทสรุป

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

หากต้องการความช่วยเหลือเพิ่มเติมเกี่ยวกับการออกแบบเว็บ โปรดติดต่อผู้เชี่ยวชาญของเราวันนี้

หากคุณต้องการความช่วยเหลือเกี่ยวกับการพัฒนาเว็บ อย่าลังเลที่จะติดต่อเรา