Prática recomendada - manipulação de imagens no site

9

Estou portando um site de comércio eletrônico antigo para o MVC 3 e gostaria de aproveitar as melhorias de design. Atualmente, o site possui imagens de produtos armazenadas em três tamanhos: miniatura, média (para exibição em uma lista) e expandida para uma aparência ampliada. No momento, estamos tendo que fazer upload de 3 imagens separadas com o tamanho exato, fornecer 3 nomes diferentes que correspondam ao que o site espera etc., é uma dor.

Gostaria de fazer upload de apenas um arquivo, o grande, e depois permitir que o site o reduzisse aos tamanhos necessários, e gostaria de ter a flexibilidade de alterar os tamanhos de miniaturas e listas, dependendo das preferências do usuário, fator de forma (por exemplo, celular, iPad , área de trabalho) etc. etc., portanto, podem ser necessárias muitas cópias da mesma imagem. Minha pergunta é: a imagem deve ser reduzida e salva várias vezes após o upload? Em caso afirmativo, o que é uma boa convenção de armazenamento / nomeação?

A outra idéia é armazenar apenas a imagem única, mas redimensioná-la programaticamente antes de servi-la ao cliente. Alguém já fez isso e quais são as compensações além de mais alguns ciclos de máquinas? Como você transmite uma imagem temporária na memória para o cliente (não há URL)?

asp.net image-manipulation

— Steve
fonte

13

Sou desenvolvedor líder de uma empresa de viagens sediada no Reino Unido. Um dos projetos que implementei foi uma versão web da nossa biblioteca de imagens que pode ser consultada automaticamente para fornecer fotografia para o nosso site. Ele contém cerca de 150 mil imagens, das quais cerca de 60 a 70 mil estão disponíveis no site (as mais bem classificadas).

Começamos definindo cerca de cinco tamanhos, criando essas versões rapidamente e armazenando-as no Amazon S3. O preço era mínimo, mas a Amazon foi projetada para falhar normalmente, portanto, muitas vezes veríamos imagens ausentes. Quanto mais desenvolvemos nosso site, mais odiamos ter apenas cinco tamanhos de imagem disponíveis.

Mudamos para um modelo de redimensionamento dinâmico, no qual podemos adicionar parâmetros de largura e / ou altura ao URI de qualquer imagem para que ela seja renderizada naquele tamanho em tempo real. Armazenamos em cache a imagem redimensionada (usando um hash MD5 do URI da solicitação como nome do arquivo).

Para obter a imagem nº 12345 (nossas imagens são buscadas por meio de um banco de dados, mas você pode substituí-la por um caminho de arquivo) na largura 200 e qualidade jpg em 80%, o formato URI seria:

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

Essa solução foi fácil de implementar e funciona perfeitamente - não há atraso perceptível para o visitante do site, mesmo em páginas com 20 a 30 imagens.

Estamos fazendo isso tudo com .net, embora eu também tenha escrito um script de redimensionamento de imagem PHP que faça a mesma coisa.

Espero que ajude, Adam

— Adão
fonte

O engraçado para mim é que o "redimensionamento antecipado" é, na verdade, uma forma de cache - apenas extremamente primitiva e limitada. O armazenamento em cache após a primeira solicitação é a abordagem usual e, geralmente, a melhor. A exceção é quando você estaria lidando com enormes volumes de dados de uma só vez , o que provavelmente não é o caso aqui.

— Aaronaught

Brilhante @Adam (esse é o meu melhor discurso no Reino Unido), obrigado pelo post atencioso. Estou fora.

— 23611 Steve Steve

2

ImageProcessor

Imageprocessor é uma biblioteca leve e extensível, escrita em C #, que permite manipular imagens on-the-fly usando o .NET

Redimensionando em tempo real:

<!--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 vem com cache como padrão. Qualquer imagem processada é armazenada em cache de forma assíncrona, tanto no navegador quanto no servidor, por um período de sua escolha. O cache do servidor armazena inteligentemente milhões de imagens e atualiza-se silenciosamente, caso a imagem original seja alterada ou o cache expire.

— Soren
fonte

1

Supondo que a miniatura seja simplesmente uma versão redimensionada da imagem principal, acho que deve ser feita no momento do upload, mas talvez agendada como um trabalho em segundo plano para não impactar outros processos. Se você redimensionar em tempo real, certifique-se de armazenar em cache a imagem.

O problema disso tudo é que a melhor miniatura para algumas imagens não é um redimensionamento simples do mestre; pode ser necessário aumentar o zoom e recortar de uma maneira que seja movida por humanos. Você pode querer redimensionar automaticamente, mas possui um mecanismo que permita uma substituição nesses casos específicos.

— Peter Rowell
fonte

0

Uma ligeira variação sobre o que Adam mencionou:

(1) crie uma página de erro personalizada (regra para imagens)

(2) A estrutura dos nomes dos arquivos de imagem deve ser:

ImageId_Width_Height_Quality

A única exceção é a imagem original e deve ser nomeada:

ImageId_Original

(3) No upload de arquivo, por exemplo: 1245_Original -> todos os arquivos com 1245_ * devem ser excluídos

(4) A página de erro personalizada (assumindo que 1245_Original existe) deve criar dinamicamente o arquivo de imagem solicitado, por exemplo:

1245_250_400_80.jpg

e também servi-lo pela primeira vez.

Com efeito, o upload de uma nova imagem limpa o cache.

— Noite escura
fonte