{"id":5032,"date":"2017-05-15T11:14:04","date_gmt":"2017-05-15T14:14:04","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriais\/?p=5032"},"modified":"2025-04-09T04:39:22","modified_gmt":"2025-04-09T07:39:22","slug":"melhorando-o-desempenho-do-site","status":"publish","type":"post","link":"\/br\/tutoriais\/melhorando-o-desempenho-do-site\/","title":{"rendered":"Melhorando o desempenho do site usando imagens JPEG progressivas"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Uma das tarefas cruciais na otimiza&ccedil;&atilde;o de site que algumas pessoas tendem a esquecer s&atilde;o as imagens. Em um de nossos guias, aprendemos como melhorar o desempenho do site por meio de <a href=\"\/br\/tutoriais\/melhorando-o-desempenho-do-site-servidor-imagens-escalas\/\" target=\"_blank\" rel=\"noreferrer noopener\"><u>imagens em escala<\/u><\/a>. Desta vez, vamos dar um passo adiante e aprender como otimizar imagens JPEG de linha de base em progressivas.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-30339\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Speed-Up-your-website-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-qual-a-diferenca-entre-jpegs-de-linha-de-base-jpeg-progressivo\"><strong>Qual a Diferen&ccedil;a Entre JPEGs de Linha de Base JPEG Progressivo?<\/strong><\/h2><p class=\"wp-block-paragraph\">Geralmente, as imagens JPEG carregam de cima para baixo e s&atilde;o chamadas de imagens de linha de base. Imagens JPEG progressivas diferem mostrando a imagem inteira imediatamente ao carregar somente uma parte dos dados, significando que pode olhar pixelated at&eacute; que esteja carregado inteiramente. Abaixo voc&ecirc; encontrar&aacute; um exemplo para melhor compreens&atilde;o.<\/p><p class=\"wp-block-paragraph\">Ciclo de carregamento do JPEG de linha de base:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/basiline-jpeg-load.png\" alt=\"basiline jpeg load\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Ciclo de carregamento JPEG progressivo:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/progressive-jpeg-load.png\" alt=\"progressive jpeg load\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>Como as Imagens JPEG Progressivas Melhoram o Desempenho do Site?<\/strong><\/h3><p class=\"wp-block-paragraph\">Al&eacute;m da melhor experi&ecirc;ncia visual, imagens JPEG progressivas s&atilde;o 2% a 10% menores em tamanho em compara&ccedil;&atilde;o com imagens de linha de base, assim, ir&aacute; melhorar o carregamento do seu site e desempenho.<\/p><p class=\"wp-block-paragraph\">Suas solicita&ccedil;&otilde;es ao servidor ser&atilde;o mais curtas e mais eficientes, o que tamb&eacute;m reduzir&aacute; o uso de recursos, como largura de banda e espa&ccedil;o em disco. Isso &eacute; extremamente eficiente se voc&ecirc; estiver hospedando um site em servi&ccedil;os de hospedagem de sites gratuitos ou compartilhados. Sites com uma grande quantidade de imagens JPEG de linha de base tamb&eacute;m se beneficiar&atilde;o muito da compress&atilde;o com perdas em imagens JPEG progressivas.<\/p><p class=\"wp-block-paragraph\">Tamb&eacute;m vale a pena mencionar que os visitantes que acessam seu site via dispositivo m&oacute;vel ou conex&atilde;o lenta &agrave; Internet ter&atilde;o uma melhor experi&ecirc;ncia visual global e tempos de carregamento mais r&aacute;pido se voc&ecirc; usar imagens JPEG progressivas.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-do-que-voce-precisa\"><strong>Do Que Voc&ecirc; Precisa?<\/strong><\/h2><p class=\"wp-block-paragraph\">Antes de come&ccedil;ar este guia, voc&ecirc; precisar&aacute; do seguinte:<\/p><ul class=\"wp-block-list\">\n<li>Acesso ao FTP.<\/li>\n<\/ul><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Importante!<\/strong> Alguns navegadores (por exemplo, Internet Explorer antes do Windows 7) n&atilde;o suportam imagens JPEG progressivas. No entanto, todas as vers&otilde;es posteriores suportam.\n            <\/p><\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-passo-1-analisando-seu-site\"><strong>Passo 1 &ndash; Analisando seu Site<\/strong><\/h3><p class=\"wp-block-paragraph\">Para localizar imagens JPEG de linha de base que podem ser substitu&iacute;das por vers&otilde;es progressivas, usaremos o <u><a href=\"https:\/\/webpagetest.org\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">WebPageTest.org<\/a><\/u>. Esta ferramenta &eacute; grande, e&nbsp;voc&ecirc; tamb&eacute;m pode obter a vers&atilde;o progressiva de uma imagem de linha de base JPEG sem usar quaisquer ferramentas adicionais.<\/p><p class=\"wp-block-paragraph\">Aqui est&atilde;o os resultados da se&ccedil;&atilde;o Revis&atilde;o de Desempenho ap&oacute;s analisar um site de teste:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/0-100-prog-jpeg.png\" alt=\"0 100 prog jpeg\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-passo-2-transferir-imagens-jpeg-progressivas\"><strong>Passo 2 &ndash; Transferir Imagens JPEG Progressivas<\/strong><\/h3><p class=\"wp-block-paragraph\">Existe uma grande variedade de ferramentas que permitem converter JPEG de linha de base para imagens progressivas. Aqui est&atilde;o alguns:<\/p><p class=\"wp-block-paragraph\"><strong>Op&ccedil;&atilde;o 1 &ndash; Compacta&ccedil;&atilde;o de Imagens JPEG de Linha de Base para uso Progressivo Usando <\/strong><strong><a href=\"https:\/\/webpagetest.org\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">WebPageTest.org<\/a><\/strong><\/p><p class=\"wp-block-paragraph\">Depois de encontrar a lista de imagens que podem ser substitu&iacute;das, navegue at&eacute; a se&ccedil;&atilde;o <strong>Detalhes<\/strong>&nbsp;e clique em<strong>&nbsp;Exibir todas as imagens.<\/strong><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/view-all-images.png\" alt=\"view all images\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Essa se&ccedil;&atilde;o exibir&aacute; todas as imagens em sua p&aacute;gina. Pressione <strong>Analisar JPEG<\/strong>&nbsp;em cada imagem localizada no Passo 1 deste tutorial e role at&eacute; a parte inferior.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/analyze-jpeg.png\" alt=\"analyze jpeg\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Voc&ecirc; encontrar&aacute; a imagem da <strong>Qualidade 85<\/strong>&nbsp;de sua imagem original. Salve todas as imagens de <strong>Qualidade 85<\/strong>&nbsp;em seu computador e prossiga para a pr&oacute;xima etapa. Recomendamos vivamente que salve as imagens com o <strong>mesmo<\/strong>&nbsp;nome de arquivo que as originais, dessa forma o procedimento de substitui&ccedil;&atilde;o ser&aacute; muito mais f&aacute;cil.<\/p><p class=\"wp-block-paragraph\"><strong>Op&ccedil;&atilde;o 2 &ndash; Convertendo Imagens JPEGs de Linha de Base para Progressiva com Optimizilla<\/strong><\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; est&aacute; planejando fazer o upload de mais imagens para o seu site no futuro ou se seu site ainda n&atilde;o foi enviado, voc&ecirc; pode usar o <u><a href=\"http:\/\/optimizilla.com\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">Optimizilla<\/a><\/u>&nbsp;para converter suas imagens JPEG de linha de base em vers&otilde;es progressivas. Usando esta ferramenta voc&ecirc; pode otimizar at&eacute; 20 imagens e encolh&ecirc;-los usando algoritmos de compress&atilde;o lossy para Qualidade 85 ou at&eacute; menos.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/optimizilla-usage.png\" alt=\"optimizilla usage\"><\/figure>\n<\/div><p>\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Importante!<\/strong> Inferior a 85 pode resultar em perda de qualidade. Prossiga com cuidado.\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\"><strong>Op&ccedil;&atilde;o 3 &ndash; Otimiza&ccedil;&atilde;o de Imagens JPEG com P<\/strong><strong>lug-ins do CMS<\/strong><\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; tem um blog WordPress, voc&ecirc; pode facilmente otimizar sua foto JPEG usando WP Smush. Confira <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-otimizar-imagens-wordpress-usando-o-wp-smush\/\" target=\"_blank\" rel=\"noopener\"><u>este tutorial<\/u><\/a>&nbsp;para obter instru&ccedil;&otilde;es detalhadas sobre como usar o <u><a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Smush<\/a><\/u>.<\/p><h3 class=\"wp-block-heading\" id=\"h-passo-3-substituindo-imagens-antigas\"><strong>Passo 3 &ndash; Substituindo Imagens Antigas<\/strong><\/h3><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Importante!<\/strong> Certifique-se de <a href=\"\/br\/tutoriais\/como-fazer-download-de-um-backup\/\">fazer um backup do seu site<\/a>&nbsp;ou das imagens que voc&ecirc; est&aacute; planejando substituir antes de prosseguir.\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Usando o <u><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-usar-o-gerenciador-de-arquivos-cpanel\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gerenciador de Arquivos<\/a><\/u>&nbsp;ou qualquer <u><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-configurar-o-cliente-filezilla\/\" target=\"_blank\" rel=\"noopener noreferrer\">cliente FTP<\/a><\/u>, localize as imagens da Etapa 1. Remova e substitua as novas <strong>Qualidade 85<\/strong>&nbsp;I<strong>magens<\/strong>&nbsp;adquiridas no <strong>Passo 2<\/strong>.<\/p><p class=\"wp-block-paragraph\">Novamente, certifique-se de que elas tenham o <strong>mesmo<\/strong>&nbsp;nome de arquivo para evitar erros 404 ou problemas de carregamento.<\/p><h3 class=\"wp-block-heading\" id=\"h-passo-4-testando-as-alteracoes-nas-imagens-jpeg\"><strong>Passo 4 &ndash; Testando as Altera&ccedil;&otilde;es nas Imagens JPEG<\/strong><\/h3><p class=\"wp-block-paragraph\">Depois que todas as imagens s&atilde;o carregadas, limpe o cache do navegador e abra o seu site para ver se tudo carrega bem. Depois disso, voc&ecirc; pode analisar seu site com <u><a href=\"https:\/\/webpagetest.org\/\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">WebPageTest.org<\/a><\/u>&nbsp;para verificar se tudo foi feito corretamente. Aqui est&atilde;o os resultados que voc&ecirc; deve ver na se&ccedil;&atilde;o <strong>Detalhes<\/strong>:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2017\/04\/100-100-prog-jpeg.png\" alt=\"100 100 prog jpeg\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Pronto. Voc&ecirc; conseguiu otimizar imagens JPEG linhas de base em progressivas. Inscreva-se em nossa Newsletter para receber nossos conte&uacute;dos diretamente no seu e-mail.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">Neste guia, aprendemos como aumentar a velocidade do seu site usando imagens JPEG progressivas em vez de linha de base. A experi&ecirc;ncia visual mais suave e menor tamanho &eacute; certo para fazer voc&ecirc; e seus visitantes mais satisfeitos, enquanto ao mesmo tempo reduzindo o uso do recurso do site, melhorando SEO e desempenho do site. &Eacute; basicamente uma situa&ccedil;&atilde;o ganha para todos.<\/p><p class=\"wp-block-paragraph\">Tamb&eacute;m fique de olho em outras op&ccedil;&otilde;es de formatos de imagem, incluindo o <a href=\"\/br\/tutoriais\/webp\/\"><strong>padr&atilde;o WebP<\/strong><\/a>.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Confira outros Guias de Otimiza&ccedil;&atilde;o de Sites:                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><\/p><p><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/melhorando-o-desempenho-aproveitando-o-cache-do-navegador\/\" target=\"_blank\" rel=\"noopener\"><u>Melhorar o desempenho do site: alavancando o cache do navegador<\/u><\/a><\/p><p><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/melhorando-o-desempenho-do-site-compressao-gzip\/\" target=\"_blank\" rel=\"noopener noreferrer\"><u>Melhorando o desempenho do site: compress&atilde;o gzip<\/u><\/a><br><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/melhorando-a-performace-minifying-css-html-e-javascript\/\" target=\"_blank\" rel=\"noopener\"><u>Melhorando o desempenho do site: minificando CSS, HTML e JavaScript<\/u><\/a><\/p><p><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uma das tarefas cruciais na otimiza&ccedil;&atilde;o de site que algumas pessoas tendem a esquecer s&atilde;o as imagens. Em um de nossos guias, aprendemos como melhorar o desempenho do site por meio de imagens em escala. Desta vez, vamos dar um passo adiante e aprender como otimizar imagens JPEG de linha de base em progressivas. Qual [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/melhorando-o-desempenho-do-site\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":74,"featured_media":5603,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Imagens JPEG Progressivas: Como Melhorar o Desempenho do seu Site","rank_math_description":"Neste Tutorial, vamos dar um passo adiante no desempenho do site ao aprender como otimizar as imagens JPEG de linha de base em progressivas","rank_math_focus_keyword":"imagens jpeg","footnotes":""},"categories":[8079,8026],"tags":[4804,4803,4805],"class_list":["post-5032","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-otimizar-desempenho-de-sites","category-sites","tag-imagem","tag-jpeg","tag-otimizar"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-progressive-jpeg-images\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/melhorando-o-desempenho-do-site\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/jpeg-progressif\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-son-las-imagenes-jpeg-progressive\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-progressive-jpeg-images\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-progressive-jpeg-images\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-progressive-jpeg-images\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-progressive-jpeg-images\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-progressive-jpeg-images\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-progressive-jpeg-images\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-progressive-jpeg-images\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-son-las-imagenes-jpeg-progressive\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-son-las-imagenes-jpeg-progressive\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-son-las-imagenes-jpeg-progressive\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/melhorando-o-desempenho-do-site\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/5032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=5032"}],"version-history":[{"count":22,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/5032\/revisions"}],"predecessor-version":[{"id":49549,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/5032\/revisions\/49549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/5603"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=5032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=5032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=5032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}