การเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ: 2022 SEO และเทคนิคความเร็วไซต์

เผยแพร่ครั้งแรกในเดือนสิงหาคม 2020 และได้รับการอัปเดตเพื่อความครอบคลุมในเดือนตุลาคม 2022

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

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

ขณะนี้ มีเทคนิคการเพิ่มประสิทธิภาพรูปภาพมากมาย นั่นเป็นเหตุผลที่คู่มือนี้แบ่งออกเป็น 2 ส่วน:

• การเพิ่มประสิทธิภาพรูปภาพสำหรับ SEO และการเข้าถึง :

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

• การเพิ่มประสิทธิภาพรูปภาพสำหรับ ความเร็วเว็บไซต์และประสบการณ์ของผู้ใช้ :

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

โดยที่ในใจเรามาเริ่มกันเลย

เทคนิคการเพิ่มประสิทธิภาพรูปภาพ: SEO & การเข้าถึง

ให้ชัดเจนออกไปให้พ้นทาง:

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

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

ทดสอบการเพิ่มประสิทธิภาพรูปภาพอันทรงพลังของ NitroPack บนไซต์ของคุณ

ขณะนี้ รูปภาพปรากฏในทั้ง Google Search และ Google Images

ตัวอย่างเช่น นี่คือ SERP สำหรับคำหลักที่มีการแข่งขันสูง - "สูตรโบโลเนส"

(ถ้าคุณอ่านตรงนี้ก่อนอาหารกลางวันฉันขอโทษ)

ค้นหาคำหลักเดียวกันใน Google รูปภาพ และคุณจะพบรูปภาพเดียวกัน

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

ด้วยภาพเพียง ภาพเดียว เว็บไซต์ของ BBC สามารถเข้าถึงแหล่งที่มาของ การเข้าชมขนาดใหญ่สองแห่ง

นั่นคือสิ่งที่เรากำลังพยายามทำกับเทคนิค SEO และการเข้าถึงเหล่านี้

มาดูกันว่าเราจะไปถึงที่นั่นได้อย่างไร

เปลี่ยนชื่อไฟล์รูปภาพของคุณ

ตามค่าเริ่มต้น ไฟล์รูปภาพส่วนใหญ่จะตั้งชื่อว่า “IMG_010204”

สิ่งนี้ไม่เป็นประโยชน์กับทุกคนโดยเฉพาะ รวมถึง Google

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

ตัวอย่างเช่น นี่คือชื่อไฟล์ของรูปภาพปาเก็ตตี้จากด้านบน:

(เอาจริงๆถ้าหิวก็ไปหาอะไรกินกันนะครับ ผมจะพูดถึงภาพนี้ตลอดไกด์นะครับ)

อย่างที่คุณเห็น ชื่อไม่หรูหรา แต่ทำให้งานนี้สำเร็จ

และนั่นคือสิ่งที่ดีที่สุดเกี่ยวกับชื่อไฟล์:

พวกเขาไม่จำเป็นต้องมีรายละเอียดมากเกินไป นั่นคืองานของคำอธิบายแทน

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

ตัวอย่างเช่น หากชื่อไฟล์ของภาพถ่ายคือ “amazing-spaghetti-fettuccine-pasta-dish-recipe-cook.jpg” ก็อาจเป็นตัวเลือกที่สำคัญในการลงโทษการใส่คำหลัก

กล่าวโดยย่อ ให้ชื่อไฟล์เรียบง่ายและสื่อความหมาย มันไม่ใช่วิทยาศาสตร์จรวด

ใช้ข้อความแสดงแทนคำอธิบาย

ข้อความแสดงแทนคือคำอธิบาย (หรือข้อความที่เทียบเท่า) ของรูปภาพ

การเพิ่มเป็นสิ่งสำคัญสำหรับ Google และสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ

การเขียนข้อความแสดงแทนที่ดีสำหรับรูปภาพทั้งหมดของคุณเป็นสิ่งสำคัญอย่างยิ่ง นอกจากนี้ยังง่ายมาก

คุณต้องเพิ่มแอตทริบิวต์ alt ให้กับแท็กรูปภาพเท่านั้น ดังนี้:

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

ดังนั้นคุณจะเขียนข้อความแสดงแทนที่ดีได้อย่างไร

อันดับแรก คุณควร อธิบาย ข้อความแสดงแทนของคุณให้ละเอียดกว่าชื่อไฟล์

