{ "id": 37022, "slug": "2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho", "url": "https://agents.willem.com/pt/posts/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/", "source_url": "https://willem.com/pt/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/", "language": "pt", "date": "2018-09-26", "published": "2018-09-26T00:00:00+02:00", "created": "2025-06-26T22:10:20.991000+02:00", "updated": "2026-10-20T09:19:12.822000+02:00", "title": "Otimizar imagens para a web e para o desempenho", "subtitle": "Reduz o tamanho dos ficheiros com jpegoptim, optipng, pngcrush e pngquant", "summary": "Uma maneira de tornar o teu site mais rápido é torná-lo mais pequeno. Não com letra pequena, mas com menos bytes! Mais de metade do peso de um site médio vem das imagens. E, no entanto, muito poucas pessoas otimizam as imagens para a web e para o desempenho. Está na hora de descobrir quantos bytes consegues poupar!", "topics": [ "cloud", "data", "howto", "networking", "programming", "server", "web", "webdesign", "work" ], "author": { "name": "Willem L. Middelkoop", "url": "https://willem.com" }, "provenance": { "kind": "model", "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell (pt_PT)", "date": "2026-10-20", "reviewed_by_native_reader": false, "language": "pt", "source_language": "en" }, "translations": [ { "language": "en", "title": "Optimising images for the web and performance", "url": "https://agents.willem.com/en/posts/2018-09-26_optimising-images-for-the-web-and-performance/", "source_url": "https://willem.com/en/2018-09-26_optimising-images-for-the-web-and-performance/" }, { "language": "nl", "title": "Afbeeldingen optimaliseren voor web en performance", "url": "https://agents.willem.com/nl/posts/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/", "source_url": "https://willem.com/nl/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/" }, { "language": "de", "title": "Bilder für Web und Performance optimieren", "url": "https://agents.willem.com/de/posts/2018-09-26_bilder-fur-web-und-performance-optimieren/", "source_url": "https://willem.com/de/2018-09-26_bilder-fur-web-und-performance-optimieren/" }, { "language": "es", "title": "Optimización de imágenes para la web y el rendimiento", "url": "https://agents.willem.com/es/posts/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/", "source_url": "https://willem.com/es/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/" }, { "language": "fr", "title": "Optimiser les images pour le web et les performances", "url": "https://agents.willem.com/fr/posts/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/", "source_url": "https://willem.com/fr/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/" }, { "language": "it", "title": "Ottimizzare le immagini per il web e le prestazioni", "url": "https://agents.willem.com/it/posts/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/", "source_url": "https://willem.com/it/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/" }, { "language": "pap", "title": "Optimalisá imagen pa web i rendimentu", "url": "https://agents.willem.com/pap/posts/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/", "source_url": "https://willem.com/pap/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/" }, { "language": "fy", "title": "Ôfbyldings optimalisearje foar it web en prestaasje", "url": "https://agents.willem.com/fy/posts/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/", "source_url": "https://willem.com/fy/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/" } ], "image": "https://willem.com/global/images/c806bdb54964.webp", "image_width": 2560, "images": [ { "url": "https://willem.com/global/images/ec02ee9672ec.webp", "description": "Peso médio de uma página web, dividido por tipo de recurso (HttpArchive, setembro de 2018)", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-1.jpg" }, { "url": "https://willem.com/global/images/e94033e684f1.webp", "description": "As imagens bitmap são como tabuleiros de xadrez, em que os píxeis são os quadrados", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-2.png" }, { "url": "https://willem.com/global/images/3640b9482061.webp", "description": "Diapositivo típico em pace-cme.org", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-3.jpg" }, { "url": "https://willem.com/global/images/4c08bf11faa4.webp", "description": "Imagem de teste, com cores sólidas, conteúdo fotográfico e texto", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-4.jpg" }, { "url": "https://willem.com/global/images/19c8b9866186.webp", "description": "Inspeção da qualidade: à esquerda o original, à direita o pngquant", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-5.jpg" } ], "text": "Otimiza o teu site\nSe otimizares o teu site, ele carrega mais depressa. Como muita gente prefere sites rápidos, motores de busca como o Google começaram a medir a velocidade das páginas para determinar a posição do teu site nos resultados de pesquisa.\nTamanho médio de uma página\nApesar de muitos criadores de sites se concentrarem primeiro no HTML e nos scripts, a maior parte do peso de um site médio vem das imagens (Fonte HttpArchive (https://httparchive.org/reports/page-weight), peso das páginas, setembro de 2018).\nUma otimização eficaz das imagens pode, por isso, ter efeitos incríveis na velocidade do teu site.\nO que é a otimização de imagens?\nUma imagem digital é como um tabuleiro de xadrez, um retângulo com 8x8 quadrados pretos e brancos. Se guardasses o tabuleiro sem compressão, escreverias a cor de cada quadrado individualmente (\"o quadrado um é branco, o quadrado dois é preto, o quadrado três é branco, o quadrado cinco é preto, etc.\"). Seriam precisas 64 linhas para descrever o tabuleiro inteiro, o que é rigoroso mas pouco eficiente.\nOtimizar uma imagem é encontrar formas mais eficientes de descrever as suas cores. Podias descrever o tabuleiro inteiro numa só linha de texto: \"alterna entre preto e branco, começa pelo branco\", ou de forma ainda mais eficiente: \"repete branco, preto\". Nas imagens digitais chama-se compressão: o algoritmo tenta identificar sequências de cores que se repetem.\nExistem diferentes algoritmos, todos com pontos fortes e fracos. Uns funcionam melhor em fotografias (com milhões de cores), outros funcionam melhor com imagens com muito menos cores (como um diapositivo de PowerPoint). Escolher o algoritmo certo é o teu primeiro ganho de desempenho.\nFormatos de imagem comuns\n- JPG é um tipo de ficheiro de imagem muito comum, com compressão eficaz para imagens com muitas cores diferentes, como as fotografias. Este formato existe desde 1992 e é suportado em quase todos os dispositivos.\n- GIF é outro tipo de ficheiro de imagem antigo, desenvolvido em 1987. É popular porque suporta animação. Tecnicamente é muito limitado: apenas 256 cores diferentes por imagem.\n- PNG foi desenvolvido em 1994 para substituir o GIF, por causa da polémica em torno do algoritmo de compressão do GIF. É popular porque quase todos os dispositivos o suportam e o PNG suporta milhões de cores, incluindo transparência. Permite compressão sem perdas, que garante texto e linhas nítidos, o que torna este formato perfeito para gráficos e logótipos.\nRecentemente a Google (WebP) e a Apple (HEIF) introduziram novos formatos de imagem, que oferecem uma compressão ainda melhor do que o JPG, o GIF e o PNG. Mas estes formatos ainda não são amplamente adotados.\nEscolher o formato de imagem certo\nO melhor formato depende do conteúdo real da tua imagem. Não há uma regra universal que determine o melhor formato para uma dada imagem. O melhor é experimentares tu mesmo e veres o que acontece ao tamanho do ficheiro se guardares a imagem em diferentes formatos. Muitos programas de computador permitem escolher o formato quando selecionas \"Guardar como\".\nPodes começar com JPG para fotografias e PNG para imagens com menos cores, como um logótipo, um gráfico ou um diapositivo de PowerPoint. Formatos como o JPG oferecem diferentes definições de qualidade de compressão, que afetam a qualidade da imagem e o tamanho do ficheiro. Uma definição de qualidade mais baixa diminui a qualidade da imagem a favor de um ficheiro mais pequeno, e deves tentar encontrar um bom equilíbrio entre qualidade e tamanho.\nCompressão com perdas e sem perdas\nOs algoritmos de compressão que trocam qualidade por tamanho de ficheiro chamam-se algoritmos de compressão com perdas. Já os algoritmos que preservam a qualidade original da imagem chamam-se algoritmos de compressão sem perdas.\nComo otimizar imagens\nDepois de teres a tua imagem JPG ou PNG, podes otimizá-la escolhendo as definições certas para o algoritmo de compressão. Não te preocupes, não precisas de o fazer à mão: podes usar software de otimização automática para encontrar as melhores definições de compressão para uma dada imagem.\nOtimizar imagens JPG\nSe usas o Photoshop, podes usar a função integrada Guardar para a Web para obteres uma imagem JPG razoavelmente otimizada.\nOu então podes usar um utilitário de linha de comandos como o jpegoptim. Esta ferramenta reduz os ficheiros JPG otimizando as tabelas de Huffman internas, o que melhora o desempenho do algoritmo de compressão. Em média, podes esperar uma melhoria de 10-15% sem perda de qualidade da imagem.\nOutra maneira de otimizar imagens JPG é usar um otimizador online, como o TinyJPG (https://tinyjpg.com) ou o ImageOptim (https://imageoptim.com/api).\nSe usas WordPress, podes considerar um plugin que faça a otimização das imagens por ti, como o Imagify da xtremerain (https://www.xtremerain.com/imagify-advanced-optimization/).\nOtimizar imagens PNG\nOs ficheiros PNG podem ser otimizados com o Photoshop, através da função Guardar para a Web. Para otimizares ainda melhor os teus ficheiros PNG, podes usar uma app especializada, como o ImageAlpha (https://pngmini.com) para Mac ou o PNGGauntlet (https://pnggauntlet.com) para Windows.\nHá otimizadores online para ficheiros PNG, como o TinyPNG (https://tinypng.com) e o Compressor.io (https://compressor.io).\nOu então podes usar programas de linha de comandos como o optipng, o pngcrush ou o pngquant. Vale a pena explorar estas ferramentas de PNG um pouco mais a fundo.\nTestar optipng vs pngcrush vs pngquant\nNo meu trabalho como programador web integro a otimização de imagens em sistemas de gestão de conteúdos, para facilitar aos meus clientes que as suas imagens sejam otimizadas automaticamente. Como o número de clientes cresceu bastante, deparei-me com problemas de desempenho.\nPara ganhar desempenho, decidi testar o optipng, o pngcrush e o pngquant. Esperava encontrar uma boa otimização de imagens com menos poder de processamento do servidor. Isso melhoraria o desempenho para os meus clientes.\nPACE-CME\nUm desses clientes é o PACE-CME, um site (https://pace-cme.org) com recursos de formação cardiovascular para médicos. Este site contém milhares de diapositivos de PowerPoint guardados como ficheiros PNG.\nPara testar o desempenho usei uma imagem de teste especial, maior e mais pesada do que um diapositivo de PowerPoint típico. Esta imagem de teste tem alta resolução e conteúdo misto, em parte fotografias, texto e cores sólidas.\nMétodo\nFiz os testes num servidor Intel XEON de quatro núcleos com 8 GB de RAM. Para cada ferramenta de otimização de PNG usei tanto as definições mais extremas (para ver o que conseguia fazer ao tamanho do ficheiro) como a definição predefinida (para ver quanto mais rápidas são as predefinições e como o resultado se compara com as melhores definições de compressão).\nResultados\n- imagem de teste original 2897 KB\n- optipng extremo (-o7): 2510 KB em 2 minutos e 36 segundos / predefinição: 2536 KB em 4,9 segundos\n- pngcrush extremo (-brute): 2510 KB em 1 minuto e 42 segundos / predefinição: 2531 KB em 9,2 segundos\n- pngquant extremo (-s 1): 744 KB em 5,2 segundos / predefinição: 746 KB em 4,2 segundos\nO desempenho do pngquant é espantoso: é muito mais rápido e ainda por cima produz um ficheiro muito mais pequeno. Não é magia, no entanto, porque usa um algoritmo de compressão diferente, com perdas. Isto significa que as imagens otimizadas com o pngquant perdem um pouco de qualidade. Comparei-as de perto e não notei a diferença.\nConclusão\nOtimizar imagens para a web e para o desempenho é mesmo importante. Como mostraram os meus testes, escolher o algoritmo certo pode fazer toda a diferença.\nPara mim isso significou escolher o pngquant, mas a tua decisão pode ser diferente, consoante o tipo de imagens que queres otimizar.\nA grande lição a tirar deste artigo é, então, que deves dar atenção às imagens. O teu site vai ficar muito mais rápido, e quem não gosta de um site rápido?", "word_count": 1271, "markdown_url": "https://agents.willem.com/pt/posts/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/post.md" }