Mejores prácticas: manejo de imágenes en el sitio web

Estoy transfiriendo un antiguo sitio de comercio electrónico a MVC 3 y me gustaría aprovechar las mejoras de diseño. El sitio actualmente tiene imágenes de productos almacenados en 3 tamaños: miniatura, medio (para mostrar en una lista) y expandido para una apariencia ampliada. En este momento tenemos que cargar 3 imágenes separadas que tengan el tamaño exacto, proporcionar 3 nombres diferentes que coincidan con lo que el sitio espera, etc., es una molestia.

Me gustaría cargar solo 1 archivo, el grande, luego dejar que el sitio lo reduzca a los tamaños necesarios, y me gustaría tener la flexibilidad para cambiar las miniaturas y los tamaños de lista según las preferencias del usuario, el factor de forma (por ejemplo, dispositivos móviles, iPad , escritorio), etc., por lo que podría necesitar muchas copias de la misma imagen. Mi pregunta es si la imagen debe reducirse y luego guardarse varias veces al cargarla y, de ser así, ¿cuál es una buena convención de almacenamiento / nomenclatura?

La otra idea es almacenar solo la imagen individual pero redimensionarla mediante programación antes de entregarla al cliente. ¿Alguien ha hecho esto y cuáles son las compensaciones además de unos pocos ciclos de máquina más? ¿Cómo pasa una imagen temporal en memoria al cliente (no hay URL)?

Soy desarrollador principal de una compañía de viajes con sede en el Reino Unido. Uno de los proyectos que implementé fue una versión web de nuestra biblioteca de imágenes que se puede consultar automáticamente para proporcionar fotografías para nuestro sitio. Contiene alrededor de 150k imágenes, de las cuales aproximadamente 60-70k están disponibles en el sitio web (la más alta calificación).

Comenzamos definiendo unos 5 tamaños, creando estas versiones de tamaño sobre la marcha y almacenándolas en Amazon S3. El precio era mínimo, pero Amazon está diseñado para fallar con gracia, por lo que a menudo vemos imágenes que faltan. Cuanto más desarrollamos nuestro sitio, más odiamos tener solo cinco tamaños de imagen disponibles.

Pasamos a un modelo de cambio de tamaño dinámico, en el que podemos agregar parámetros de ancho y / o alto al URI de cualquier imagen para que se procese en ese tamaño sobre la marcha. Guardamos en caché la imagen redimensionada (usando un hash MD5 del URI de solicitud como nombre de archivo).

Para obtener la imagen # 12345 (nuestras imágenes se obtienen a través de una base de datos, pero podría reemplazar esto con una ruta de archivo) con un ancho de 200 y una calidad de jpg del 80%, el formato de URI sería:

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

Esta solución fue fácil de implementar y funciona a la perfección: no hay demoras apreciables para el visitante del sitio web, incluso en páginas con 20-30 imágenes.

Estamos haciendo todo esto con .net, aunque también he escrito un script de cambio de tamaño de imagen PHP que hace lo mismo.

Espero que ayude, Adam

Procesador de imagen

Imageprocessor es una biblioteca ligera y extensible escrita en C # que le permite manipular imágenes sobre la marcha utilizando .NET

Cambiar el tamaño sobre la marcha:

<!--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 viene con almacenamiento en caché como estándar. Cualquier imagen procesada se almacena en caché de forma asíncrona tanto en el navegador como en el servidor durante el tiempo que elija. El caché del servidor almacena de forma inteligente millones de imágenes y se actualiza silenciosamente en caso de que la imagen original cambie o caduque el caché.

Suponiendo que la miniatura es simplemente una versión redimensionada de la imagen principal, creo que debería hacerse en el momento de la carga, pero tal vez programada como un trabajo en segundo plano para no afectar otros procesos. Si cambia el tamaño sobre la marcha, asegúrese de guardar en caché la imagen.

El problema con todo esto es que la mejor miniatura para algunas imágenes no es un simple cambio de tamaño del maestro; Es posible que necesite hacer zoom y recortar de manera humana. Es posible que desee cambiar automáticamente el tamaño, pero tener un mecanismo que permita una anulación en estos casos particulares.

Una ligera variación de lo que Adam ha mencionado:

(1) cree una página de error personalizada (regla para imágenes)

(2) La estructura de los nombres de los archivos de imagen debe ser:

ImageId_Width_Height_Quality

La única excepción es la imagen original y debe nombrarse:

ImageId_Original

(3) En la carga de archivos, por ejemplo: 1245_Original -> todos los archivos con 1245_ * deben eliminarse

(4) La página de error personalizada (suponiendo que 1245_Existe original) debe crear dinámicamente el archivo de imagen solicitado, por ejemplo:

1245_250_400_80.jpg

y también servirlo por primera vez.

En efecto, cargar una nueva imagen purga el caché.