กลับไปที่ภาพสูตรของเรา:

นี่คือตัวอย่างของข้อความแสดงแทนที่ยอดเยี่ยม - เป็นคำอธิบายและให้รายละเอียด โดยไม่มีคำสันธานหรือคำสำคัญที่ไม่จำเป็น

ทุกคนสามารถเห็นภาพโดยไม่ต้องมอง

ดังนั้น การอธิบายเป็นสิ่งที่คุณให้ความสำคัญเป็นอันดับหนึ่ง

การหลีกเลี่ยงการบรรจุคำหลัก ก็มีความสำคัญเช่นกัน ฉันเน้นประเด็นนี้ไม่มากพอ เพราะการถูกลงโทษสำหรับข้อความแสดงแทนนั้นง่ายมาก

และอย่าใช้สำนวนที่ไม่จำเป็น เช่น “This is a picture of…” แน่นอนว่ามันเป็นรูปภาพ ทำไมมันถึงมีข้อความแสดงแทนล่ะ

เพื่อสรุป:

• อธิบายภาพโดยละเอียด

• หลีกเลี่ยงการใส่คำสำคัญ

• อย่าเขียนคำชี้แจงซ้ำซากเช่น “นี่คือรูปภาพของ…”

คุณจะเขียนคำอธิบายแทนรูปภาพด้านล่างอย่างไร

แหล่งรูปภาพสต็อก - https://unsplash.com/photos/eDXRq-2LfNM

รุ่นที่ดีน่าจะเป็น "ฟอร์ดมัสแตงสีดำทันสมัยที่จอดใกล้ต้นไม้ตอนพระอาทิตย์ตก"

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

ส่วนขยาย Alt Text Tester สำหรับ Chrome ก็ยอดเยี่ยมเช่นกัน

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

อย่าใส่ข้อความสำคัญในภาพ

นี่ไม่ใช่เทคนิคมากเท่ากับสามัญสำนึก

อย่างไรก็ตาม ผู้คนยังคงเข้าใจผิดอยู่ตลอดเวลา

ดังนั้นให้ฉันพูดให้ชัดเจน:

หากคุณต้องการอันดับสำหรับคำหลักหรือสื่อข้อความสำคัญ - เขียนเป็นข้อความ อย่าใส่ไว้ในภาพ

ลองดูตัวอย่างนี้:

แหล่งรูปภาพสต็อก - https://unsplash.com/photos/l8p1aWZqHvE

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

แต่วิธีการส่งข้อมูลนี้สามารถทำลาย SEO ของคุณได้

นี่คือเหตุผล:

Google ไม่เห็นและตีความข้อความนี้ หากคุณไม่ได้เขียนลงใน HTML คุณจะไม่ได้รับการจัดอันดับสำหรับคำหลักที่สำคัญ

ผู้ที่มีโปรแกรมอ่านหน้าจอจะพลาดทุกอย่างเช่นกัน

ยิ่งไปกว่านั้น ผู้เข้าชมไม่สามารถเน้นหรือคัดลอกข้อความได้ ซึ่งอาจสร้างความรำคาญได้มาก

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

ดังนั้น พูดให้เข้าใจง่าย อย่าวางข้อความสำคัญ เช่น คำหลัก SEO ไว้ในรูปภาพเท่านั้น อย่าลืมเขียนลงใน HTML

ใช้ข้อมูลที่มีโครงสร้างสำหรับผลิตภัณฑ์ วิดีโอ และสูตรอาหาร

ข้อมูลที่มีโครงสร้างคือโค้ดที่เขียนในรูปแบบเฉพาะที่ช่วยให้เครื่องมือค้นหาตีความได้ง่ายขึ้น

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

มาดูตัวอย่างกัน

ตรวจสอบว่า Google ให้บริการข้อมูลเล็กๆ น้อยๆ ใต้ภาพนี้อย่างไร:

ข้อมูลที่มีโครงสร้างทำให้สิ่งนี้เป็นไปได้

นี่คือลักษณะที่ปรากฏในโค้ดของหน้า:

อีกตัวอย่างหนึ่งคือหน้าสูตรของเราจากก่อนหน้านี้:

นั่นเป็นข้อมูลที่เป็นประโยชน์มากมายสำหรับผู้เยี่ยมชมก่อนที่จะคลิกลิงก์

