การปรับรูปภาพให้เหมาะสมสำหรับเว็บ: คู่มือปฏิบัติ

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

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

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

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

พร้อมที่จะปรับแต่งภาพของคุณแล้วหรือยัง?

ตัวเลือกประเภทไฟล์รูปภาพ

มีไฟล์หลักสามประเภทที่เราจะต้องเน้นในการบันทึกภาพที่ปรับให้เหมาะสมสำหรับเว็บ: GIF, JPG และ PNG ไฟล์แต่ละประเภทมีจุดแข็งและจุดอ่อนของตัวเอง และเป็นสิ่งสำคัญมากที่จะต้องทราบและคำนึงถึงสิ่งเหล่านี้เมื่อบันทึกภาพ

การทำงานกับ JPGs

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

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

การทำงานกับ PNGs

PNG เป็นรูปแบบไฟล์ออนไลน์ยอดนิยมอีกรูปแบบหนึ่ง ใน Adobe Photoshop คุณจะมีตัวเลือกในการบันทึก PNG เป็น PNG-8 หรือ PNG-24

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

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

การทำงานกับ GIFs

GIF เป็นที่นิยมมากขึ้นเมื่อหลายปีก่อน แต่ยังคงเป็นตัวเลือกสำหรับภาพขนาดเล็กที่ต้องการสีเพียงไม่กี่สี เช่นเดียวกับ PNG-8 ไฟล์ GIF ถูกจำกัดไว้เพียง 256 สีเท่านั้น ด้วยเหตุนี้จึงไม่ควรใช้ GIF สำหรับรูปภาพผลิตภัณฑ์

การบันทึกภาพอย่างถูกต้อง

อย่างที่คาดไว้ รูปภาพขนาดใหญ่ใช้เวลาในการโหลดนานขึ้น เมื่อเราพูดว่าขนาดใหญ่ เราหมายถึงขนาดไฟล์มากกว่าขนาดของรูปภาพ เช่น ค่าในหน่วย KB, MB, GB เป็นต้น โดยมองว่าผู้ใช้ 47% คาดหวังว่าหน้าเว็บจะโหลดได้ภายใน 2 วินาที และ 40 % จะละทิ้งหน้าที่ใช้เวลาในการโหลดมากกว่า 3 วินาที สิ่งสำคัญคือรูปภาพของคุณมีขนาดเล็กพอที่จะทำให้ไซต์มีความรวดเร็ว

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

บันทึกขนาดที่เหมาะสม

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

บันทึกรูปภาพสำหรับเว็บ

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

บีบอัดรูปภาพสำหรับเว็บ

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

แอพและบริการบีบอัดรูปภาพ

• ImageOptim
• ShortPixel
• TinyJPG
• TinyPNG
• Compressor.io
• คราเคน
• ImageOptimizer
• Crush Pics (แอป Shopify)
• ตัวย่อ (แอป Shopify)

การบันทึกภาพสำหรับเว็บ: ตัวอย่างการใช้งาน

ในการเริ่มต้น สมมติว่าเราเป็น Stiff Salt (ที่จริงแล้วเป็นของเพื่อนและนักพัฒนาของ Shopify) และเราต้องการเปลี่ยนภาพคุณลักษณะในร้านค้าออนไลน์ของเรา

เราจัดฉาก ทำให้เกลือของเราดูน่าทึ่ง และเราถ่ายภาพด้วยกล้อง DSLR เยี่ยมมากเรามีรูปถ่ายของเรา อะไรสวย!

แต่... ขนาดไฟล์ใหญ่มาก! 14.6 MB เป็นที่แน่นอน และขนาดของภาพถ่ายคือ 5184 × 3456 พิกเซล นี้ใช้ไม่ได้อย่างสมบูรณ์ในขณะนี้ มันใหญ่พอที่จะพิมพ์โปสเตอร์ขนาดเท่าภาพยนตร์ได้ ที่ 14.6 MB รูปภาพนี้จะใช้เวลาในการโหลดบนคอมพิวเตอร์ของผู้เยี่ยมชมอย่างมาก นี้ไม่ดี

ถึงเวลาทำงานและลดขนาดภาพและขนาดไฟล์ลงอย่างมาก

