Thực hành tốt nhất - xử lý hình ảnh trên trang web

Tôi đang chuyển một trang web thương mại điện tử cũ sang MVC 3 và muốn tận dụng các cải tiến thiết kế. Trang web hiện có hình ảnh sản phẩm được lưu trữ ở 3 kích cỡ: hình thu nhỏ, phương tiện (để hiển thị trong danh sách) và được mở rộng để thu nhỏ. Ngay bây giờ chúng tôi phải tải lên 3 hình ảnh riêng biệt có kích thước chính xác, cung cấp 3 tên khác nhau phù hợp với những gì trang web mong đợi, v.v., đó là một nỗi đau.

Tôi chỉ muốn tải lên 1 tệp, tệp lớn, sau đó để trang web giảm kích thước đó xuống kích thước cần thiết và tôi muốn linh hoạt thay đổi hình thu nhỏ và kích thước danh sách tùy theo sở thích của người dùng, yếu tố hình thức (ví dụ: di động, iPad , máy tính để bàn), v.v. vì vậy có thể cần nhiều bản sao của cùng một hình ảnh. Câu hỏi của tôi là hình ảnh có nên được giảm đi sau đó được lưu lại nhiều lần khi tải lên không và nếu có thì một quy ước lưu trữ / đặt tên tốt là gì?

Ý tưởng khác là chỉ lưu trữ hình ảnh duy nhất nhưng thay đổi kích thước nó theo chương trình trước khi phục vụ nó cho khách hàng. Có ai đã làm điều này và sự đánh đổi bên cạnh một vài chu kỳ máy nữa không? Làm thế nào để bạn chuyển một hình ảnh tạm thời trong bộ nhớ cho khách hàng (không có URL)?

Tôi là nhà phát triển chính cho một công ty du lịch có trụ sở tại Anh. Một trong những dự án tôi đã thực hiện là một phiên bản web của thư viện hình ảnh của chúng tôi có thể được truy vấn tự động để cung cấp ảnh cho trang web của chúng tôi. Nó chứa khoảng 150k hình ảnh, trong đó khoảng 60-70k có sẵn cho trang web (được đánh giá cao nhất).

Chúng tôi bắt đầu bằng cách xác định khoảng 5 kích thước, tạo các phiên bản kích thước này một cách nhanh chóng và lưu trữ chúng trong Amazon S3. Giá là tối thiểu nhưng Amazon được xây dựng để thất bại một cách duyên dáng, vì vậy chúng ta thường thấy những hình ảnh bị thiếu. Chúng tôi càng phát triển trang web của mình, chúng tôi càng ghét chỉ có năm kích cỡ hình ảnh có sẵn.

Chúng tôi đã chuyển sang một mô hình thay đổi kích thước động, theo đó chúng tôi có thể thêm các tham số chiều rộng và / hoặc chiều cao vào URI của bất kỳ hình ảnh nào để nó hiển thị ở kích thước đó một cách nhanh chóng. Chúng tôi lưu trữ hình ảnh đã thay đổi kích thước (sử dụng hàm băm MD5 của URI yêu cầu làm tên tệp).

Để có được hình ảnh # 12345 (hình ảnh của chúng tôi được tìm nạp thông qua db, nhưng bạn có thể thay thế hình ảnh này bằng đường dẫn tệp) ở độ rộng 200 và jpg chất lượng 80%, định dạng URI sẽ là:

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

Giải pháp này rất dễ thực hiện và hoạt động trơn tru - không có sự chậm trễ rõ rệt đối với khách truy cập trang web, ngay cả trên các trang có 20-30 hình ảnh.

Chúng tôi đang làm tất cả điều này với .net, mặc dù tôi cũng đã viết một kịch bản thay đổi kích thước hình ảnh PHP cũng làm điều tương tự.

Mong rằng sẽ giúp, Adam

Bộ xử lý hình ảnh

Bộ xử lý hình ảnh là một thư viện nhẹ, có thể mở rộng được viết bằng C # cho phép bạn thao tác với hình ảnh nhanh chóng bằng .NET

Thay đổi kích thước khi đang bay:

<!--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 đi kèm với bộ nhớ đệm là tiêu chuẩn. Bất kỳ hình ảnh được xử lý đều được lưu trữ không đồng bộ cả trong trình duyệt và trên máy chủ trong một thời gian bạn chọn. Bộ đệm máy chủ lưu trữ thông minh hàng triệu hình ảnh và âm thầm tự cập nhật khi thay đổi hình ảnh gốc hoặc bộ đệm hết hạn.

Giả sử rằng hình thu nhỏ chỉ đơn giản là một phiên bản đã thay đổi kích thước của hình ảnh chính, thì tôi nghĩ rằng nó nên được thực hiện khi tải lên, nhưng có lẽ được lên lịch làm công việc nền để không ảnh hưởng đến các quy trình khác. Nếu bạn thay đổi kích thước một cách nhanh chóng, hãy đảm bảo bạn lưu trữ hình ảnh.

Điều hấp dẫn trong tất cả những điều này là hình thu nhỏ tốt nhất cho một số hình ảnh không phải là thay đổi kích thước đơn giản của bản gốc; bạn có thể cần phóng to và cắt theo cách do con người điều khiển. Bạn có thể muốn điều chỉnh kích thước tự động, nhưng có một cơ chế cho phép ghi đè trong những trường hợp cụ thể này.

Một thay đổi nhỏ về những gì Adam đã đề cập:

(1) tạo trang lỗi tùy chỉnh (quy tắc cho hình ảnh)

(2) Cấu trúc của tên tệp hình ảnh phải là:

ImageId_Width_Height_Quality

Ngoại lệ duy nhất là hình ảnh gốc và nên được đặt tên:

ImageId_Original

(3) Khi tải lên tệp, ví dụ: 1245_ Nguyên bản -> tất cả các tệp có 1245_ * sẽ bị xóa

(4) Trang lỗi tùy chỉnh (giả sử rằng 1245_Quản trị gốc) sẽ tự động tạo tệp hình ảnh được yêu cầu, ví dụ:

1245_250_400_80.jpg

và cũng phục vụ nó lần đầu tiên.

Trong hiệu ứng tải lên một hình ảnh mới sẽ xóa bộ nhớ cache.