และด้วยการรวมข้อมูลที่มีโครงสร้างกับเทคนิค SEO อื่นๆ สูตรนี้ครอง 2 อันดับแรกใน SERP:

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

คุณสามารถหาคำแนะนำและเคล็ดลับมากมายสำหรับการนำข้อมูลที่มีโครงสร้างไปใช้ทางออนไลน์

แต่ท้ายที่สุดแล้ว ไม่มีใครสามารถบอกคุณได้ว่าจะทำอย่างไรดีไปกว่า Google

ดังนั้น ให้ปฏิบัติตามหลักเกณฑ์อย่างเป็นทางการของ Google สำหรับ:

• การเพิ่มมาร์กอัปในหน้าผลิตภัณฑ์ ;

• การเพิ่มมาร์กอัปในหน้าวิดีโอ ;

• การเพิ่มมาร์กอัปให้กับสูตรอาหาร

สร้างแผนผังไซต์รูปภาพ

ไม่จำเป็นต้องมีแผนผังเว็บไซต์แบบรูปภาพ แต่สามารถช่วยเว็บไซต์ขนาดใหญ่ได้อย่างแน่นอน

แผนผังเว็บไซต์เหล่านี้ช่วยให้ Google ค้นหารูปภาพที่อาจพลาดไป

ตัวอย่างเช่น หากเว็บไซต์ของคุณเข้าถึงรูปภาพด้วย JavaScript Google อาจมีปัญหาในการค้นหาภาพหากไม่มีแผนผังเว็บไซต์สำหรับรูปภาพ

อีกครั้ง ให้ปฏิบัติตามหลักเกณฑ์อย่างเป็นทางการของ Google ในการสร้างแผนผังเว็บไซต์แบบรูปภาพ

นอกจากนี้ หากคุณเป็นผู้ใช้ WordPress มีปลั๊กอินแผนผังเว็บไซต์รูปภาพอยู่สองสามตัว ทดสอบดู - ง่ายกว่าการสร้างเอง

และด้วยเหตุนี้ เราจึงปิดท้ายด้วยเคล็ดลับการเพิ่มประสิทธิภาพ SEO และการเข้าถึงรูปภาพ

มาต่อกันที่ความเร็วและประสบการณ์ของผู้ใช้กัน

เทคนิคการเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บ: ความเร็วเว็บไซต์ & ประสบการณ์ผู้ใช้

คุณไม่สามารถมีเว็บไซต์ที่รวดเร็วพร้อมรูปภาพที่ไม่ได้ปรับให้เหมาะสมได้

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

ต่อไปนี้คือตัวอย่างบางส่วนของพลังของความเร็วหน้าเว็บ:

• ในปี 2555 Walmart ลดเวลาในการโหลดเว็บไซต์ลง 1 วินาที และพบว่ามี Conversion เพิ่มขึ้น 2%

• ในปี 2017 Zitmaxx Wonnen ลดเวลาในการโหลดลงเหลือ 3 วินาที และเห็น Conversion อุปกรณ์เคลื่อนที่เพิ่มขึ้น 50% และรายได้จากอุปกรณ์เคลื่อนที่เพิ่มขึ้น 98.7%

• สุดท้ายนี้ ในปี 2020 NDTV ลดอัตราตีกลับลง 50% โดยปรับปรุง LCP และ CLS

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

แน่นอนว่าการเพิ่มประสิทธิภาพความเร็วเป็นมากกว่าแค่การปรับแต่งภาพ

แต่นี่คือนักเตะ:

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

แหล่งที่มา - สถานะของรูปภาพในคลัง HTTP

นั่นเป็นเหตุผลที่การเพิ่มประสิทธิภาพภาพของคุณเป็นชัยชนะที่ยิ่งใหญ่ของความเร็วเว็บไซต์

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

เพิ่มความเร็วเว็บไซต์ของคุณด้วย NitroPack - ไม่ต้องใช้ทักษะการเข้ารหัส

โดยที่ในใจเรามาเริ่มกันเลย

เลือกรูปแบบภาพที่เหมาะสม

รายการตรวจสอบด่วนสำหรับการเลือกรูปแบบภาพที่เหมาะสมมีดังนี้

• เมื่อคุณสามารถเสียสละคุณภาพเพื่อประสิทธิภาพได้ ให้ใช้ JPEG เครื่องมือเพิ่มประสิทธิภาพรูปภาพฟรี เช่น Optimizilla สามารถช่วยคุณปรับระดับการบีบอัด (เราจะพูดถึงการบีบอัดในอีกสักครู่) เพื่อทดสอบอัตราส่วนคุณภาพ/ขนาดต่างๆ

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

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

