ฉันควรทำอย่างไรกับโปรไฟล์สีเมื่อออกแบบสำหรับเว็บ

ฉันได้อ่านบทความนี้โดยดั๊กเอเวอรี่ซึ่งเขาอธิบายวิธีปิดการใช้งานการจัดการสีใน Adobe Photoshop และบทความติดตามผลเพื่อตอบรับความโกลาหลของผู้แสดงความคิดเห็นที่โต้เถียงและสนับสนุน sRGB แม้ว่าฉันจะยังไม่มั่นใจในเทคนิคใด ๆ ควรนำไปใช้ในเวิร์กโฟลว์ส่วนตัวของฉัน
จากสิ่งที่ฉันได้รวบรวมในขณะที่อ่านบทความ (โปรดแก้ไขให้ฉันถ้าฉันผิด) วิธีที่ถูกต้องในการจัดการกับเรื่องนี้คือให้ Photoshop จัดการสีเป็น sRGB และใช้Proof Colorsเมื่อต้องการมากกว่า ตัวอย่าง "ซื่อสัตย์" ของผลงานของคุณ

ในขณะนี้ฉันมีโครงการเว็บไซต์ทั้งหมดที่ได้รับการออกแบบโดยปิดการใช้งานโปรไฟล์สี ฉันเริ่มทำอย่างนั้นเพราะเมื่อหลายเดือนก่อนฉันสังเกตเห็นว่าสีที่แสดงบน Photoshop ถึงแม้ว่ารายงานอย่างถูกต้องโดยEyedropper Toolของ Photoshop เองก็ไม่สอดคล้องกันเมื่อวัดจากภาพหน้าจอไปยังสิ่งที่ฉันเห็นใน Google Chrome เมื่อเปิดภาพที่ส่งออกเป็น PNG
หลังจากการค้นหาอย่างรวดเร็วฉันพบข้อความที่ฉันอ้างถึงก่อนหน้านี้และใช้คำแนะนำอย่างสุ่มสี่สุ่มห้า (โดยไม่ต้องสังเกตการติดตามหรืออ่านเกี่ยวกับปัญหาด้วย) ตั้งแต่นั้นมาฉันก็ไม่มีปัญหา: ฉันถ่ายภาพหน้าจอของงานของฉันใน Photoshop และฉันอัพโหลดให้นักพัฒนาใช้งาน เขาจะได้เห็นสีเดียวกับที่ฉันเห็นและใช้เมื่อพัฒนาการออกแบบและฉันไม่ต้องกระโดดผ่านห่วงเพื่อดูว่าฉันกำลังทำอะไรอยู่

คำถามของฉัน:

• จำเป็นหรือไม่ที่จะต้องใช้ sRGB ในการออกแบบเว็บ (ฉันเข้าใจถึงความหมายของการไม่ใช้มันในการถ่ายภาพหรือการพิมพ์) เมื่อมันเพิ่มงานมากขึ้นโดยบังคับให้คุณใช้Proof Colors ? (นั่นเป็นเพียงวิธีที่ฉันเห็นโปรดแก้ไขฉันหากฉันผิด)

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

ความเห็น (บางครั้งแย้ง) ของฉัน: ผู้ที่แนะนำให้ใช้ sRGB สำหรับส่วนติดต่อผู้ใช้และการออกแบบเว็บนั้นเป็นบ้า นี่คือเหตุผล

สำหรับการจัดการสีให้เหมาะกับการออกแบบหน้าจอมีสามสิ่งสำคัญที่ต้องเกิดขึ้น

1. ต้องสร้างภาพโดยใช้เวิร์กโฟลว์ที่ถูกต้อง
2. ต้องบันทึกรูปภาพด้วยโปรไฟล์สี ICC ที่ถูกต้อง
3. ภาพจะต้องแสดงอย่างถูกต้องโดยยึดตามโปรไฟล์ของภาพและสภาพแวดล้อมที่แสดงอยู่ (เบราว์เซอร์และระบบปฏิบัติการ ฯลฯ )

หากคุณไม่มีทั้งสามการจัดการสีจะไม่ทำงานเลย การมีหนึ่งหรือสองสิ่งนั้นหมายถึงการที่โซ่ทั้งหมดหัก

และนี่คือปัญหา: PNG และ GIF ทั้งหมดที่บันทึกจาก Photoshop ไม่สามารถมีโปรไฟล์ ICC ได้ดังนั้นจึงไม่สามารถใช้หมายเลข 2 ในกรณีส่วนใหญ่ได้ (JPEG สามารถมีโปรไฟล์ได้) และเบราว์เซอร์จำนวนมากทำงานไม่ถูกต้องดังนั้นจึงมีหมายเลข 3 อยู่ในหลายกรณี

