หลักสูตรความเร็วเว็บไซต์ขั้นสูงสุด

บทที่ 2: การปรับภาพให้เหมาะสม

R&R barbeque ออกแบบเว็บไซต์จำลองด้วยคอมพิวเตอร์ - Big Red Jelly สร้างแบรนด์และสร้าง

รูปภาพ: สร้างหรือทำลาย

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

ฉันจะรู้ได้อย่างไรว่ารูปภาพของฉันใหญ่เกินไป?

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

หากคุณมีรูปภาพที่มีขนาดใหญ่กว่า 300 kb รูปภาพจะทำให้เว็บไซต์ของคุณช้าลง

รูปภาพฮอตสปอตพอร์ตโฟลิโอของ Clark และCovét

สองวิธีที่คุณสามารถใช้เพื่อปรับแต่งภาพของคุณ

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

แล็ปท็อปที่แสดงเว็บไซต์เกี่ยวกับ ZEALS Chat Commerce ซึ่งประกอบด้วยโลโก้ของบริษัทพันธมิตร อินเทอร์เฟซการแชทของลูกค้า และหัวข้อข่าวที่ส่งเสริมประสบการณ์และประสิทธิภาพที่ดีขึ้นของลูกค้า

ขั้นตอนที่ 1: ปรับขนาด

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

คุณสามารถใช้ Canva.com หรือ Photoshop เพื่อปรับขนาดรูปภาพของคุณได้อย่างง่ายดาย

หากคุณไม่แน่ใจว่ารูปภาพของคุณควรมีขนาดเท่าใด ให้ปฏิบัติตามหลักเกณฑ์ทั่วไปเหล่านี้:

  • รูปภาพที่ขยายเต็มความกว้างของเว็บไซต์ของคุณ: กว้างไม่เกิน 1600 พิกเซล ขนาดไฟล์ไม่เกิน 400 KB.
  • รูปภาพที่ครอบคลุมความกว้างของเว็บไซต์ของคุณ: กว้างไม่เกิน 800 พิกเซล ขนาดไฟล์ไม่เกิน 200 KB.
  • รูปภาพที่มีความกว้าง 1/4 ของเว็บไซต์ของคุณ: กว้างไม่เกิน 400 พิกเซล ขนาดไฟล์ไม่เกิน 100 KB.

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

ขั้นตอนที่ 2: ประเภทไฟล์

รูปภาพสองรูปอาจมีขนาดเท่ากัน แต่ถ้ารูปหนึ่งเป็น JPG และอีกรูปเป็น PNG รูปภาพเหล่านั้นจะมีขนาดไฟล์ต่างกัน

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

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

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

ขั้นตอนที่ 3: บีบอัด

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

Shrink.media สามารถใช้บีบอัดและปรับขนาดภาพได้ในขั้นตอนเดียว