ต้องรู้
- เปิดภาพใน Photoshop เลือก ภาพ > ขนาดภาพ ป้อนความกว้างใหม่ จากนั้นเลือก Pixels > OK.
- เลือก ไฟล์ > บันทึกสำหรับเว็บและอุปกรณ์ เลือกแท็บ 2-Up เพื่อดูภาพต้นฉบับและภาพที่ปรับให้เหมาะสมเคียงข้างกัน
- เปลี่ยนค่า Quality และดูผลลัพธ์ ปรับขนาดหรือประเภทไฟล์หากจำเป็น เลือก บันทึก และตั้งชื่อภาพใหม่
บทความนี้จะอธิบายวิธีใช้เครื่องมือ Save for Web ของ Photoshop เพื่อปรับแต่งรูปภาพเพื่อใช้บนเว็บ ข้อมูลนี้ใช้กับ Photoshop 20.0.10 และใหม่กว่า คำสั่งและตัวเลือกเมนูอาจแตกต่างกันในแต่ละเวอร์ชัน
วิธีบันทึกสำหรับเว็บใน Photoshop
กราฟิกดีไซเนอร์ นักออกแบบเว็บไซต์ และคนอื่นๆ ที่สร้างเนื้อหาสำหรับเว็บ ยังสร้างภาพที่พร้อมสำหรับเว็บ เช่น ภาพถ่ายสำหรับเว็บไซต์และโฆษณาแบนเนอร์ ก่อนที่จะอัปโหลดภาพเหล่านี้ พวกเขาปรับภาพให้เหมาะสมเพื่อดาวน์โหลดและแสดงผลอย่างรวดเร็วในเว็บเบราว์เซอร์
ต่อไปนี้คือวิธีใช้เครื่องมือบันทึกสำหรับเว็บใน Photoshop เพื่อให้ได้ภาพที่มีคุณภาพและขนาดไฟล์ที่สมดุล
- เปิดภาพที่คุณต้องการบันทึกใน Photoshop
-
เลือก รูปภาพ > ขนาดภาพ หรือสำหรับพีซี กด Alt+Ctrl+I สำหรับ macOS กด Command+Option+I บนแป้นพิมพ์
Image -
ในฟิลด์ Width ป้อนความกว้างใหม่ เลือก Pixels จากนั้นเลือก OK.
ปรับขนาดรูปภาพให้เล็กลงเพื่อใช้บนเว็บไซต์
Image -
เลือก ไฟล์ > ส่งออก > บันทึกสำหรับเว็บ (ดั้งเดิม) หรือใช้แป้นพิมพ์ลัด: Alt/Option+Command+Shift+S.
ใน Photoshop เวอร์ชันอื่น เส้นทางคือ File > Export > บันทึกสำหรับเว็บ. รายการอาจเรียกว่าบันทึกสำหรับเว็บหรือบันทึกสำหรับเว็บและอุปกรณ์
Image -
ในหน้าต่าง บันทึกสำหรับเว็บ ไปที่ Original, Optimized,2-Up และ 4-Up แท็บ แท็บเหล่านี้จะสลับไปมาระหว่างมุมมองของรูปภาพต้นฉบับ รูปภาพที่ปรับให้เหมาะสมโดยใช้การตั้งค่าบันทึกสำหรับเว็บ หรือการเปรียบเทียบรูปภาพสองหรือสี่เวอร์ชัน
เลือก 2-Up เพื่อเปรียบเทียบรูปภาพต้นฉบับกับรูปภาพที่ปรับให้เหมาะสมที่สุด นี่แสดงสำเนาภาพเคียงข้างกัน
Image -
เปลี่ยนค่า Quality เมื่อคุณลดคุณภาพ รูปภาพจะดูยุ่งเหยิงและขนาดไฟล์ก็ลดลง ไฟล์ที่เล็กกว่าหมายถึงหน้าเว็บที่โหลดเร็วขึ้น
ค้นหาสื่อที่มีความสุขระหว่างขนาดไฟล์และคุณภาพ คุณภาพระหว่าง 40 ถึง 60 เป็นช่วงที่ดี ใช้ระดับคุณภาพที่ตั้งไว้ล่วงหน้า (เช่น สื่อ JPEG เป็นต้น) เพื่อประหยัดเวลา
Image -
เปลี่ยนประเภทไฟล์ หากต้องการ เป็น JPEG, GIF, PNG-8, PNG-24 หรือ WBMP
Image -
เปลี่ยนขนาดของภาพถ้าจำเป็น ป้อนความกว้างหรือความสูง หรือปรับขนาดเป็นเปอร์เซ็นต์
คลิกไอคอน ลูกโซ่ เพื่อเปลี่ยนสัดส่วนของภาพ มิเช่นนั้น ให้ป้อนความกว้างหรือความสูงอื่นเพื่อเปลี่ยนค่าอื่นตามสัดส่วน
Image -
ค่าใต้ตัวอย่างรูปภาพจะแสดงประเภทไฟล์ ขนาด และระยะเวลาที่รูปภาพจะเปิดบนเว็บไซต์ ตัวเลขเหล่านี้จะอัปเดตเมื่อคุณทำการเปลี่ยนแปลง
Image -
เมื่อพอใจกับรูปแล้ว เลือก บันทึก.
Image -
พิมพ์ชื่อรูป แล้วคลิก บันทึก.
Image
อะไรทำให้กราฟิกพร้อมสำหรับเว็บ
กราฟิกที่พร้อมใช้งานบนเว็บส่วนใหญ่มีลักษณะทั่วไปร่วมกัน:
- ความละเอียด 72 dpi.
- โหมดสีคือ RGB
-
ไฟล์ถูกลดขนาดสำหรับหน้าเว็บที่โหลดเร็วขึ้น