• สุดท้าย รูปแบบภาพยุคหน้าอย่าง WebP สามารถเพิ่มประสิทธิภาพให้ดียิ่งขึ้นไปอีก โดยไม่ลดทอนคุณภาพลงไปมากนัก จากข้อมูลของ Google รูปภาพ WebP มีขนาดเล็กกว่า PNG 26% และเล็กกว่า JPEG 25-34% ที่มีคุณภาพเทียบเท่า ข้อเสียเพียงอย่างเดียวคือรูปแบบ Next-gen (รวมถึง WebP) ไม่มีการรองรับเบราว์เซอร์ 100% สิ่งนี้ทำให้พวกเขาให้บริการได้ยากขึ้นเนื่องจากคุณต้องสำรองข้อมูลไว้สำหรับเบราว์เซอร์รุ่นเก่า

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

ลดขนาดไฟล์ภาพ

มีสองวิธีในการบีบอัดขนาดไฟล์ภาพ - การบีบอัดแบบสูญเสียและแบบไม่สูญเสีย

การบีบอัดภาพแบบ Lossy ช่วยขจัดข้อมูลพิกเซลบางส่วน การ บีบ อัดแบบไม่สูญเสียข้อมูล

อันที่จริง ความแตกต่างระหว่างรูปแบบรูปภาพที่เราเพิ่งพูดถึง (JPEG, PNG, WebP เป็นต้น) คือวิธีที่พวกเขาใช้การบีบอัดทั้งสองประเภทนี้

JPEG เป็นตัวอย่างคลาสสิกของประเภทภาพที่สูญเสีย PNG เป็นประเภทที่ไม่สูญเสีย และ WebP ใช้การบีบอัดทั้งแบบสูญเสียและไม่สูญเสีย

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

สำหรับตอนนี้ สิ่งสำคัญคือต้องรู้ว่าไม่มีระดับการบีบอัดที่ "ดี" หรือ "แย่" ทุกอย่างขึ้นอยู่กับเว็บไซต์ของคุณ

นี่คือสิ่งที่ฉันหมายถึง:

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

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

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

คุณจะไม่เห็นการลดขนาดไฟล์ใหญ่ แต่คุณจะรักษา คุณภาพที่น่าทึ่ง .

มีเครื่องมือบีบอัดรูปภาพมากมายที่คุณสามารถใช้ได้:

• สำหรับกลุ่มเทคนิคที่มากขึ้น Guetzli และ Imagemin สามารถทำงานที่ยอดเยี่ยมได้

• แม้แต่เครื่องมือออนไลน์ฟรี เช่น Compress JPEG, TinyJPG และ Optimizilla ก็สามารถให้ผลลัพธ์ที่ดีได้

• ที่ NitroPack เรายังนำเสนอคุณภาพของภาพที่ปรับได้ซึ่งเป็นส่วนหนึ่งของคุณสมบัติการปรับแต่งภาพของเรา
  

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

และไม่มีวิธีอื่นนอกจากการทดสอบ

เมื่อเร็วๆ นี้ เราได้เปิดตัวคุณลักษณะใหม่ที่ซับซ้อนซึ่งลดขนาดไฟล์ภาพของคุณได้ถึง 4 เท่า – Adaptive Image Sizing การเพิ่มประสิทธิภาพประเภทนี้กำหนดเป้าหมายรูปภาพทั้งหมดที่ระบุโดยองค์ประกอบมาร์กอัปสำหรับรูปภาพใน HTML (รวมถึงแกลเลอรี ภาพหมุน แถบเลื่อน รูปภาพครึ่งหน้าบน และครึ่งหน้าล่าง)

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

ใช้เครือข่ายการจัดส่งเนื้อหา (CDN)

การตั้งค่า CDN เป็นหนึ่งในสิ่งที่ดีที่สุดที่คุณสามารถทำได้สำหรับความเร็วไซต์โดยทั่วไป

นอกจากนี้ยังใช้กับการปรับภาพให้เหมาะสม

หากคุณไม่คุ้นเคยกับ CDN โปรดดูคู่มือ CDN สำหรับผู้เริ่มต้น สำหรับตอนนี้ ต่อไปนี้คือ TL;DR ฉบับย่อ:

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

