Confira nosso guia em v\u00eddeo sobre a Compress\u00e3o com perdas vs sem perdas<\/a><\/h3>\n<\/kinsta-video><\/p>\nDiferen\u00e7as entre a compress\u00e3o com perdas e sem perdas<\/h2>\n
Quando se trata de qualquer das compress\u00f5es de imagem digital, existem v\u00e1rios formatos diferentes para escolher. Algumas vezes estes ter\u00e3o outros nomes, dependendo de muitos fatores. No entanto, em um n\u00edvel central, voc\u00ea encontrar\u00e1 dois tipos:<\/p>\n
\n- Compress\u00e3o com perdas:<\/b> O objetivo aqui \u00e9 fornecer o menor tamanho de arquivo poss\u00edvel para uma imagem. Como tal, a qualidade da imagem \u00e9 frequentemente baixa na lista de prioridades.<\/li>\n
- Compress\u00e3o sem perdas:<\/b> Voc\u00ea ainda encontrar\u00e1 uma redu\u00e7\u00e3o substancial no tamanho do arquivo com este formato de compress\u00e3o, mas a imagem n\u00e3o sofrer\u00e1 de artefatos e outros problemas.<\/li>\n<\/ul>\n
Geralmente, sua decis\u00e3o sobre qual formato usar se resumir\u00e1 ao seu objetivo final: voc\u00ea quer arquivos min\u00fasculos, ou seu foco \u00e9 a preserva\u00e7\u00e3o da qualidade?<\/p>\n
A compress\u00e3o com perdas remover\u00e1 permanentemente da imagem os dados que ela julgar desnecess\u00e1rios. Ela usa muitas t\u00e9cnicas diferentes para conseguir isso, resultando em arquivos de tamanho muito mais lato.<\/p>\n
A compress\u00e3o sem perdas tamb\u00e9m remove os dados, mas pode restaurar o original se necess\u00e1rio. O objetivo \u00e9 manter a qualidade alta, mas reduzir o tamanho do arquivo.<\/p>\n
Existem algumas maneiras de conseguir isso, mas o resultado \u00e9 muitas vezes o mesmo. Para descobrir a op\u00e7\u00e3o certa para suas necessidades, vamos primeiro dar um passo atr\u00e1s e rever os conceitos b\u00e1sicos de imagens e compress\u00e3o em geral.<\/p>\n\n
Elementos de uma Imagem Digital<\/h2>\n
Como software e desenvolvimento web, muitas vezes h\u00e1 uma “pilha” para levar uma imagem da c\u00e2mera para a web.<\/p>\n
Uma imagem come\u00e7a como dados “brutos” (da\u00ed o nome RAW). Isto \u00e9 parecido com o c\u00f3digo de um aplicativo: os snippets, linhas e valores se traduzem em fundos com cores, suportes de imagem, elementos din\u00e2micos, e muito mais.<\/p>\n
Para uma imagem, o arquivo RAW apresenta uma representa\u00e7\u00e3o de imagem ligeiramente diferente com base no fabricante da c\u00e2mera, software de edi\u00e7\u00e3o, algoritmo de espa\u00e7o de cores e muito mais. A partir da\u00ed, voc\u00ea edita a imagem e a exporta como um dos v\u00e1rios formatos de arquivo (mais sobre estes mais tarde):<\/p>\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/editing-software.png\")
Um exemplo de edi\u00e7\u00e3o de um arquivo RAW em Capture One.<\/figcaption><\/figure>\nExistem alguns elementos diferentes que comp\u00f5em uma imagem digital padr\u00e3o:<\/p>\n
\n- Tipo de arquivo:<\/b> Tipos diferentes fornecer\u00e3o qualidades que podem ou n\u00e3o se adequar \u00e0 sua imagem final. A chave \u00e9 escolher o tipo de arquivo mais adequado para o aplicativo.<\/li>\n
- Resolu\u00e7\u00e3o:<\/b> Voc\u00ea ver\u00e1 isto frequentemente expresso como megapixels (MP), mas voc\u00ea tamb\u00e9m usar\u00e1 pixels per inch (PPI) ou pontos por polegada (DPI). Resolu\u00e7\u00f5es mais altas oferecem maior qualidade, mas elas tamb\u00e9m aumentam o tamanho inicial do arquivo.<\/li>\n
- Um pouco de profundidade:<\/b> Este aspecto determina a informa\u00e7\u00e3o de cor em uma imagem. Uma baixa profundidade de bit renderizar\u00e1 apenas algumas cores, enquanto uma alta profundidade de bit poderia potencialmente renderizar milh\u00f5es de cores de uma s\u00f3 vez. Geralmente, mais alto \u00e9 melhor.<\/li>\n
- Dimens\u00f5es:<\/b> Este \u00e9 o espa\u00e7o f\u00edsico que uma imagem ocupa. Por exemplo, 1.000 pixels x 500 pixels poderiam definir o tamanho total de uma imagem.<\/li>\n
- Espa\u00e7o de cor:<\/b> Este \u00e9 um algoritmo que determina como as cores s\u00e3o exibidas. Cada espa\u00e7o de cor \u00e9 definido de forma diferente e muitas vezes se resume \u00e0 prefer\u00eancia do fot\u00f3grafo.<\/li>\n<\/ul>\n
Estes elementos se combinam para fornecer uma imagem final de qualidade vari\u00e1vel. Por exemplo, uma fotografia JPEG grande, de alta resolu\u00e7\u00e3o e de alta profundidade de bits ir\u00e1 oferecer qualidade suprema e nitidez:<\/p>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/high-quality-image.jpg\")
Uma imagem com alta qualidade.<\/figcaption><\/figure>\nEm contraste, mesmo uma imagem com grandes dimens\u00f5es e a capacidade de exibir muitas cores pode parecer pobre a uma baixa resolu\u00e7\u00e3o:<\/p>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/low-quality-image.jpg\")
Uma imagem com baixa qualidade.<\/figcaption><\/figure>\nEste equil\u00edbrio \u00e9 como voc\u00ea desenvolve a imagem central antes de aplicar a compress\u00e3o. Entretanto, o formato que voc\u00ea usa para a imagem tem uma grande parte na qualidade final.<\/p>\n
Como funciona a Otimiza\u00e7\u00e3o de Imagem na Web<\/h2>\n
Como a compress\u00e3o de imagens \u00e9 a mesma em um sentido geral sob o cap\u00f4, voc\u00ea pode aplicar regras padr\u00e3o \u00e0 forma como voc\u00ea otimiza as imagens para a web.<\/p>\n
Cobrimos muitos desses conceitos em outros lugares no blog Kinsta<\/a>, mas vale a pena dar um r\u00e1pido resumo para refer\u00eancia:<\/p>\n\n- Use uma resolu\u00e7\u00e3o de 72 PPI, j\u00e1 que este \u00e9 o padr\u00e3o para a web. Voc\u00ea pode usar um PPI\/DPI mais alto por raz\u00f5es de arquivamento, mas assumimos que voc\u00ea est\u00e1 publicando na web.<\/li>\n
- Ajuste a “borda longa” da imagem para 2048px, pois este \u00e9 o ideal para muitos aplicativos diferentes.<\/li>\n
- Use uma profundidade de cor de 8 bits se voc\u00ea tiver a op\u00e7\u00e3o.<\/li>\n
- Execute uma imagem atrav\u00e9s de uma ferramenta de compress\u00e3o e otimiza\u00e7\u00e3o antes de publicar.<\/li>\n<\/ul>\n
\u00c9 um formato simples que pode lhe dar resultados consistentes, embora a compress\u00e3o e otimiza\u00e7\u00e3o seja algo que expandiremos sobre o resto deste artigo.<\/p>\n
Para isso, olharemos para os benef\u00edcios e desvantagens da compress\u00e3o com perdas versus sem perdas.<\/p>\n
Como a compress\u00e3o de imagens pode ajudar suas imagens na web<\/h3>\n
Em termos gerais, a “compress\u00e3o” aperta o m\u00ednimo e o m\u00e1ximo juntos. Por exemplo, a compress\u00e3o aumenta o volume mais baixo na m\u00fasica e reduz o mais alto. Isto torna o n\u00edvel m\u00e9dio mais alto para o ouvido.<\/p>\n
Para imagens, a compress\u00e3o \u00e9 mais um processo redutor. Isto significa haver uma maior \u00eanfase em tirar dados de sua imagem para reduzir o tamanho do arquivo, enquanto mant\u00e9m a qualidade o mais alta poss\u00edvel.<\/p>\n
Existem muitos algoritmos propriet\u00e1rios diferentes para ajudar a reduzir o tamanho dos arquivos de imagem. Em muitos casos, estes s\u00e3o propriet\u00e1rios de uma empresa espec\u00edfica. Voc\u00ea encontrar\u00e1 muitos padr\u00f5es de compress\u00e3o “com perdas” e “sem perdas”, cada um com descritores \u00fanicos:<\/p>\n![\"As](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/compression-formats.png\")
As op\u00e7\u00f5es de compress\u00f5es dentro do ShortPixel<\/figcaption><\/figure>\nTudo isso dito, h\u00e1 muitos benef\u00edcios no aplicativo de compress\u00e3o de imagem que n\u00e3o s\u00e3o exclusivos de um formato em particular:<\/p>\n
\n- Voc\u00ea pode manter os tamanhos dos arquivos baixos, melhorando o desempenho do seu site.<\/li>\n
- Por extens\u00e3o, o servidor do seu site ter\u00e1 menos trabalho a fazer, impactando a performance.<\/li>\n
- Pequenos tamanhos de arquivo ajudam a reduzir as emiss\u00f5es do servidor. Como tal, voc\u00ea ajuda a contribuir para um futuro sustent\u00e1vel e \u00e9tico.<\/li>\n
- Voc\u00ea consegue exibir uma qualidade quase perfeita e compar\u00e1vel, dependendo do algoritmo e da qualidade de compress\u00e3o que voc\u00ea escolher.<\/li>\n<\/ul>\n
Muito como criar uma imagem compartilh\u00e1vel, jogar com v\u00e1rios valores de compress\u00e3o, usar uma empresa espec\u00edfica e escolher o algoritmo correto s\u00e3o vitais para encontrar resultados que funcionem para voc\u00ea.<\/p>\n
Pr\u00f3s e contras da compress\u00e3o com perdas<\/h2>\n
A compress\u00e3o com perdas<\/a> reduz o tamanho do arquivo da imagem, quase excluindo todos os outros aspectos. A maneira como o algoritmo funciona \u00e9 para remover dados permanentemente. Isto pode ser t\u00e3o destrutivo quanto parece.<\/p>\nEmbora n\u00e3o entraremos muito nas porcas e parafusos, saiba que alguns dos dados removidos por compress\u00e3o com perdas s\u00e3o vis\u00edveis na imagem. A ideia \u00e9 oferecer a melhor representa\u00e7\u00e3o da imagem original de alta qualidade com um peso menor – e isso significa que alguns dados n\u00e3o far\u00e3o o corte.<\/p>\n
Em geral, h\u00e1 um par de benef\u00edcios no uso de compress\u00e3o com perdas:<\/p>\n
\n- Os tamanhos dos arquivos ser\u00e3o pequenos – em alguns casos, abaixo de 10 kilobytes (KB).<\/li>\n
- A perda de qualidade ser\u00e1 aceit\u00e1vel em muitos casos, apesar dos artefatos.<\/li>\n<\/ul>\n
Isto nos leva aos negativos por usar compress\u00e3o com perdas – que a qualidade da imagem ir\u00e1 reduzir com qualquer quantidade de compress\u00e3o:<\/p>\n![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/compression-slider.png\")
Uma barra deslizante de compress\u00e3o para uma imagem JPEG.<\/figcaption><\/figure>\nVoc\u00ea ver\u00e1 que a faixa de cores – onde as sombras das cores n\u00e3o se renderizam da maneira correta – e uma perda de clareza da borda ser\u00e1 vis\u00edvel em alguns casos. Imagens com menos cores mostrar\u00e3o menos disto, mas a redu\u00e7\u00e3o na claridade ainda estar\u00e1 presente.<\/p>\n
Al\u00e9m disso, a degrada\u00e7\u00e3o da imagem \u00e9 uma caracter\u00edstica permanente do processo de compress\u00e3o. Isto significa que n\u00e3o h\u00e1 como reverter os efeitos em uma data posterior.<\/p>\n
Apesar dos inconvenientes, a compress\u00e3o com perdas \u00e9 excelente para a web e para o desempenho do seu site. Os pequenos tamanhos de arquivo nem sempre resultam em imagens granulosas, embora voc\u00ea possa (\u00e9 claro) levar as coisas a extremos:<\/p>\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/over-compressed-cat-min.jpg\")
<\/a>Um exemplo de uma imagem excessivamente comprimida.<\/figcaption><\/figure>\nNo entanto, a perda n\u00e3o \u00e9 a \u00fanica op\u00e7\u00e3o. A compress\u00e3o sem perdas \u00e9 uma alternativa para o propriet\u00e1rio de um site consciente da qualidade.<\/p>\n
Pr\u00f3s e contras da compress\u00e3o sem perdas<\/h2>\n
A compress\u00e3o sem perdas faz o que diz no r\u00f3tulo: ela comprime o tamanho do arquivo de uma imagem o m\u00e1ximo poss\u00edvel sem afetar a qualidade vis\u00edvel. Ela faz isso removendo metadados de imagem, o que pode ocupar espa\u00e7o desnecess\u00e1rio:<\/p>\n![\"Metadados](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/image-metadata.png\")
Metadados de uma imagem.<\/figcaption><\/figure>\nO algoritmo de compress\u00e3o sem perdas tamb\u00e9m procura pela repeti\u00e7\u00e3o de sequ\u00eancias de pixels, depois codifica um atalho para exibi-las. Por exemplo, pegue “Command Line Interface” Voc\u00ea frequentemente definir\u00e1 sua sigla uma vez, ent\u00e3o use “CLI” (ou sua sigla escolhida) para referenci\u00e1-la \u00e0 velocidade da luz.<\/p>\n
A compress\u00e3o sem perdas funciona da mesma forma, pois \u00e9 menos destrutiva. Embora a remo\u00e7\u00e3o dos metadados n\u00e3o seja revers\u00edvel, parte da compress\u00e3o ser\u00e1, tornando-a um algoritmo flex\u00edvel para muitos usos.<\/p>\n
Os pr\u00f3s do uso da compress\u00e3o sem perdas giram em torno da reten\u00e7\u00e3o da qualidade:<\/p>\n
\n- A compress\u00e3o sem perdas preserva a maior qualidade em uma imagem em compara\u00e7\u00e3o com todos os outros algoritmos.<\/li>\n
- A compress\u00e3o sem perdas \u00e9 fant\u00e1stico para fins de arquivamento. Por exemplo, um fot\u00f3grafo pode equilibrar os recursos de armazenamento com uma imagem que preserva a maioria dos dados.<\/li>\n
- A compress\u00e3o sem perdas \u00e9 o algoritmo de compress\u00e3o preferido para artes visuais: fotografia, design gr\u00e1fico, arte digital, e muito mais. Combinando um algoritmo sem perdas com a profundidade e a resolu\u00e7\u00e3o adequadas, pode-se conseguir quase uma c\u00f3pia “um-para-um”.<\/li>\n<\/ul>\n
Entretanto, h\u00e1 algo a se notar sobre o qu\u00e3o bem a compress\u00e3o sem perdas serve a nichos espec\u00edficos: A gama de aplicativos \u00e9 pequena. Isto reduz sua disponibilidade geral.<\/p>\n
Aqui est\u00e3o alguns outros inconvenientes de compress\u00e3o sem perdas a serem considerados:<\/p>\n
\n- Caso um site usa muitas imagens, a compress\u00e3o sem perdas pode n\u00e3o ser a ideal para exibi-las. Isto \u00e9 porque voc\u00ea vai querer valorizar tamanhos de arquivo menores nestes tipos de situa\u00e7\u00f5es na maioria dos casos.<\/li>\n
- Embora a compress\u00e3o reduza o tamanho dos arquivos, os algoritmos sem perdas n\u00e3o alteram os dados das imagens tanto quanto os com perdas. Por causa disso, voc\u00ea pode ver apenas redu\u00e7\u00f5es marginais no tamanho ao inv\u00e9s de resultados de emagrecimento extremo.<\/li>\n<\/ul>\n
A seguir, vamos olhar para a maneira mais r\u00e1pida (e potencialmente melhor) de fazer isso.<\/p>\n
Como escolher entre com perdas vs sem perdas<\/h2>\n
Neste ponto, voc\u00ea entende a diferen\u00e7a entre compress\u00e3o com perdas e sem perdas. No entanto, voc\u00ea ainda pode n\u00e3o saber qual \u00e9 o melhor algoritmo a ser usado em seu site.<\/p>\n
H\u00e1 duas situa\u00e7\u00f5es a serem consideradas:<\/p>\n
\n- Para a maioria dos casos de uso na web, a compress\u00e3o sem perdas \u00e9 aceit\u00e1vel.<\/li>\n
- Caso voc\u00ea quiser exibir fotografia ou arte fotografada, a compress\u00e3o sem perdas lhe servir\u00e1 melhor.<\/li>\n<\/ol>\n
Estas considera\u00e7\u00f5es dependem do uso de um dos formatos de imagem padr\u00e3o da web, tais como JPEG, PNG ou GIF. Entretanto, suas necessidades de compress\u00e3o podem diferir com formatos mais modernos como HEIC e WebP.<\/p>\n
Chegar\u00edamos ao ponto de dizer que, a menos que voc\u00ea exiba fotografia em seu site, a compress\u00e3o com perdas deve ser sua escolha padr\u00e3o. O WordPress comprime imagens<\/a> por padr\u00e3o, indo longe para ilustrar que a compress\u00e3o com perdas \u00e9 adequada para quase todos os aplicativos.<\/p>\nUsando um servi\u00e7o de compress\u00e3o online para otimizar suas imagens<\/h2>\n
H\u00e1 muitas maneiras de voc\u00ea comprimir suas imagens antes de mostr\u00e1-las em seu site. Por exemplo, voc\u00ea pode escolher aplicar a compress\u00e3o na fase de edi\u00e7\u00e3o. Isto pode ser um subproduto da convers\u00e3o dos formatos RAW de qualquer maneira.<\/p>\n
Alguns provedores de hospedagem premium como Kinsta at\u00e9 oferecem servi\u00e7os integrados que podem ajudar voc\u00ea a otimizar seus arquivos de imagem automaticamente. O recurso de Otimiza\u00e7\u00e3o de Imagens da Kinsta<\/a>, gratuito para todos os clientes, cria vers\u00f5es WebP<\/a> de suas imagens e depois entrega a vers\u00e3o reduzida aos seus visitantes usando o veloz CDN<\/a> da Kinsta. Voc\u00ea pode escolher entre compress\u00e3o com e sem perdas, e voc\u00ea tamb\u00e9m pode ativar ou desativar a funcionalidade \u00e0 vontade.<\/p>\nAl\u00e9m das ferramentas incorporadas, voc\u00ea tamb\u00e9m pode escolher entre muitos servi\u00e7os on-line. Cada um deles ir\u00e1 oferecer uma sele\u00e7\u00e3o de algoritmos e uma interface de usu\u00e1rio (IU) exemplar. Al\u00e9m disso, a maioria tem algum servi\u00e7o gratuito, pelo menos para experimentar o aplicativo antes de voc\u00ea se comprometer.<\/p>\n
Cobrimos algumas op\u00e7\u00f5es em nosso artigo sobre otimiza\u00e7\u00e3o de imagens<\/a>, embora estes sejam plugins espec\u00edficos para WordPress que se conectam a uma interface de programa\u00e7\u00e3o de aplicativos (API). A boa not\u00edcia \u00e9 que muitos desses plugins tamb\u00e9m fornecem uma interface online. Por exemplo, considere o ShortPixel<\/a>:<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/shortpixel-interface.png\")
A interface ShortPixel.<\/figcaption><\/figure>\nAqui, voc\u00ea vai arrastar as imagens para o uploader, depois esperar que o aplicativo as comprima e as processe. Entretanto, voc\u00ea vai querer escolher o algoritmo primeiro, pois o processo come\u00e7ar\u00e1 imediatamente.<\/p>\n
A escolha \u00e9 simples: Duas formas de compress\u00e3o com perdas (“Lossy” e “Glossy”), e uma op\u00e7\u00e3o sem perdas. A interface do ShortPixel faz um bom trabalho para explicar a diferen\u00e7a entre cada algoritmo, e voc\u00ea pode baixar as imagens em segundos.<\/p>\n
Diferen\u00e7as entre a compress\u00e3o com perdas e sem perdas<\/h2>\n
Quando se trata de qualquer das compress\u00f5es de imagem digital, existem v\u00e1rios formatos diferentes para escolher. Algumas vezes estes ter\u00e3o outros nomes, dependendo de muitos fatores. No entanto, em um n\u00edvel central, voc\u00ea encontrar\u00e1 dois tipos:<\/p>\n
- \n
- Compress\u00e3o com perdas:<\/b> O objetivo aqui \u00e9 fornecer o menor tamanho de arquivo poss\u00edvel para uma imagem. Como tal, a qualidade da imagem \u00e9 frequentemente baixa na lista de prioridades.<\/li>\n
- Compress\u00e3o sem perdas:<\/b> Voc\u00ea ainda encontrar\u00e1 uma redu\u00e7\u00e3o substancial no tamanho do arquivo com este formato de compress\u00e3o, mas a imagem n\u00e3o sofrer\u00e1 de artefatos e outros problemas.<\/li>\n<\/ul>\n
Geralmente, sua decis\u00e3o sobre qual formato usar se resumir\u00e1 ao seu objetivo final: voc\u00ea quer arquivos min\u00fasculos, ou seu foco \u00e9 a preserva\u00e7\u00e3o da qualidade?<\/p>\n
A compress\u00e3o com perdas remover\u00e1 permanentemente da imagem os dados que ela julgar desnecess\u00e1rios. Ela usa muitas t\u00e9cnicas diferentes para conseguir isso, resultando em arquivos de tamanho muito mais lato.<\/p>\n
A compress\u00e3o sem perdas tamb\u00e9m remove os dados, mas pode restaurar o original se necess\u00e1rio. O objetivo \u00e9 manter a qualidade alta, mas reduzir o tamanho do arquivo.<\/p>\n
Existem algumas maneiras de conseguir isso, mas o resultado \u00e9 muitas vezes o mesmo. Para descobrir a op\u00e7\u00e3o certa para suas necessidades, vamos primeiro dar um passo atr\u00e1s e rever os conceitos b\u00e1sicos de imagens e compress\u00e3o em geral.<\/p>\n\n
Elementos de uma Imagem Digital<\/h2>\n
Como software e desenvolvimento web, muitas vezes h\u00e1 uma “pilha” para levar uma imagem da c\u00e2mera para a web.<\/p>\n
Uma imagem come\u00e7a como dados “brutos” (da\u00ed o nome RAW). Isto \u00e9 parecido com o c\u00f3digo de um aplicativo: os snippets, linhas e valores se traduzem em fundos com cores, suportes de imagem, elementos din\u00e2micos, e muito mais.<\/p>\n
Para uma imagem, o arquivo RAW apresenta uma representa\u00e7\u00e3o de imagem ligeiramente diferente com base no fabricante da c\u00e2mera, software de edi\u00e7\u00e3o, algoritmo de espa\u00e7o de cores e muito mais. A partir da\u00ed, voc\u00ea edita a imagem e a exporta como um dos v\u00e1rios formatos de arquivo (mais sobre estes mais tarde):<\/p>\n
Um exemplo de edi\u00e7\u00e3o de um arquivo RAW em Capture One.<\/figcaption><\/figure>\n Existem alguns elementos diferentes que comp\u00f5em uma imagem digital padr\u00e3o:<\/p>\n
- \n
- Tipo de arquivo:<\/b> Tipos diferentes fornecer\u00e3o qualidades que podem ou n\u00e3o se adequar \u00e0 sua imagem final. A chave \u00e9 escolher o tipo de arquivo mais adequado para o aplicativo.<\/li>\n
- Resolu\u00e7\u00e3o:<\/b> Voc\u00ea ver\u00e1 isto frequentemente expresso como megapixels (MP), mas voc\u00ea tamb\u00e9m usar\u00e1 pixels per inch (PPI) ou pontos por polegada (DPI). Resolu\u00e7\u00f5es mais altas oferecem maior qualidade, mas elas tamb\u00e9m aumentam o tamanho inicial do arquivo.<\/li>\n
- Um pouco de profundidade:<\/b> Este aspecto determina a informa\u00e7\u00e3o de cor em uma imagem. Uma baixa profundidade de bit renderizar\u00e1 apenas algumas cores, enquanto uma alta profundidade de bit poderia potencialmente renderizar milh\u00f5es de cores de uma s\u00f3 vez. Geralmente, mais alto \u00e9 melhor.<\/li>\n
- Dimens\u00f5es:<\/b> Este \u00e9 o espa\u00e7o f\u00edsico que uma imagem ocupa. Por exemplo, 1.000 pixels x 500 pixels poderiam definir o tamanho total de uma imagem.<\/li>\n
- Espa\u00e7o de cor:<\/b> Este \u00e9 um algoritmo que determina como as cores s\u00e3o exibidas. Cada espa\u00e7o de cor \u00e9 definido de forma diferente e muitas vezes se resume \u00e0 prefer\u00eancia do fot\u00f3grafo.<\/li>\n<\/ul>\n
Estes elementos se combinam para fornecer uma imagem final de qualidade vari\u00e1vel. Por exemplo, uma fotografia JPEG grande, de alta resolu\u00e7\u00e3o e de alta profundidade de bits ir\u00e1 oferecer qualidade suprema e nitidez:<\/p>\n
Uma imagem com alta qualidade.<\/figcaption><\/figure>\n Em contraste, mesmo uma imagem com grandes dimens\u00f5es e a capacidade de exibir muitas cores pode parecer pobre a uma baixa resolu\u00e7\u00e3o:<\/p>\n
Uma imagem com baixa qualidade.<\/figcaption><\/figure>\n Este equil\u00edbrio \u00e9 como voc\u00ea desenvolve a imagem central antes de aplicar a compress\u00e3o. Entretanto, o formato que voc\u00ea usa para a imagem tem uma grande parte na qualidade final.<\/p>\n
Como funciona a Otimiza\u00e7\u00e3o de Imagem na Web<\/h2>\n
Como a compress\u00e3o de imagens \u00e9 a mesma em um sentido geral sob o cap\u00f4, voc\u00ea pode aplicar regras padr\u00e3o \u00e0 forma como voc\u00ea otimiza as imagens para a web.<\/p>\n
Cobrimos muitos desses conceitos em outros lugares no blog Kinsta<\/a>, mas vale a pena dar um r\u00e1pido resumo para refer\u00eancia:<\/p>\n
- \n
- Use uma resolu\u00e7\u00e3o de 72 PPI, j\u00e1 que este \u00e9 o padr\u00e3o para a web. Voc\u00ea pode usar um PPI\/DPI mais alto por raz\u00f5es de arquivamento, mas assumimos que voc\u00ea est\u00e1 publicando na web.<\/li>\n
- Ajuste a “borda longa” da imagem para 2048px, pois este \u00e9 o ideal para muitos aplicativos diferentes.<\/li>\n
- Use uma profundidade de cor de 8 bits se voc\u00ea tiver a op\u00e7\u00e3o.<\/li>\n
- Execute uma imagem atrav\u00e9s de uma ferramenta de compress\u00e3o e otimiza\u00e7\u00e3o antes de publicar.<\/li>\n<\/ul>\n
\u00c9 um formato simples que pode lhe dar resultados consistentes, embora a compress\u00e3o e otimiza\u00e7\u00e3o seja algo que expandiremos sobre o resto deste artigo.<\/p>\n
Para isso, olharemos para os benef\u00edcios e desvantagens da compress\u00e3o com perdas versus sem perdas.<\/p>\n
Como a compress\u00e3o de imagens pode ajudar suas imagens na web<\/h3>\n
Em termos gerais, a “compress\u00e3o” aperta o m\u00ednimo e o m\u00e1ximo juntos. Por exemplo, a compress\u00e3o aumenta o volume mais baixo na m\u00fasica e reduz o mais alto. Isto torna o n\u00edvel m\u00e9dio mais alto para o ouvido.<\/p>\n
Para imagens, a compress\u00e3o \u00e9 mais um processo redutor. Isto significa haver uma maior \u00eanfase em tirar dados de sua imagem para reduzir o tamanho do arquivo, enquanto mant\u00e9m a qualidade o mais alta poss\u00edvel.<\/p>\n
Existem muitos algoritmos propriet\u00e1rios diferentes para ajudar a reduzir o tamanho dos arquivos de imagem. Em muitos casos, estes s\u00e3o propriet\u00e1rios de uma empresa espec\u00edfica. Voc\u00ea encontrar\u00e1 muitos padr\u00f5es de compress\u00e3o “com perdas” e “sem perdas”, cada um com descritores \u00fanicos:<\/p>\n
As op\u00e7\u00f5es de compress\u00f5es dentro do ShortPixel<\/figcaption><\/figure>\n Tudo isso dito, h\u00e1 muitos benef\u00edcios no aplicativo de compress\u00e3o de imagem que n\u00e3o s\u00e3o exclusivos de um formato em particular:<\/p>\n
- \n
- Voc\u00ea pode manter os tamanhos dos arquivos baixos, melhorando o desempenho do seu site.<\/li>\n
- Por extens\u00e3o, o servidor do seu site ter\u00e1 menos trabalho a fazer, impactando a performance.<\/li>\n
- Pequenos tamanhos de arquivo ajudam a reduzir as emiss\u00f5es do servidor. Como tal, voc\u00ea ajuda a contribuir para um futuro sustent\u00e1vel e \u00e9tico.<\/li>\n
- Voc\u00ea consegue exibir uma qualidade quase perfeita e compar\u00e1vel, dependendo do algoritmo e da qualidade de compress\u00e3o que voc\u00ea escolher.<\/li>\n<\/ul>\n
Muito como criar uma imagem compartilh\u00e1vel, jogar com v\u00e1rios valores de compress\u00e3o, usar uma empresa espec\u00edfica e escolher o algoritmo correto s\u00e3o vitais para encontrar resultados que funcionem para voc\u00ea.<\/p>\n
Pr\u00f3s e contras da compress\u00e3o com perdas<\/h2>\n
A compress\u00e3o com perdas<\/a> reduz o tamanho do arquivo da imagem, quase excluindo todos os outros aspectos. A maneira como o algoritmo funciona \u00e9 para remover dados permanentemente. Isto pode ser t\u00e3o destrutivo quanto parece.<\/p>\n
Embora n\u00e3o entraremos muito nas porcas e parafusos, saiba que alguns dos dados removidos por compress\u00e3o com perdas s\u00e3o vis\u00edveis na imagem. A ideia \u00e9 oferecer a melhor representa\u00e7\u00e3o da imagem original de alta qualidade com um peso menor – e isso significa que alguns dados n\u00e3o far\u00e3o o corte.<\/p>\n
Em geral, h\u00e1 um par de benef\u00edcios no uso de compress\u00e3o com perdas:<\/p>\n
- \n
- Os tamanhos dos arquivos ser\u00e3o pequenos – em alguns casos, abaixo de 10 kilobytes (KB).<\/li>\n
- A perda de qualidade ser\u00e1 aceit\u00e1vel em muitos casos, apesar dos artefatos.<\/li>\n<\/ul>\n
Isto nos leva aos negativos por usar compress\u00e3o com perdas – que a qualidade da imagem ir\u00e1 reduzir com qualquer quantidade de compress\u00e3o:<\/p>\n
Uma barra deslizante de compress\u00e3o para uma imagem JPEG.<\/figcaption><\/figure>\n Voc\u00ea ver\u00e1 que a faixa de cores – onde as sombras das cores n\u00e3o se renderizam da maneira correta – e uma perda de clareza da borda ser\u00e1 vis\u00edvel em alguns casos. Imagens com menos cores mostrar\u00e3o menos disto, mas a redu\u00e7\u00e3o na claridade ainda estar\u00e1 presente.<\/p>\n
Al\u00e9m disso, a degrada\u00e7\u00e3o da imagem \u00e9 uma caracter\u00edstica permanente do processo de compress\u00e3o. Isto significa que n\u00e3o h\u00e1 como reverter os efeitos em uma data posterior.<\/p>\n
Apesar dos inconvenientes, a compress\u00e3o com perdas \u00e9 excelente para a web e para o desempenho do seu site. Os pequenos tamanhos de arquivo nem sempre resultam em imagens granulosas, embora voc\u00ea possa (\u00e9 claro) levar as coisas a extremos:<\/p>\n
<\/a>Um exemplo de uma imagem excessivamente comprimida.<\/figcaption><\/figure>\n No entanto, a perda n\u00e3o \u00e9 a \u00fanica op\u00e7\u00e3o. A compress\u00e3o sem perdas \u00e9 uma alternativa para o propriet\u00e1rio de um site consciente da qualidade.<\/p>\n
Pr\u00f3s e contras da compress\u00e3o sem perdas<\/h2>\n
A compress\u00e3o sem perdas faz o que diz no r\u00f3tulo: ela comprime o tamanho do arquivo de uma imagem o m\u00e1ximo poss\u00edvel sem afetar a qualidade vis\u00edvel. Ela faz isso removendo metadados de imagem, o que pode ocupar espa\u00e7o desnecess\u00e1rio:<\/p>\n
Metadados de uma imagem.<\/figcaption><\/figure>\n O algoritmo de compress\u00e3o sem perdas tamb\u00e9m procura pela repeti\u00e7\u00e3o de sequ\u00eancias de pixels, depois codifica um atalho para exibi-las. Por exemplo, pegue “Command Line Interface” Voc\u00ea frequentemente definir\u00e1 sua sigla uma vez, ent\u00e3o use “CLI” (ou sua sigla escolhida) para referenci\u00e1-la \u00e0 velocidade da luz.<\/p>\n
A compress\u00e3o sem perdas funciona da mesma forma, pois \u00e9 menos destrutiva. Embora a remo\u00e7\u00e3o dos metadados n\u00e3o seja revers\u00edvel, parte da compress\u00e3o ser\u00e1, tornando-a um algoritmo flex\u00edvel para muitos usos.<\/p>\n
Os pr\u00f3s do uso da compress\u00e3o sem perdas giram em torno da reten\u00e7\u00e3o da qualidade:<\/p>\n
- \n
- A compress\u00e3o sem perdas preserva a maior qualidade em uma imagem em compara\u00e7\u00e3o com todos os outros algoritmos.<\/li>\n
- A compress\u00e3o sem perdas \u00e9 fant\u00e1stico para fins de arquivamento. Por exemplo, um fot\u00f3grafo pode equilibrar os recursos de armazenamento com uma imagem que preserva a maioria dos dados.<\/li>\n
- A compress\u00e3o sem perdas \u00e9 o algoritmo de compress\u00e3o preferido para artes visuais: fotografia, design gr\u00e1fico, arte digital, e muito mais. Combinando um algoritmo sem perdas com a profundidade e a resolu\u00e7\u00e3o adequadas, pode-se conseguir quase uma c\u00f3pia “um-para-um”.<\/li>\n<\/ul>\n
Entretanto, h\u00e1 algo a se notar sobre o qu\u00e3o bem a compress\u00e3o sem perdas serve a nichos espec\u00edficos: A gama de aplicativos \u00e9 pequena. Isto reduz sua disponibilidade geral.<\/p>\n
Aqui est\u00e3o alguns outros inconvenientes de compress\u00e3o sem perdas a serem considerados:<\/p>\n
- \n
- Caso um site usa muitas imagens, a compress\u00e3o sem perdas pode n\u00e3o ser a ideal para exibi-las. Isto \u00e9 porque voc\u00ea vai querer valorizar tamanhos de arquivo menores nestes tipos de situa\u00e7\u00f5es na maioria dos casos.<\/li>\n
- Embora a compress\u00e3o reduza o tamanho dos arquivos, os algoritmos sem perdas n\u00e3o alteram os dados das imagens tanto quanto os com perdas. Por causa disso, voc\u00ea pode ver apenas redu\u00e7\u00f5es marginais no tamanho ao inv\u00e9s de resultados de emagrecimento extremo.<\/li>\n<\/ul>\n
A seguir, vamos olhar para a maneira mais r\u00e1pida (e potencialmente melhor) de fazer isso.<\/p>\n
Como escolher entre com perdas vs sem perdas<\/h2>\n
Neste ponto, voc\u00ea entende a diferen\u00e7a entre compress\u00e3o com perdas e sem perdas. No entanto, voc\u00ea ainda pode n\u00e3o saber qual \u00e9 o melhor algoritmo a ser usado em seu site.<\/p>\n
H\u00e1 duas situa\u00e7\u00f5es a serem consideradas:<\/p>\n
- \n
- Para a maioria dos casos de uso na web, a compress\u00e3o sem perdas \u00e9 aceit\u00e1vel.<\/li>\n
- Caso voc\u00ea quiser exibir fotografia ou arte fotografada, a compress\u00e3o sem perdas lhe servir\u00e1 melhor.<\/li>\n<\/ol>\n
Estas considera\u00e7\u00f5es dependem do uso de um dos formatos de imagem padr\u00e3o da web, tais como JPEG, PNG ou GIF. Entretanto, suas necessidades de compress\u00e3o podem diferir com formatos mais modernos como HEIC e WebP.<\/p>\n
Chegar\u00edamos ao ponto de dizer que, a menos que voc\u00ea exiba fotografia em seu site, a compress\u00e3o com perdas deve ser sua escolha padr\u00e3o. O WordPress comprime imagens<\/a> por padr\u00e3o, indo longe para ilustrar que a compress\u00e3o com perdas \u00e9 adequada para quase todos os aplicativos.<\/p>\n
Usando um servi\u00e7o de compress\u00e3o online para otimizar suas imagens<\/h2>\n
H\u00e1 muitas maneiras de voc\u00ea comprimir suas imagens antes de mostr\u00e1-las em seu site. Por exemplo, voc\u00ea pode escolher aplicar a compress\u00e3o na fase de edi\u00e7\u00e3o. Isto pode ser um subproduto da convers\u00e3o dos formatos RAW de qualquer maneira.<\/p>\n
Alguns provedores de hospedagem premium como Kinsta at\u00e9 oferecem servi\u00e7os integrados que podem ajudar voc\u00ea a otimizar seus arquivos de imagem automaticamente. O recurso de Otimiza\u00e7\u00e3o de Imagens da Kinsta<\/a>, gratuito para todos os clientes, cria vers\u00f5es WebP<\/a> de suas imagens e depois entrega a vers\u00e3o reduzida aos seus visitantes usando o veloz CDN<\/a> da Kinsta. Voc\u00ea pode escolher entre compress\u00e3o com e sem perdas, e voc\u00ea tamb\u00e9m pode ativar ou desativar a funcionalidade \u00e0 vontade.<\/p>\n
Al\u00e9m das ferramentas incorporadas, voc\u00ea tamb\u00e9m pode escolher entre muitos servi\u00e7os on-line. Cada um deles ir\u00e1 oferecer uma sele\u00e7\u00e3o de algoritmos e uma interface de usu\u00e1rio (IU) exemplar. Al\u00e9m disso, a maioria tem algum servi\u00e7o gratuito, pelo menos para experimentar o aplicativo antes de voc\u00ea se comprometer.<\/p>\n
Cobrimos algumas op\u00e7\u00f5es em nosso artigo sobre otimiza\u00e7\u00e3o de imagens<\/a>, embora estes sejam plugins espec\u00edficos para WordPress que se conectam a uma interface de programa\u00e7\u00e3o de aplicativos (API). A boa not\u00edcia \u00e9 que muitos desses plugins tamb\u00e9m fornecem uma interface online. Por exemplo, considere o ShortPixel<\/a>:<\/p>\n
A interface ShortPixel.<\/figcaption><\/figure>\n Aqui, voc\u00ea vai arrastar as imagens para o uploader, depois esperar que o aplicativo as comprima e as processe. Entretanto, voc\u00ea vai querer escolher o algoritmo primeiro, pois o processo come\u00e7ar\u00e1 imediatamente.<\/p>\n
A escolha \u00e9 simples: Duas formas de compress\u00e3o com perdas (“Lossy” e “Glossy”), e uma op\u00e7\u00e3o sem perdas. A interface do ShortPixel faz um bom trabalho para explicar a diferen\u00e7a entre cada algoritmo, e voc\u00ea pode baixar as imagens em segundos.<\/p>\n
- Resolu\u00e7\u00e3o:<\/b> Voc\u00ea ver\u00e1 isto frequentemente expresso como megapixels (MP), mas voc\u00ea tamb\u00e9m usar\u00e1 pixels per inch (PPI) ou pontos por polegada (DPI). Resolu\u00e7\u00f5es mais altas oferecem maior qualidade, mas elas tamb\u00e9m aumentam o tamanho inicial do arquivo.<\/li>\n
- Compress\u00e3o sem perdas:<\/b> Voc\u00ea ainda encontrar\u00e1 uma redu\u00e7\u00e3o substancial no tamanho do arquivo com este formato de compress\u00e3o, mas a imagem n\u00e3o sofrer\u00e1 de artefatos e outros problemas.<\/li>\n<\/ul>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/imagify-interface.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/kraken-interface.png\")
![\"As](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/kraken-expert-mode.png\")