คุณไม่ชอบรูปภาพใช่ไหม

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

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

แต่หากคุณไม่ระวัง รูปภาพอาจมีขนาดเกินครึ่ง (หรือมากกว่า) ของขนาดหน้าเว็บทั้งหมดของคุณ เมื่อไม่กี่ปีที่ผ่านมา ขนาดเฉลี่ยของหน้าเว็บคือ 600–700K ตอนนี้ ค่าเฉลี่ยอยู่ที่ 2MB และเพิ่มขึ้นทุกปี

ใหญ่มาก!

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

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

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

เหตุใดคุณจึงต้องเพิ่มประสิทธิภาพรูปภาพ

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

การศึกษาแสดงให้เห็นว่ามากถึง 40% ของ ผู้เข้าชมคลิกปุ่มย้อนกลับหากไซต์ใช้เวลาในการโหลดนานกว่าสามวินาที

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

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

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

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

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

ข้อมูลเบื้องต้นเกี่ยวกับการปรับแต่งรูปภาพ

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

มาดูรายละเอียดแต่ละด้านกัน

ประเภทไฟล์

รูปภาพบนเว็บมักถูกบันทึกในรูปแบบไฟล์ PNG หรือ JPEG – หรือ GIF สำหรับภาพเคลื่อนไหว ใครไม่ชอบ GIF เคลื่อนไหวสุดฮาที่ลอยอยู่ทั่วเว็บ!

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

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

เหตุใดจึงมีรูปแบบที่แตกต่างกัน ?

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

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

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

ขนาดรูปภาพ

คุณเคยโหลดหน้าเว็บแล้วสังเกตเห็นว่ารูปภาพขนาดเล็ก (เช่น เฮดช็อต เป็นต้น) ใช้เวลาดาวน์โหลด f-o-r-e-v-e-r หรือไม่ ชอบช้ามากคุณจะเห็นแต่ละบรรทัดเข้ามา? คุณคิดกับตัวเองว่าภาพขนาดเล็กเช่นนี้จะใช้เวลาในการดาวน์โหลดนานได้อย่างไร

และเมื่อเกิดขึ้นกับภาพส่วนหัวขนาดใหญ่ ก็จะแย่ยิ่งกว่านั้นเพราะอาจทำให้การโหลดทั้งหน้าหยุดชะงักได้

สาเหตุนี้เกิดขึ้นเนื่องจาก Blogger ไม่ได้ปรับขนาดและปรับแต่งรูปภาพอย่างเหมาะสม และในกรณีของตัวอย่างภาพศีรษะของเรา อาจอัปโหลด JPEG แบบเต็มความละเอียดโดยตรงจากกล้อง DSLR ของเขาหรือเธอ

และนั่นเป็นไฟล์ขนาดใหญ่มาก!

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

ขณะนี้แพลตฟอร์มการเผยแพร่ทางเว็บบางแห่งจะสร้างรูปแบบต่างๆ ของภาพความละเอียดเต็มของคุณโดยอัตโนมัติในรูปแบบต่างๆ แต่ถ้าไม่เป็นเช่นนั้น คุณควรปรับขนาดรูปภาพของคุณล่วงหน้าในโปรแกรมแก้ไขรูปภาพ เช่น Photoshop, Lightroom, Pixlr หรือแม้แต่ MS Paint อาจหมายถึงความแตกต่างระหว่างไฟล์ 50K กับ 5MB หนึ่งไฟล์

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

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

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

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

การแสดงรูปภาพของคุณ

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

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

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

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

ตัวช่วยสร้างบล็อกใช้ Sucuri (รวมถึงไฟร์วอลล์เพื่อความปลอดภัยและ CDN) แต่ก็มีผู้ให้บริการคุณภาพรายอื่นๆ เช่น Cloudfront ของ Amazon หรือ KeyCDN แม้แต่ CloudFlare ที่ได้รับความนิยมซึ่งไม่ใช่ CDN เพียงอย่างเดียว ก็เสนอ CDN ฟรีและตั้งค่าได้ง่ายในแพ็คเกจโฮสติ้งที่ใช้ร่วมกันส่วนใหญ่

การบีบอัดภาพ

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