ระยะทางนั้นยิ่งใหญ่มากจนเวลาแฝงหลีกเลี่ยงไม่ได้

CDN แก้ปัญหานี้

นี่คือวิธี:

CDN เก็บเวอร์ชันแคชของเว็บไซต์ของคุณไว้ใน ตำแหน่งทางภูมิศาสตร์ ต่างๆ

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

เช่นเดียวกับผู้เยี่ยมชมในอเมริกาใต้ แอฟริกา เอเชีย หรือที่อื่นๆ ที่ผู้ให้บริการ CDN มีเซิร์ฟเวอร์

นั่นคือพลังของ CDN ซึ่ง ช่วยลดระยะห่างระหว่างผู้เยี่ยมชมและเว็บไซต์ของคุณ

และเช่นเดียวกับส่วนอื่นๆ ของเว็บไซต์ของคุณ รูปภาพยังเข้าถึงผู้เยี่ยมชมได้เร็วกว่า

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

ให้บริการภาพที่ตอบสนอง

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

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

เว้นเสียแต่ว่ามันไม่ง่ายอย่างนั้น

หากรูปภาพของคุณกว้าง 700px อาจดูดีบนจอแสดงผลขนาด 300px แต่ยังต้องประมวลผลทั้งหมด 700px นั่นเป็นการสิ้นเปลืองแบนด์วิธอย่างมาก

ดังนั้นคุณจะรักษาภาพที่มีคุณภาพและไม่เปลืองแบนด์วิธได้อย่างไร?

ใช้แอตทริบิวต์ srcset

คุณลักษณะนี้ชี้เบราว์เซอร์ไปยังเวอร์ชันรูปภาพต่างๆ จากนั้นเบราว์เซอร์จะตัดสินใจว่าจะให้บริการใดตามอุปกรณ์

มาดูตัวอย่างกันอย่างรวดเร็ว

นี่คือโค้ด HTML มาตรฐานสำหรับการโหลดรูปภาพ:

โค้ดชิ้นนี้ใช้แอตทริบิวต์ src ซึ่งบอกเบราว์เซอร์ว่าจะหารูปภาพได้จากที่ใด

มาเพิ่ม srcset ให้กับมิกซ์:

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

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

เว็บไซต์ของ Airbnb ใช้แนวทางนี้:

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

ในการทำเช่นนั้น ให้ใช้ DevTools ของ Chrome

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

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

หมายเหตุสุดท้าย: WordPress (ตั้งแต่เวอร์ชัน 4.4) จะสร้างรูปภาพเวอร์ชันต่างๆ ของคุณโดยอัตโนมัติ นอกจากนี้ยังเพิ่มแอตทริบิวต์ srcset

หากคุณเป็นผู้ใช้ WordPress คุณจะต้องระบุขนาดรูปภาพที่เหมาะสมเท่านั้น

ลบภาพที่ไม่จำเป็น

นี่คือเคล็ดลับการเพิ่มประสิทธิภาพภาพที่ง่ายและถูกมองข้ามมากที่สุด

หากภาพไม่เพิ่มประสบการณ์ของผู้ใช้หรือไม่ช่วยอธิบายประเด็นของคุณ ภาพนั้นก็ไม่ควรอยู่ที่นั่น เรียบง่าย.

นี่คือสิ่งที่คุณสามารถทำได้:

• เปิดหน้าที่สำคัญที่สุดของคุณและคิดว่าพวกเขากำลังพยายามทำอะไรให้สำเร็จ

• เมื่อคุณอ่านไปเรื่อยๆ จะเห็นได้ชัดว่าภาพใดควรมีและภาพใดไม่ควร แต่อย่าเพิ่งเริ่มลบ

• ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่า การติดตาม ของคุณแล้ว จำนวนหน้าที่มีการเปิด อัตราตีกลับ การแปลง เวลาบนหน้า - สิ่งดีๆ ทั้งหมดนั้น

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

• ทดสอบทั้งสองเวอร์ชันเป็นเวลา สองสามสัปดาห์ และเลือกผู้ชนะ

และหากคุณต้องการเปรียบเทียบทั้งสองเวอร์ชันแบบเรียลไทม์ คุณสามารถใช้เครื่องมืออย่าง Google Optimize ได้

อย่าใช้ภาพสต็อกมากเกินไป

