สุดยอดการจัดการรูปภาพบนเว็บไซต์

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

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

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

ฉันเป็นผู้นำในการพัฒนา บริษัท ท่องเที่ยวในสหราชอาณาจักร หนึ่งในโครงการที่ฉันนำไปใช้คือไลบรารี่รูปภาพเวอร์ชันของเราซึ่งสามารถสอบถามได้โดยอัตโนมัติเพื่อมอบภาพถ่ายให้กับเว็บไซต์ของเรา มันมีรูปภาพประมาณ 150k ซึ่งมีอยู่ในเว็บไซต์ (อันดับสูงสุด) ประมาณ 60-70k

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

เราย้ายไปที่โมเดลการปรับขนาดแบบไดนามิกซึ่งเราสามารถเพิ่มพารามิเตอร์ความกว้างและ / หรือความสูงให้กับ URI ของภาพใด ๆ เพื่อให้แสดงผลในขนาดนั้นได้ทันที เราแคชรูปภาพที่ปรับขนาดแล้ว (โดยใช้แฮช MD5 ของ URI คำขอเป็นชื่อไฟล์)

ในการรับภาพ # 12345 (ภาพของเราถูกดึงผ่านฐานข้อมูล แต่คุณสามารถแทนที่ด้วยเส้นทางไฟล์) ที่ความกว้าง 200 และคุณภาพ jpg 80% รูปแบบ URI จะเป็น:

http://images.domain.com/?imageid=12345&w=200&q=80

โซลูชันนี้ใช้งานง่ายและทำงานได้อย่างราบรื่น - ไม่มีความล่าช้าในการมองเห็นของผู้เข้าชมเว็บไซต์แม้ในหน้าเว็บที่มีภาพ 20-30 ภาพ

เราทำทั้งหมดนี้ด้วย. net แม้ว่าฉันจะเขียนสคริปต์ปรับขนาดรูปภาพ PHP ซึ่งทำสิ่งเดียวกัน

หวังว่าจะช่วยได้อดัม

ImageProcessor

Imageprocessor เป็นไลบรารี่ที่มีน้ำหนักเบาและขยายได้ที่เขียนใน C # ซึ่งช่วยให้คุณสามารถจัดการรูปภาพในแบบทันทีโดยใช้. NET

การปรับขนาดทันที:

<!--Automatic height based on width-->
http://your-image?width=600
<!--Automatic width based on height-->
http://your-image?height=250
<!--Both dimensions specified-->
http://your-image?width=600&height=250
<!--Both dimensions specified with the image anchored to the top-->
http://your-image?width=600&height=250&anchor=top
<!--Height ratio passed for automatic scaling-->
http://your-image?width=600&heightratio=0.416
<!--Width ratio passed for automatic scaling-->
http://your-image?widthratio=2.4&height=250
<!--Background color added to padded image-->
http://your-image?width=600&height=250&bgcolor=fff  

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

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

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

การเปลี่ยนแปลงเล็กน้อยในสิ่งที่อดัมได้กล่าวถึง:

(1) สร้างหน้าข้อผิดพลาดที่กำหนดเอง (กฎสำหรับภาพ)

(2) โครงสร้างของชื่อไฟล์ภาพควรเป็น:

ImageId_Width_Height_Quality

ข้อยกเว้นอย่างเดียวคือภาพต้นฉบับและควรตั้งชื่อ:

ImageId_Original

(3) ในการอัปโหลดไฟล์เช่น: 1245_Original -> ไฟล์ทั้งหมดที่มี 1245_ * ควรถูกลบ

(4) หน้าข้อผิดพลาดที่กำหนดเอง (สมมติว่า 1245_ มีอยู่เดิม) ควรสร้างไฟล์ภาพที่ร้องขอแบบไดนามิกเช่น:

1245_250_400_80.jpg

และยังให้บริการมันรอบแรก

การอัปโหลดรูปภาพใหม่จะล้างแคช