หากคุณกำลังแสดงรูปภาพบนเว็บตัวเลือกที่ดีที่สุดของคุณคือการแปลงเป็น sRGB แบบทำลายและฝังโปรไฟล์ ICR sRGB และใช้ JPEG เท่านั้น หากคุณกำลังสร้างองค์ประกอบส่วนติดต่อผู้ใช้บนเว็บตัวเลือกที่ดีที่สุดของคุณคือตั้งค่า Photoshop เพื่อกำหนดเป้าหมาย "อุปกรณ์ RGB" (สีดั้งเดิมโดยไม่มีการจัดการโปรไฟล์หรือสี)

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

ฉันเขียนมากขึ้นในหัวข้อที่นี่:

การจัดการสีและการออกแบบ UI

และโฆษณา nausium แย้งกับวิศวกรของ Adobe ที่นี่:

บันทึกสำหรับเว็บควรแปลงเป็น sRGB เป็นค่าเริ่มต้นสำหรับ PNG และ GIF

จำเป็นหรือไม่ที่จะต้องใช้ sRGB ในการออกแบบเว็บ (ฉันเข้าใจความหมายของการไม่ใช้มันในการถ่ายภาพหรือการพิมพ์) เมื่อมันเพิ่มงานมากขึ้นโดยบังคับให้คุณใช้ Proof Colors? (นั่นเป็นเพียงวิธีที่ฉันเห็นโปรดแก้ไขฉันหากฉันผิด)

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

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

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

โปรดทราบว่า:

• GIF ไม่สามารถมีโปรไฟล์ ICC ได้
• PNG ที่บันทึกโดย Photoshop ไม่สามารถมีโปรไฟล์ ICC ได้
• PNG สามารถมีโปรไฟล์ได้ แต่มันไม่ค่อยมีที่บันทึกไว้กับพวกเขา
• JPEG สามารถมีโปรไฟล์ได้
• การแสดงเบราว์เซอร์ของภาพที่มีโปรไฟล์แตกต่างกันระหว่างเบราว์เซอร์
• สีใน HTML และ CSS มักจะถือว่าเป็นอุปกรณ์ RGB หรือ sRGB และคุณไม่สามารถควบคุมได้

โปรไฟล์มีความจำเป็นอย่างยิ่งหากการพัฒนา / ออกแบบบน Mac

ถ้าฉันทำงานกับรูปภาพของฉันใน Photoshop เป็น Adobe RGB หรือ ProPhoto RGB (ทั้ง 2 ใช้กล้องที่ดี) แล้วสีจะเปลี่ยนไปมากเมื่อ PSD ถูกบันทึกสำหรับเว็บและดูบนพีซี Windows

สำหรับผู้ใช้ Mac จำเป็นต้องใช้โปรไฟล์ sRGB ในไฟล์งานเพื่อรักษาสีในแพลตฟอร์มต่างๆ

ไฟล์ที่เผยแพร่ครั้งสุดท้าย (บันทึกสำหรับเว็บ) ไม่มีโปรไฟล์ แต่การใช้ sRGB ในระหว่างนั้นจำเป็นต้องมีการสร้างบน Mac อย่างน้อยก็อยู่ในของเราหากคุณต้องการให้สีดูคล้ายกับ Mac และ Windows

ฉันต้องการยืนยันข้อความในย่อหน้าเหล่านี้:

จากสิ่งที่ฉันรวบรวมในขณะที่อ่านบทความ (โปรดแก้ไขให้ฉันถ้าฉันผิด) วิธีที่ถูกต้องในการจัดการกับเรื่องนี้ก็คือให้ Photoshop จัดการสีเป็น sRGB และใช้ Proof Colors เมื่อต้องการมากกว่านี้ ตัวอย่าง "ซื่อสัตย์" ของผลงานของคุณ

และ

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

ฉันแยกความแตกต่างระหว่างสภาพแวดล้อมการผลิต (รู้จักและควบคุมด้วยตนเอง) และอุปกรณ์แสดงผลและฉันจัดการเวิร์กโฟลว์ตามสิ่งที่ดีที่สุดสำหรับภาพถ่าย ให้ฉันอธิบาย:

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

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

ฉันบันทึกไฟล์สุดท้ายโดยไม่มีโปรไฟล์และพวกเขาดูอย่างที่คาดไว้ เหตุผลที่เป็นเช่นนั้น? ฉันคิดว่าเนื่องจากกราฟิกที่ไม่มีโปรไฟล์แปลความหมายราวกับว่าพวกเขามีโปรไฟล์ sRGB ติดอยู่กับพวกเขา (อาจมีคนรู้จักการอ้างอิงสำหรับสิ่งนี้)

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

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

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

อัปเดตสำหรับ Adobe Photoshop CC (2017):

1. เว้นพื้นที่ทำงานเป็นค่าเริ่มต้น (วัตถุประสงค์ทั่วไปอเมริกาเหนือ 2)

2. อย่าเปลี่ยนอะไรอย่างอื่น