อย่าเข้าใจฉันผิด ฉันชอบของฟรีพอๆ กับผู้ชายคนต่อไป

และคนที่ให้ภาพคุณภาพสูงฟรีก็สมควรได้รับการยกย่อง

แต่…

รูปถ่ายหุ้นถูกใช้มากเกินไป พวกเขาดูไม่ดั้งเดิมเพราะไม่ใช่

ตัวอย่างเช่น คุณเคยเห็นคนเหล่านี้บ่อยแค่ไหนในบทความเกี่ยวกับการทำงานเป็นทีม การทำงานร่วมกัน หรือหัวข้อทั่วไปที่คล้ายกัน:

แหล่งรูปภาพสต็อก - https://unsplash.com/photos/Oalh2MojUuk

หรือภาพนี้ในเว็บขายคอร์สหรือบริการด้านกฎหมาย:

แหล่งรูปภาพสต็อก - https://unsplash.com/photos/5fNmWej4tAA

การค้นหาภาพย้อนกลับอย่างรวดเร็วสำหรับภาพถ่ายแรกจะส่งคืนผลลัพธ์ประมาณ 5800 รายการ

และประมาณ 13 500 สำหรับอันที่สอง

ใช่นั่นไม่ใช่ซุปเปอร์ดั้งเดิม แต่ถึงกระนั้น เรื่องนี้เป็นเรื่องใหญ่จริงๆ หรือ?

ใช่แล้ว.

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

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

ส่วนที่แย่ที่สุดคือพวกเขาแสดงความพยายามอย่างเต็มที่

ตอนนี้ ฉันทราบดีว่าไม่ใช่ทุกคนที่สามารถซื้อภาพถ่ายหรือการออกแบบระดับมืออาชีพได้ และฉันไม่ได้บอกว่าคุณไม่ควรใช้ภาพสต็อก คุณควร.

แต่ได้โปรดเป็นเชิงกลยุทธ์เกี่ยวกับเรื่องนี้

ฉันหมายถึงสามสิ่งโดยสิ่งนั้น:

• ประการแรก หากคุณต้องการภาพคนทำงานในสำนักงาน ให้ถ่ายรูป สำนักงานของคุณ สองสามภาพ ผู้เข้าชมของคุณจะประทับใจกับความถูกต้อง

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

• ประการที่สาม อย่าใช้ภาพสต็อกใน หน้าแรก หรือหน้าสำคัญอื่นๆ ติดต่อช่างภาพ/นักออกแบบอิสระและรับภาพที่กำหนดเองสักสองสามภาพ พวกมันไม่แพงขนาดนั้น

เคล็ดลับโบนัส: Lazy Load (เลื่อน) รูปภาพนอกจอ

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

อันที่จริง รูปภาพที่โหลดแบบ Lazy Loading สามารถเพิ่มความเร็วในการโหลดได้มากกว่าการเพิ่มประสิทธิภาพรูปภาพ!

นี่คือวิธีการทำงาน:

การโหลดภาพนอกจอแบบ Lazy Loading (หรือเลื่อนเวลา) หมายถึงการใช้ชุดเทคนิคในการ โหลดเฉพาะภาพที่ผู้เยี่ยมชมกำลังดูอยู่

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

นอกจากนี้ เวลาในการโหลดหน้าแรกยังเร็วกว่ามาก เนื่องจากเบราว์เซอร์ต้องประมวลผลทรัพยากรน้อยลงในคราวเดียว

นี่คือตัวอย่างการทำงานของการโหลดแบบ Lazy Loading:

อย่างที่คุณเห็น รูปภาพครึ่งหน้าล่างส่วนใหญ่จะถูกโหลดเมื่อผู้ใช้เลื่อนหน้าลง ไม่ใช่เมื่อไปถึง

ขณะนี้ มีหลายวิธีในการใช้เทคนิคนี้:

• คุณสามารถลองใช้การโหลดแบบเนทีฟแบบเนทีฟโดยใช้แอตทริบิวต์การ โหลด ที่มีค่า lazy วิธีนี้ค่อนข้างง่าย แต่ไม่มีการสนับสนุนเบราว์เซอร์

• คุณสามารถใช้ Intersection Observer เพื่อลงทะเบียนว่าภาพใดควรโหลดแบบ Lazy Loading วิธีนี้ต้องเขียน JavaScript เล็กน้อย คุณสามารถดูตัวอย่างการใช้งาน Intersection Observer ได้ที่นี่