จำไว้ว่าเรากำลังจะทำสามสิ่งกับภาพ

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

ลดขนาดภาพ

ขึ้นอยู่กับโปรแกรมที่คุณตัดสินใจใช้และความชอบส่วนตัว คุณสามารถ:

• ลดขนาดภาพก่อนบันทึก
• ลดขนาดภาพขณะบันทึกภาพ
• บันทึกภาพแล้วลดขนาดภาพ

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

หากต้องการทราบขนาด เราดูที่ขนาดรูปภาพในหน้าแรกที่แนะนำของธีม ขนาด 1600 x 800 พิกเซล (จำเดิมคือ 5184 × 3456 พิกเซล)

ใน Photoshop เราจะเลือก Image > Image Size

ตกลง เราได้ลดขนาด (ขนาด) ของรูปภาพให้เป็นสิ่งที่เหมาะสมกว่าและแนะนำโดยผู้พัฒนาธีม

บันทึกภาพอย่างเหมาะสม (บันทึกสำหรับเว็บ)

ใน Photoshop มีคำสั่งเฉพาะที่เรียกว่า “บันทึกสำหรับเว็บ” ที่ปรับไฟล์รูปภาพให้เหมาะสมสำหรับการแสดงออนไลน์ นี่เป็นสิ่งสำคัญเนื่องจากคำสั่ง "บันทึก" ปกติอาจทำให้ไฟล์มีขนาดใหญ่กว่าคำสั่ง "บันทึกสำหรับเว็บ" ถึง 2-3 เท่า

ในกล่อง "บันทึกสำหรับเว็บ" เราจำเป็นต้องทำการเลือกสองสามอย่าง

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

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

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

• สูงสุด: 1.38 MB
• สูงมาก: 611 KB
• สูง: 339 KB
• กลาง: 152 KB
• ต่ำ: 86k

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

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

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

บีบอัดรูปภาพสำหรับเว็บ

หากคุณใช้ Adobe Photoshop จะช่วยลดขนาดภาพได้ดีเยี่ยม อย่างไรก็ตาม คุณยังสามารถลดขนาดภาพได้อีก 5-10% โดยใช้แอปบีบอัด เช่น ImageOptim และ/หรือ ShortPixel

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

การลบไฟล์แต่ละไฟล์จากขั้นตอนก่อนหน้าลงใน ImageOptim เราสามารถลดขนาดรูปภาพได้อีก 5% ไม่ใหญ่มาก แต่อีกครั้ง สิ่งเหล่านี้ได้รับการปรับให้เหมาะสมกับ Photoshop แล้ว ทุก KB มีค่า

บทสรุป

โดยสรุป ภาพถ่ายของเรามีขนาดใหญ่มากเมื่อเราเริ่มต้น อย่างไรก็ตาม ด้วยขั้นตอนง่ายๆ ไม่กี่ขั้นตอน เราลดขนาดภาพถ่ายจาก 5184 × 3456 เป็น 1600 x 800 เพื่อให้พอดีกับหน้าแรกของเราและในขณะเดียวกันก็ถ่าย จากคอมพิวเตอร์ที่ล่ม 14.4MB ลงไปที่ 336KB ที่สมเหตุสมผลมากขึ้น

การบันทึกรูปภาพอย่างเหมาะสมสำหรับเว็บเป็นขั้นตอนสำคัญในการเรียนรู้แต่เนิ่นๆ และนำไปปฏิบัติอย่างเคร่งครัด แม้ว่าคุณจะประหยัดได้เพียง 10-20% สำหรับแต่ละภาพ เมื่อเวลาผ่านไป เมื่อร้านค้าและเว็บไซต์ของคุณเติบโตขึ้น ทุกๆ KB เพียงเล็กน้อยก็สามารถช่วยประหยัดค่าใช้จ่ายได้มาก ซึ่งจะนำไปสู่ประสบการณ์โดยรวมที่น่าพึงพอใจยิ่งขึ้นสำหรับผู้เยี่ยมชม ลูกค้า และ Google.

วิธีปรับรูปภาพให้เหมาะสมสำหรับเว็บ: คำแนะนำแบบวิดีโอ