Photoshop / Website: escalonamento Ps versus escalonamento HTML?

Question

Qual é a diferença entre dimensionar uma imagem para 150px no Photoshop e usá-la em HTML:

<img src="blah.png" />

versus

Usando uma imagem de 500px e depois usando isso em HTML:

<img src="blah.png" width="150px"/>?

Existe alguma diferença de qualidade?

    

Answer 1

Interessante, você quase não pode dizer a diferença nos dias de hoje ¹ . Parece bom no Chrome / IE, mas o Firefox não escala também. De qualquer forma, para adicionar a o ponto de Mike sobre largura de banda :

• O tempo de carregamento da página sofre muito com imagens grandes. Uma imagem sobre um T3 não seria grande coisa, mas um site de comércio eletrônico em um smartphone de baixa largura de banda seria punitivo.
• Você desperdiça largura de banda do servidor, o que pode lhe custar dinheiro (se você nunca veicular a foto maior).
• Você desperdiça a largura de banda do usuário, o que pode custar dinheiro para eles.

⁽¹⁾ 500x500 forçado para 150x150 à esquerda, 150 nativo à direita

    

Answer 2

O Photoshop permite que você escolha o método de dimensionamento, como 'bicubic sharper', que é mais adequado para reduzir tamanhos de imagens do que o redimensionamento 'bicubico' padrão.

Se você dimensionar o navegador, a qualidade variará entre os navegadores e você não terá controle sobre isso.

Além disso, se você estiver sempre fazendo o dimensionamento do navegador na imagem e nunca exibi-lo em sua resolução total, estará desperdiçando a largura de banda.

    

Answer 3

Sim, existe. A maioria dos navegadores não possui um bom reamostrador de imagens como o Photoshop. As imagens reduzidas em HTML ficarão ligeiramente em blocos, exigirão mais largura de banda, memória e uso da CPU.

A melhor prática é usar imagens reamostradas do Photoshop para serem exibidas na resolução nativa.