วิธีเพิ่มประสิทธิภาพรูปภาพเพื่อปรับปรุงความเร็วของหน้าและ SEO ของเว็บไซต์ของคุณ

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

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

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

ครอบตัดและปรับขนาดรูปภาพของคุณ

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

คุณไม่จำเป็นต้องมีขนาดรูปภาพเป็น 6000 x 6000 พิกเซล หากใช้สำหรับรูปโปรไฟล์ขนาดเล็กหรือภาพเฮดช็อตที่ 300 x 300 พิกเซลเท่านั้น จากประสบการณ์ของผม ผมพบว่าภาพที่ใหญ่ที่สุดในหน้าจะเป็นภาพพระเอกที่ด้านบน ขนาดที่ปลอดภัยที่จะอยู่ในขณะที่ยังคงคุณภาพจะทำให้เป็นขนาดความคมชัดสูงมาตรฐานที่ 1920 x 1080 พิกเซล

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

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

• Shift + Drag - จะปรับขนาดภาพทั้งหมดขึ้นหรือลงโดยที่ยังคงอัตราส่วนเดิมไว้
• Ctrl + Drag - จะเปลี่ยนเฉพาะความสูงหรือความยาวโดยไม่ยืดภาพ

การส่งออกเป็นไฟล์ประเภทต่างๆ

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

• PNG - ดีสำหรับการออกแบบกราฟิกหรือรูปภาพที่คุณต้องการดูรายละเอียดเล็ก ๆ น้อย ๆ นี้มาในราคาของขนาดไฟล์ที่ใหญ่ขึ้น
• JPEG - สำหรับการถ่ายภาพบุคคลและสถานที่ในชีวิตจริง สามารถบีบอัดได้มากขึ้นแต่สูญเสียข้อมูลมากขึ้นเล็กน้อย เนื่องจากคุณไม่จำเป็นต้องมีรายละเอียดมากเท่านี้
• SVG - เหมาะสำหรับไอคอนและโลโก้ เนื่องจากสามารถปรับขนาดขึ้นและลงได้โดยไม่สูญเสียคุณภาพใดๆ ใช้งานได้กับไฟล์รูปภาพที่สร้างขึ้นเท่านั้น
• WEBP - รูปภาพเวอร์ชันใหม่กว่าที่สามารถแทนที่ PNG และ JPEG WEBP มีคุณภาพของภาพที่ใกล้เคียงกันทั้งคู่ในขณะที่สามารถประหยัดพื้นที่ได้ 25% -40% ข้อเสียเพียงอย่างเดียวคือ ขณะนี้เบราว์เซอร์ Safari ของ Apple ไม่รองรับสิ่งนี้ ดังนั้นคุณจะต้องโหลด JPEG หรือ PNG สำรองเพื่อโหลด
• GIF - เป็นคลิปวิดีโอหรือแอนิเมชั่นที่มักจะเล่นวนเป็นวง สิ่งเหล่านี้ดีสำหรับการจับภาพฉากหรือแสดงให้เห็นว่าอินเทอร์เฟซของผลิตภัณฑ์สามารถทำงานได้อย่างไร บทความนี้ให้ตัวอย่างที่ดีเกี่ยวกับวิธีการใช้งาน เนื่องจากเป็นลำดับภาพเคลื่อนไหว จึงมักจะมีขนาดไฟล์ที่หนักกว่าเมื่อเทียบกับภาพเดียว

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

ใช้โปรแกรมบีบอัดภาพ

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

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

“ขี้เกียจ” vs “กระตือรือร้น” กำลังโหลดภาพของคุณ

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

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

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

อย่าลืมเพิ่มข้อความแสดงแทน

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

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

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

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

มาทบทวนขั้นตอนในการสร้าง/ปรับแต่งภาพกัน:

1. ลากรูปภาพไปยังโปรแกรมแก้ไขรูปภาพ เช่น Figma เพื่อครอบตัดและปรับขนาด
2. ส่งออกเป็นประเภทรูปภาพที่เหมาะสม (PNG, JPEG, SVG, WEBP เป็นต้น)
3. นำไปที่ไซต์บีบอัดรูปภาพ เช่น Compressor หรือ Image Resizer Online
4. แทรกรูปภาพที่บีบอัดลงในเนื้อหาของคุณในขณะที่โหลดแบบ Lazy Loading
5. เพิ่มข้อความแสดงแทนที่อธิบายรูปภาพบนเพจของคุณ
6. ตอนนี้คุณมีภาพที่สมบูรณ์แบบสำหรับเว็บไซต์ของคุณแล้ว!
7. ลองใช้ Google Search Console เพื่อตรวจสอบประสิทธิภาพที่เพิ่มขึ้นของคุณ

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