• คุณยังสามารถทำให้กระบวนการเป็นอัตโนมัติด้วย NitroPack บริการของเราขี้เกียจโหลดภาพทั้งหมด (รวมถึงภาพพื้นหลัง)

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

การเพิ่มประสิทธิภาพรูปภาพด้วยปลั๊กอินและบริการของ WordPress

โดยปกติ การเพิ่มประสิทธิภาพส่วนใหญ่ที่กล่าวถึงในที่นี้ไม่ได้เกิดขึ้นด้วยมือ โดยเฉพาะบนไซต์ WordPress

หากคุณมีไซต์ WordPress มีโอกาสที่คุณจะใช้ปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพ หากคุณยังไม่มี ฉันจะไม่แสดงรายการปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพที่นี่ เนื่องจากมีตัวเลือกมากเกินไป

แต่ฉันจะเน้นเฉพาะปัจจัยสำคัญเพียงอย่างเดียวที่ควรพิจารณาเมื่อเลือกปลั๊กอินเพิ่มประสิทธิภาพรูปภาพ:

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

ตัวอย่างเช่น ปลั๊กอินการเพิ่มประสิทธิภาพรูปภาพที่ทำงานบนเซิร์ฟเวอร์เดียวกันกับ CMS อาจต้องใช้เวลา CPU เพิ่มเติมในการปรับขนาดและบีบอัดรูปภาพ ในทางกลับกัน บริการบนคลาวด์ (เช่น NitroPack) ช่วยคุณได้มากโดยการปรับรูปภาพในระบบคลาวด์ให้เหมาะสมและนำเสนอผ่าน CDN

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

การเพิ่มประสิทธิภาพรูปภาพและ Core Web Vitals ของ Google

หากคุณสนใจเกี่ยวกับ SEO คุณอาจสนใจ Core Web Vitals ด้วยเช่นกัน

Core Web Vitals สองในสาม - Largest Contentful Paint (LCP) และ Cumulative Layout Shift (CLS) - สามารถได้รับผลกระทบอย่างมากจากการเพิ่มประสิทธิภาพภาพ

นี่คือเหตุผล:

• LCP วัดระยะเวลาที่ใช้สำหรับองค์ประกอบครึ่งหน้าบนที่ใหญ่ที่สุดจึงจะปรากฏบนหน้า องค์ประกอบนั้นมักจะเป็นรูปภาพ หากรูปภาพไม่ได้รับการปรับให้เหมาะสมและจัดส่งอย่างรวดเร็ว LCP จะได้รับผลกระทบ ซึ่งอาจส่งผลให้ประสิทธิภาพ Core Web Vitals ต่ำ

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

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

อย่างไรก็ตาม ข้อควรระวังในการโหลดแบบ Lazy Loading:

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

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

มีหลายวิธีในการโหลดรูปภาพแบบสันหลังยาวและสำรองพื้นที่สำหรับรูปภาพเหล่านั้น สำหรับรายละเอียดเพิ่มเติม โปรดดูบทความเกี่ยวกับการเลื่อนภาพนอกจอ

ความคิดสุดท้าย

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

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

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

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

ตัวอย่างเช่น NitroPack ทำอะไรให้คุณได้บ้าง:

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

• การแปลง WebP สำหรับเบราว์เซอร์ทั้งหมดที่ให้การสนับสนุน WebP NitroPack จะให้บริการรูปภาพของคุณในเวอร์ชัน WebP

• การปรับขนาดภาพชั่วคราว NitroPack แก้ปัญหาแอตทริบิวต์ width และ height หายไปโดยไม่ต้องเพิ่ม สิ่งนี้จะเพิ่มความเร็วในการเรนเดอร์และลดการเปลี่ยนเลย์เอาต์

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

• NitroPack ยังมาพร้อมกับ CDN ในตัว และขี้เกียจโหลดรูปภาพ วิดีโอ และ iFrames ทั้งหมดโดยอัตโนมัติ

สุดท้าย NitroPack มีทุกสิ่งที่คุณต้องการสำหรับเว็บไซต์ที่รวดเร็ว

หากคุณต้องการทดสอบคุณสมบัติทั้งหมดเหล่านี้ ลงชื่อสมัครใช้แผน NitroPack ฟรีวันนี้ (ไม่ต้องใช้บัตรเครดิต)