웹 사이트에서 모범 사례 처리 이미지

기존 전자 상거래 사이트를 MVC 3으로 포팅하고 설계 개선을 활용하고 싶습니다. 이 사이트에는 현재 썸네일, 중간 (목록에 표시) 및 확대 된 모양으로 확장 된 3 가지 크기로 저장된 제품 이미지가 있습니다. 지금 우리는 정확한 크기의 3 개의 개별 이미지를 업로드하고, 사이트가 기대하는 것과 일치하는 3 개의 다른 이름을 제공해야합니다.

큰 파일 하나만 업로드 한 다음 사이트에서 필요한 크기로 축소하도록하고 사용자 기본 설정, 폼 팩터 (예 : 모바일, iPad)에 따라 축소판 그림 및 목록 크기를 유연하게 변경하고 싶습니다. , 바탕 화면) 등이 있으므로 동일한 이미지의 사본이 많이 필요할 수 있습니다. 내 질문은 이미지를 축소 한 다음 업로드 할 때 여러 번 저장해야하며 그렇다면 좋은 저장 / 이름 지정 규칙은 무엇입니까?

다른 아이디어는 단일 이미지 만 저장하고 클라이언트에 제공하기 전에 프로그래밍 방식으로 크기를 조정하는 것입니다. 이 작업을 수행 한 사람이 있습니까? 기계 사이클 몇 개 외에 다른 단점은 무엇입니까? 메모리에 임시 이미지를 클라이언트에 어떻게 전달합니까 (URL 없음)?

영국 여행 회사의 수석 개발자입니다. 내가 구현 한 프로젝트 중 하나는 이미지 라이브러리의 웹 버전으로 사이트에 사진을 제공하기 위해 자동으로 쿼리 할 수 ​​있습니다. 약 150k 이미지가 포함되어 있으며 그 중 약 60-70k가 웹 사이트에서 제공됩니다 (최고 등급).

약 5 가지 크기를 정의하고이 크기 버전을 즉석에서 생성하여 Amazon S3에 저장하는 것으로 시작했습니다. 가격은 최소 였지만 아마존은 정상적으로 실패하도록 설계되었으므로 종종 누락 된 이미지가 나타납니다. 사이트를 많이 개발할수록 5 가지 크기의 이미지 만 사용할 수 있습니다.

동적 크기 조정 모델로 이동했습니다. 즉, 이미지의 URI에 너비 및 / 또는 높이 매개 변수를 추가하여 해당 크기로 즉시 렌더링 할 수 있습니다. 크기가 조정 된 이미지를 캐시합니다 (요청 URI의 MD5 해시를 파일 이름으로 사용).

너비가 200이고 jpg 품질이 80 % 인 이미지 # 12345 (이미지는 db를 통해 가져 오지만 파일 경로로 바꿀 수 있음)를 얻으려면 URI 형식은 다음과 같습니다.

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

이 솔루션은 구현이 쉽고 완벽하게 작동합니다. 20-30 개의 이미지가있는 페이지에서도 웹 사이트 방문자에게 눈에 띄는 지연이 없습니다.

동일한 작업을 수행하는 PHP 이미지 크기 조정 스크립트도 작성했지만 .net으로이 모든 작업을 수행하고 있습니다.

희망은 아담, 아담

이미지 프로세서

이미지 프로세서는 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 에는 캐싱 이 표준으로 제공됩니다. 처리 된 이미지는 선택한 기간 동안 브라우저와 서버 모두에서 비동기식으로 캐시됩니다. 서버 캐시는 수백만 개의 이미지를 지능적으로 저장하고 원래 이미지가 변경되거나 캐시가 만료되면 자동으로 업데이트됩니다.

썸네일이 단순히 기본 이미지의 크기가 조정 된 버전이라고 가정하면 업로드시 수행되어야하지만 다른 프로세스에 영향을 미치지 않도록 백그라운드 작업으로 예약해야한다고 생각합니다. 즉시 크기를 조정하는 경우 이미지를 캐시해야합니다.

이 모든 것의 포착은 일부 이미지에 가장 적합한 썸네일 은 마스터의 단순한 크기 조정 이 아니라는 것입니다. 사람이 주도하는 방식으로 확대 / 축소해야 할 수도 있습니다. 자동 크기 조정 기능을 원하지만 이러한 특정 경우 재정의를 허용하는 메커니즘이 있습니다.

Adam이 언급 한 내용에 약간의 변형이 있습니다.

(1) 사용자 정의 오류 페이지 생성 (이미지 규칙)

(2) 이미지 파일 이름의 구조는 다음과 같아야합니다.

ImageId_Width_Height_Quality

유일한 예외는 원본 이미지이며 다음과 같이 이름을 지정해야합니다.

ImageId_Original

(3) 파일 업로드시 : 1245_Original-> 1245_ *가있는 모든 파일을 삭제해야합니다.

(4) 사용자 정의 오류 페이지 (1245_Original Exists가 있다고 가정)는 요청 된 이미지 파일을 동적으로 작성해야합니다.

1245_250_400_80.jpg

또한 처음으로 제공합니다.

실제로 새 이미지를 업로드하면 캐시가 제거됩니다.