เครื่องมือแก้ไขภาพส่วนใหญ่ เช่น Visme หรือ Photoshop จะบันทึกไฟล์โดยใช้การบีบอัด JPEG แบบ Lossy เนื่องจากมีการลดขนาดไฟล์ที่ดีที่สุด ดังนั้น ในขณะที่คุณภาพของภาพลดลงเล็กน้อย การใช้การบีบอัดภาพแบบสูญเสียจะลดขนาดภาพขนาดใหญ่ให้มีขนาดที่เหมาะกับเว็บ

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

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

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

เครื่องมือเดสก์ท็อป

ImageAlpha / ImageOptim

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

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

ImageAlpha เป็นคอมเพรสเซอร์ PNG ที่ไม่สูญเสียข้อมูล และสามารถทำสิ่งมหัศจรรย์ในการย่อขนาดไฟล์ PNG ในขณะที่ ImageOptim ดำเนินการบีบอัดขั้นสูงแบบไม่สูญเสียข้อมูล (พร้อมตัวเลือกการสูญเสีย) และมัน ตัดข้อมูลเมตาที่ไม่จำเป็นออกจากไฟล์ PNG, JPEG และ GIF

สำหรับภาพ PNG ของฉัน ฉันเรียกใช้ภาพเหล่านั้นผ่าน ImageAlpha ก่อน:

ที่นี่ มันลดภาพหน้าจอจาก 103K เป็น 28K

จากนั้นฉันรันผ่าน ImageOptim และประหยัดได้อีก 10%

JPEGmini

สำหรับไฟล์ JPEG ฉันปรับให้เหมาะสมด้วยแอป JPEGmini บนเดสก์ท็อปที่มีให้ สำหรับทั้ง Mac และ Windows

รุ่น Lite ให้คุณปรับแต่งภาพได้ฟรีสูงสุด 20 ภาพต่อวัน และมีค่าใช้จ่าย $19.99 เพื่อลบขีดจำกัด

เคล็ดลับสำหรับมือโปร : ผู้ใช้ขั้นสูงที่ต้องการรวม JPEGmini เข้ากับ Photoshop หรือ Lightroom โดยใช้ปลั๊กอินสามารถซื้อรุ่น Pro ได้$99.99

เครื่องมือออนไลน์ / คลาวด์ / SaaS

TinyPNG

หากคุณกำลังมองหาเครื่องมือบีบอัดรูปภาพออนไลน์คุณภาพสูง TinyPNG (จะปรับ JPEG ให้ดีที่สุด แม้ว่าจะมีชื่อก็ตาม) เป็นเว็บแอปที่ให้คุณลากรูปภาพได้สูงสุด 20 5MB หรือเล็กกว่าลงในเบราว์เซอร์ของคุณ และปรับให้เหมาะสมทั้งหมดในคราวเดียว

พวกเขายังมี API สำหรับนักพัฒนาและสร้าง WordPress มีปลั๊กอินที่สามารถเพิ่มประสิทธิภาพรูปภาพของคุณโดยอัตโนมัติเมื่ออัปโหลด

TinyPNG ให้คุณปรับแต่งรูปภาพได้ฟรี 500 ครั้งต่อเดือน และหลังจากนั้นจะคิดค่าบริการตั้งแต่ 0.002–0.009 ดอลลาร์ต่อภาพ ขึ้นอยู่กับปริมาณ

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

EWWW Image Optimizer

หากคุณไม่พร้อมที่จะจ่ายเงิน และไม่ต้องการถูกรบกวนกับการเพิ่มประสิทธิภาพ รูปภาพของคุณด้วยตนเอง ปลั๊กอิน EWWW Image Optimizer ฟรีสำหรับ WordPress สามารถเพิ่มประสิทธิภาพรูปภาพที่คุณอัปโหลดได้โดยอัตโนมัติ

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

หมายเหตุ: ดูสรุปทั้งหมดได้ที่โพสต์ของเราเกี่ยวกับเครื่องมือบีบอัดรูปภาพ

สรุปข้อมูล

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

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

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

ถัดไป ใช้ประโยชน์จากการบีบอัดรูปภาพสมัยใหม่ด้วยแอปเดสก์ท็อป เช่น JPEGmini หรือเครื่องมือระบบคลาวด์ เช่น TinyPNG หรือ Kraken – หากเป็นไปได้ ให้ผสานรวมเข้ากับ WordPress ด้วยปลั๊กอิน

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

การอ่านที่เกี่ยวข้อง: 7 วิธีในการลดขนาด ขนาดของไฟล์ PDF