การทำงานกับธีม wordpress ฉันได้ทำการดัดแปลงไฟล์รูปภาพบางไฟล์แล้วสังเกตว่าบางครั้งเวอร์ชั่นที่แก้ไขของฉันนั้นใหญ่กว่าต้นฉบับ 3-4 เท่า (บันทึกโดยใช้รูปแบบเดียวกัน) ฉันไม่ต้องการลดคุณภาพ - มีวิธีใดบ้างในการทำให้ขนาดไฟล์เล็กลงเพื่อให้โหลดได้เร็วขึ้น
ตัวอย่างเช่นตอนนี้ฉันใช้ Photoshop และตั้งแถบเลื่อนคุณภาพของภาพเป็น '8' (จาก 10)
คำตอบ:
Smashing นิตยสารได้ 2 บทความที่ดีในPNG การเพิ่มประสิทธิภาพและการเพิ่มประสิทธิภาพ JPG
เป็นเชิงลึกอธิบายรายละเอียดที่ดีบางสิ่งที่คุณอาจไม่ทราบเกี่ยวกับรูปแบบและการใช้งาน ตัวอย่างเช่นบทความ JPEG: "โปรดทราบว่าเมื่อคุณตั้งค่าคุณภาพต่ำกว่า 50 ใน Photoshop นั้นจะเรียกใช้อัลกอริทึมการเพิ่มประสิทธิภาพเพิ่มเติมที่เรียกว่าการสุ่มสีลงซึ่งเฉลี่ยสีในบล็อกแปดพิกเซลที่อยู่ใกล้เคียง"
บทความทั้งสองนี้ใช้เทคนิคเฉพาะที่คุณสามารถใช้ใน Photoshop เพื่อเตรียมไฟล์ของคุณสำหรับการบีบอัดที่มากขึ้น ซึ่งมีประสิทธิภาพมากกว่าเทคนิคที่ใช้หลังจากบันทึกไฟล์
หลังจากที่คุณบันทึกไฟล์เหล่านี้หรือในไฟล์คุณไม่โชคดีพอที่มีไฟล์ต้นฉบับแบบเลเยอร์สำหรับปรับแต่งใน Photoshop มีการบีบอัดเพิ่มเติมเพื่อบีบไฟล์เหล่านี้ออกไป
ผมใช้แอปพลิเค Mac เรียกImageOptim จากเว็บไซต์ของพวกเขา:
ImageOptim ปรับภาพให้เหมาะสม - ดังนั้นจึงใช้เนื้อที่ดิสก์น้อยลงและโหลดเร็วขึ้น - โดยการค้นหาพารามิเตอร์การบีบอัดที่ดีที่สุดและโดยการลบความคิดเห็นที่ไม่จำเป็นและโปรไฟล์สี มันจัดการภาพเคลื่อนไหว PNG, JPEG และ GIF
ImageOptim ให้ GUI สำหรับการเพิ่มประสิทธิภาพเครื่องมือต่างๆ: AdvPNGจาก AdvanceCOMP, OptiPNG , pngcrush , JpegOptim , jpegtran จาก libjpeg, gifsicleและเลือกPNGOUT
มันยอดเยี่ยมสำหรับการเผยแพร่รูปภาพบนเว็บ (ย่อขนาดรูปภาพที่บันทึกไว้สำหรับเว็บใน Photoshop) และยังมีประโยชน์ในการทำให้แอปพลิเคชัน Mac และ iPhone มีขนาดเล็กลง
เค้กชิ้น ลากรูปภาพของคุณ (หรือโฟลเดอร์รูปภาพ) ไปที่หน้าต่างมันทำงานผ่านเครื่องมือเหล่านี้ทั้งหมดในการปรับแต่งรูปแบบการบีบอัดและลบ meta-data และข้อมูลโปรไฟล์สีที่ไม่จำเป็น (ซึ่งยังไม่รองรับอย่างกว้างขวาง - คุณควรแก้ไขโปรไฟล์สีก่อน ไม่บันทึกและฝังไว้)
เครื่องมือทั้งหมดที่เชื่อมโยงในใบเสนอราคานั้นมีรุ่น Windows / Linux / Mac ยกเว้น PNGOUT แต่ก็มีบางคนที่ส่งพอร์ตPNGOUTไปยัง OS X และ linux เพราะพวกเขาคิดมาก หากคุณเลือกที่จะใช้ ImageOptim มันจะรวมทั้งหมดยกเว้น PNGOUT ในแอปดังนั้นคว้าพอร์ต PNGOUT แล้ววางลงใน / usr / local / bin (หรือที่ใดก็ได้) แล้วบอก ImageOptim ว่ามันอยู่ที่ไหน
ไม่ใช่เรื่องแปลกสำหรับฉันโดยเฉพาะอย่างยิ่งกับรูปภาพ PNG เพื่อดูขนาดไฟล์ที่ลดลงกว่า 30% แม้หลังจากบันทึกผ่าน "Save For Web & Devices" ของ Photoshop
Protip: หลังจากเรียกใช้การปรับให้เหมาะสมแล้วเรียงลำดับตามคอลัมน์ไอคอนทางด้านซ้ายและเลือกแถวทั้งหมดที่มีไอคอน (X) - ไฟล์ที่ไม่ได้ลดลงอีก ลบภาพเหล่านั้นออกจากรายการและรันภาพทั้งหมดที่มีไอคอนเครื่องหมายถูก ฉันเกือบจะสัญญากับคุณว่าคุณจะมีภาพที่ยังคงสูญเสียขนาดไฟล์ ทำซ้ำการเรียงลำดับการเลือกการเอาออกทำใหม่จนกว่าคุณจะได้รับไอคอน (X) ทั้งหมดและเรียกมันต่อวัน
เมื่อบันทึกภาพใน Photoshop File > Save for Web and Devicesผมขอแนะนำให้ใช้ มันจะช่วยให้คุณเล่นกับระดับการบีบอัดและดูผลภาพในเวลาจริง ในภาพถ่ายคุณสามารถบันทึกได้ต่ำกว่าระดับ 8 และยังได้ผลลัพธ์ที่ยอดเยี่ยม
สำหรับภาพ PNG คุณสามารถลดจำนวนสีในตารางสีและบันทึกเป็น PNG ที่จัดทำดัชนี ตัวอย่างเช่นพิจารณาโลโก้ที่มีขนาด 128x128 พิกเซล (ไม่บีบอัด) ลองจินตนาการว่ามีเพียง 16 สีที่ใช้จริง
คุณสามารถเห็นได้ว่าโดยไม่ลดคุณภาพของภาพ (ใช้ได้กับรูปภาพบางประเภทเท่านั้น) คุณสามารถลดขนาดลงได้อย่างมาก
สำหรับปุ่มและไอคอนไซต์คุณยังสามารถพิจารณารวมเป็นภาพเดียวและใช้ CSS หรือ JavaScript เพื่อควบคุมการแสดงผล (สไปรต์) สิ่งนี้จะบันทึกจำนวนคำขอ HTTP ที่สร้างขึ้นสำหรับแต่ละภาพ
ลองรูปแบบอื่น ๆ
โดยทั่วไปให้ลองบันทึกภาพของคุณในรูปแบบที่แตกต่างกันแล้วดูขนาดไฟล์
หากคุณใช้ JPEG คุณควรจะสามารถปรับคุณภาพของภาพขึ้นและลงในโปรแกรมแก้ไขกราฟิกเช่น paint.net โดยทั่วไปคุณภาพของรูปภาพ 50% นั้นดีพอสำหรับเว็บและทำให้รูปภาพมีขนาดเล็กลงมาก
ด้วย PNG คุณไม่สามารถทำได้ แต่น่าสังเกตว่าบางครั้ง PNG นั้นใหญ่กว่าและบางครั้งก็เล็กกว่า JPEG มาก PNG นั้นเล็กกว่ามากสำหรับภาพขาวดำเช่นภาพวาดเส้นขาวดำ
คำแนะนำในวันนี้คือการใช้ CSS sprites เพื่อเร่งความเร็วในการโหลดโดยลดการร้องขอ แต่คุณต้องดูขนาดภาพที่คุณได้รับอีกครั้ง อาจเป็นไปได้ว่า CSS sprite อิมเมจจะใหญ่กว่าอิมเมจคอมโพเนนต์มากตัวอย่างเช่นถ้าคุณรวม PNG ขาวดำกับสีเดียว
คุณต้องการให้แน่ใจว่าคุณได้ดึงข้อมูล EXIF ทั้งหมดออกมา - สิ่งเหล่านี้เกือบทั้งหมดไม่เกี่ยวข้องกับผู้ใช้บนเว็บพวกเขาจำเป็นต้องรู้จริงๆหรือไม่ว่าคุณใช้ Canon 5D เพื่อถ่ายภาพและคุณใช้ F-Stop 2.8 เปิดรับ 0.5 วินาทีด้วย ISO 160 ไม่มีอคติการรับแสงและความยาวโฟกัส 9 มม?
ข้อมูลเมตาทั้งหมดนี้เพิ่มน้ำหนักให้กับภาพของคุณและโดยทั่วไปควรจะแยกออก
เมื่อjessegavinชี้ให้เห็นแอปรูปภาพส่วนใหญ่จะแสดงตัวอย่างของเอฟเฟกต์การบีบอัด - ใช้พวกมันเนื่องจากการตั้งค่าแบบครอบคลุมของ "8" นั้นแทบจะไม่ทำให้คุณได้รับการแลกเปลี่ยนที่ดีที่สุด
สุดท้ายปลั๊กอินของ Google Page Speed Firefox / Firebugสามารถช่วยให้คุณมีความคิดที่ดีว่าคุณสามารถลดขนาดภาพได้อย่างไร (รวมถึงการอนุญาตให้คุณดูและบันทึกเวอร์ชันที่เล็กกว่า)
เมื่อคุณทำตามคำแนะนำอื่น ๆ ทั้งหมดเพื่อให้แน่ใจว่าภาพของคุณมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ในขณะที่ยังคงรักษาระดับคุณภาพที่คุณต้องการคุณจะต้องกำหนดค่าเว็บไซต์ของคุณเพื่อให้แสดงรูปภาพที่มีส่วนหัว HTTP น้อยที่สุด ส่วนหัวที่คุณให้บริการอนุญาตให้จัดเก็บรูปภาพอย่างเหมาะสมโดยการแคชพร็อกซีเซิร์ฟเวอร์และเว็บเบราว์เซอร์
เพื่อลดขนาดของคำขอตรวจสอบให้แน่ใจว่าเว็บเซิร์ฟเวอร์ของคุณได้รับการกำหนดค่าไม่ให้ส่งส่วนหัวที่ไม่มีประโยชน์เช่น X-Powered-By นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณให้บริการสิ่งต่าง ๆ เช่นรูปภาพ CSS และส่วนประกอบคงที่อื่น ๆ จากโฮสต์ที่ไม่ได้ตั้งค่าคุกกี้ (เช่น static.example.com)
สำหรับรูปภาพที่เป็นภาพนิ่งให้ตั้งค่าส่วนหัว Expires เป็นวันที่ในอนาคตอันไกล สิ่งนี้ทำให้มั่นใจได้ว่าเว็บเบราว์เซอร์และพร็อกซีแคชใด ๆ ที่อยู่ตรงกลางจะจับภาพไว้ให้นานที่สุด ข้อเสียเพียงอย่างเดียวคือถ้าคุณต้องการแสดงภาพอื่นคุณจะต้องใช้ชื่อไฟล์และลิงค์อื่นแทน หมายเลขรุ่นในชื่อไฟล์ (เช่น myimage_1.png หรือ /images/3/logo.png) อาจเป็นวิธีที่มีประสิทธิภาพในการทำเช่นนี้ สำหรับหน้าเว็บที่ไม่คงที่ให้ตั้งค่าส่วนหัว Expires จริง (เข้าถึงบวก X ชั่วโมง) และให้แน่ใจว่าคุณกำลังตั้งค่าส่วนหัว Last-Modified หรือส่วนหัว eTag (ไม่ใช่ทั้งคู่) เพื่อให้เบราว์เซอร์ที่ดาวน์โหลดไฟล์ก่อนหน้านี้สามารถทดสอบได้อย่างรวดเร็ว ไม่ว่าจะเป็นรุ่นปัจจุบันโดยการเปรียบเทียบส่วนหัวแทนที่จะดึงภาพทั้งหมดลง
แม้ว่าจะมีแหล่งข้อมูลมากมายที่สามารถพูดคุยเกี่ยวกับเทคนิคเหล่านี้ แต่ Yahoo ได้ทำหน้าที่ได้อย่างยอดเยี่ยมซึ่งได้นำเคล็ดลับมากมายสำหรับการปรับปรุงประสิทธิภาพของการส่งเนื้อหาเข้าด้วยกันในที่เดียว