ฉันจะแปลงพื้นหลังเบลอ. png ให้กลายเป็นไฟล์. jpg ที่ถูกบีบอัดได้โดยไม่ต้องแนะนำสิ่งประดิษฐ์ได้อย่างไร

ขณะนี้ฉันกำลังจัดการกับปัญหาคุณภาพของภาพสำหรับภาพพื้นหลังเว็บไซต์ของฉัน

ฉันมีภาพพื้นหลังเบลอขนาดใหญ่ที่ฉันต้องการใช้ แต่ต้องการให้มีขนาดเล็กที่สุดเท่าที่เป็นไปได้สำหรับเว็บไซต์

หากต้องการให้มีคุณภาพสูงสุด (png) จะมีขนาดประมาณ 200kb

ฉันสามารถลดลงได้ประมาณ 100kb ในฐานะ JPG แต่คุณภาพลดลงซึ่งคาดว่าจะมี แต่มีเส้นที่ดูน่ากลัวรอบเส้นตรงที่ทำให้ดูแย่

มีวิธีการพิเศษในการแปลง png นี้เป็น jpg แต่ป้องกันไม่ให้ภาพมีข้อบกพร่องเหล่านี้หรือไม่?

นี่คือภาพ:

PNG:

JPG คุณภาพ (100%):

JPEG ไม่ใช่การบีบอัดข้อมูลแบบไม่สูญเสีย

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

200kb นั้นไม่ใหญ่มากใน 2014/2015

ในขณะที่มันเป็นความคิดที่จะลดขนาดของพื้นหลังให้มากที่สุดเป็นสิ่งสำคัญที่จะต้องทราบว่า 200kb ไม่ใหญ่สำหรับการเชื่อมต่อบรอดแบนด์มากที่สุด คุณสามารถใช้รุ่นที่แตกต่างกันสำหรับโทรศัพท์มือถือและแท็บเล็ใช้คำสั่งสื่อ CSS

ทำให้ไฟล์ png เล็กลง

Photoshop และแพคเกจสีอื่น ๆ ที่ใช้การบีบอัด PNG มาตรฐานคุณต้องมีแนวโน้มที่สามารถลด 200kb ที่แม้แต่น้อยโดยใช้PngOptimizerหรือ Yahoo ของบริการออนไลน์Smush มัน การลดขนาดไฟล์ให้ต่ำลงจะไม่ทำให้คุณภาพลดลงเนื่องจากเป็นรูปแบบที่ไม่มีการสูญเสีย ... โดยจะทำการปรับโค้ดให้เหมาะสมที่สุดโดยเปรียบเทียบกับไฟล์ ZIP หรือ RAR ซึ่งเป็นไฟล์บีบอัด แต่ไม่ลดคุณภาพของเนื้อหา

พิจารณาการใช้แถบไล่ระดับสี

วิธีแก้ปัญหาอื่นที่อาจเป็นไปได้คือคุณใช้การไล่ระดับสี PNG บาง ๆ ซึ่งมีขนาด 1px และจากนั้นความสูงของหน้าคุณจึงทำซ้ำสิ่งนี้โดยใช้background-repeatคุณสามารถพิจารณาใช้ CSS เพื่อสร้างตัวไล่ระดับสีสำหรับคุณ แต่แน่นอนว่า ความสามารถในการใช้เงาและการปรับแต่งอื่น ๆ

สิ่งนี้อาจไม่ตอบคำถามของคุณ ทางเลือกที่เป็นไปได้บางอย่าง ...

คุณได้พิจารณา CSS แทน:

background: linear-gradient(45deg, #3d667c, #1d283e);

หรือบางทีคุณอาจใช้เทคนิค SVG base64 ( เครื่องมือตัวสร้างที่นี่ ):

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

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

ฉันขอแนะนำให้คุณตรวจสอบKraken.ioพวกเขามีเครื่องมือเพิ่มประสิทธิภาพภาพ ภาพในหัวข้อของคุณลดขนาดลง 45% โดยที่ไม่สามารถมองเห็นได้ด้วยตา!

นอกจากนี้คุณยังสามารถใช้ css colorzillaมีเครื่องมือที่ดีสำหรับการสร้าง css ที่เหมาะสมสำหรับเบราว์เซอร์ทั้งหมด

หากคุณรู้สึกสบายใจกับภาพที่มีการไล่ระดับสีให้หยดสีทำให้มันเป็นขาวดำจากนั้นให้ div / body / element เป็นพื้นหลังดังนี้

background: blue url('images/gradient.png')

โปรแกรมแก้ไขภาพบางประเภทเช่น GIMP ช่วยให้คุณปรับความนุ่มนวลได้เช่นเดียวกับการควบคุมการบีบอัดเมื่อบันทึก jpeg

การปรับให้เรียบ: การตั้งค่าตัวเลือกการปรับให้เรียบเป็นค่าที่ไม่เป็นศูนย์จะทำให้ภาพราบรื่นขึ้นเล็กน้อย สิ่งนี้จะช่วยลดสิ่งประดิษฐ์เลือนจากการบีบอัดและช่วยในการบีบอัด การตั้งค่า 0.10-0.15 เอาส่วนที่ดีของสิ่งประดิษฐ์ออกโดยไม่ทำให้เกิดขอบ

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

คุณยังสามารถลดสิ่งประดิษฐ์โดยการควบคุมการสุ่มตัวอย่าง

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

http://www.ampsoft.net/webdesign-l/jpeg-compression.html

ลองเพิ่มเสียงเพื่อลดแถบคาด:

Photoshop:

1. สร้างเลเยอร์ใหม่
2. ไปที่: Image > Fill... >และใช้ค่าเหล่านี้:

3. เปลี่ยนโหมดการผสมของเลเยอร์เป็นภาพซ้อนทับ
4. Filter > Noise > Add Noise... >ไปที่: ค่าเหล่านี้ทำงานได้ดีสำหรับฉัน:

5. ปรับความทึบของเลเยอร์ตามที่คุณต้องการ 22% เป็นชนิดที่ตกลงและ JPG ที่ได้คือ:

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

อีกหนึ่งข้อเสนอแนะ:

หากคุณไม่ต้องการเพิ่มเสียงรบกวนลองตรวจสอบให้แน่ใจว่าคุณทำงานได้ทุกที่ในพื้นที่สี sRGB ซึ่งให้ช่วงเสียงที่ดีที่สุดสำหรับหน้าจอมอนิเตอร์ (แถบน้อยกว่า)