# Comprimindo Imagem

É importante que as imagens utilizadas na loja (*Em banners, produtos, etc*) sejam LEVES.

As imagens **não devem ultrapassar 100 kb**, imagens acima deste tamanho começam a afetar a velocidade da loja.

## Exemplo de Imagem com Tamanho Excessivo

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZys_5-7_fExJHC3jVi%2F-MZytdfuHawSrK4SicRO%2F2021-05-05_20h37_34.png?alt=media\&token=e4dc88fd-af82-49f5-8ba6-7136eb4ed276)

Esta imagem tem **1.37 mb**, considerando que a capa da loja tenha *20 produtos* sendo exibidos, teríamos **27 mb** apenas de imagens de produtos na loja, o que afetaria diretamente a velocidade da loja.

## Como Reduzir

Existem alguns sistemas que permitem comprimir imagens, são eles:

{% embed url="<https://tinypng.com/>" %}

{% embed url="<https://kraken.io/web-interface>" %}

Estes compressores reduzem **drasticamente o tamanho da imagem**, removendo elementos que não são necessários para um site.

Utilizando a imagem de exemplo deste arquivo, a imagem de **1.37 mb** foi comprimida para **33.9 kb**, uma redução de **98%**:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZys_5-7_fExJHC3jVi%2F-MZyuMBMEtPFbw1-jkCs%2F2021-05-05_20h42_23.png?alt=media\&token=f937052f-d875-4235-ac11-138d6ea0df3b)

## Exportando Imagens do Photoshop

Caso você tenha sua imagens no formato PSD (*Ou um outro formato editado via Photoshop*) ou suas imagens estão em **CMYK** ou estão acima de **72 dpi**, é requerido que seja feito a exportação para web.

Antes de tudo, vamos verificar se a imagem esta em **RGB**, para isto, veja a barra onde esta o nome da imagem:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZywP402D982vtAACjO%2F-MZyyGMRB5UNhz8nWSRP%2F2021-05-05_20h59_21.png?alt=media\&token=c1939319-2330-43ad-945f-2b81c3fa3d79)

Caso não esteja em **RGB** (*Por exemplo, caso esteja em CMKYK*), clique em "**Imagens -> Modo -> Cores RGB**":

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZywP402D982vtAACjO%2F-MZyyU3yG4AEY_x9lh1x%2F2021-05-05_21h00_19.png?alt=media\&token=af2312ec-da26-443f-9d26-66152e96c4c1)

Agora precisamos checar a configuração de **DPI**, para isto, clique em "**Imagem > Tamanho da Imagem**":

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZywP402D982vtAACjO%2F-MZyzIhM15u9bVTexZII%2F2021-05-05_21h01_12.png?alt=media\&token=da8265e4-8d5a-4cd5-beda-1df87d931bc1)

No campo "**Resolução**" preencha com "**72**" e no campo ao lado selecione "**Pixels/polegadas**":

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZywP402D982vtAACjO%2F-MZyz9YCMmHhNu1TKrrZ%2F2021-05-05_21h03_24.png?alt=media\&token=a4bac114-5a54-4021-945c-d1e8a7222934)

Agora que já definimos as configurações, iremos exportar a imagem para utilizar na loja.

Clique em "**Arquivo -> Exportar -> Salvar para a Web**":&#x20;

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZys_5-7_fExJHC3jVi%2F-MZyvvAW6DrptyF012Jg%2F2021-05-05_20h46_32.png?alt=media\&token=902780e6-9341-4785-8bae-bc144aac25af)

Nesta tela, selecione "**Otimizado**" e na "**Qualidade**" preencha com "**72**":&#x20;

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZyzWIz9uBxmCWTXkMK%2F-MZz1G3QWzzpfG_NxFZt%2F2021-05-05_21h16_55.png?alt=media\&token=57b81738-aed3-437e-a9a3-fcb667bed45c)

Após isto, clique em "**Salvar**":&#x20;

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZys_5-7_fExJHC3jVi%2F-MZyvxQOJcFxhgGPIK7m%2F2021-05-05_20h47_20.png?alt=media\&token=bdb8fbf6-2221-4a23-b0db-09d3bad8dee9)

Salve a imagem em seu computador:

![](https://3873222052-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M8H19OxR4N0phXKpriO%2F-MZys_5-7_fExJHC3jVi%2F-MZyvzpVQXVDDkG1smvd%2F2021-05-05_20h48_06.png?alt=media\&token=489206e7-3d76-4bce-89d8-f2de90787d07)
