As imagens dão vida ao seu conteúdo e tornam seu site WordPress mais atraente. No entanto, a escolha do formato de arquivo correto é importante para o desempenho. Além disso, se suas imagens demorarem muito para carregar ou parecerem borradas, seu site não proporcionará uma ótima experiência ao usuário.
Portanto, você pode estar se perguntando sobre WebP vs. PNG vs. JPEG.
No WPBeginner, usamos todos esses três formatos ao longo dos anos. Com base em nossa experiência, acreditamos que o PNG oferece o melhor equilíbrio entre qualidade de imagem e desempenho. No entanto, WebP e JPEG também oferecem ótimas alternativas e funcionam melhor em condições específicas.
Neste artigo, compararemos WebP vs. PNG vs. JPEG e o ajudaremos a escolher o melhor formato de imagem para o WordPress.
WebP vs. PNG vs. JPEG – Introdução
Vamos primeiro dar uma olhada nos três formatos de imagem e ver como cada um deles funciona.
O que é WebP?
O WebP é um formato de imagem relativamente novo em comparação com o PNG e o JPEG. Criado pelo Google, o WebP oferece compressão superior com e sem perdas para imagens na Internet. Isso permite que você crie imagens menores que ajudam a melhorar o desempenho do site.
A compactação sem perdas significa que todos os dados da imagem permanecem depois que ela foi descompactada. Por outro lado, a compactação com perdas reduz o tamanho do arquivo, eliminando permanentemente as informações do arquivo de imagem.
Um dos recursos de destaque do WebP é que ele suporta imagens baseadas em movimento, o que não é possível em PNG ou JPEG. Isso também torna o WebP uma ótima alternativa aos GIFs.
O WordPress introduziu o suporte ao formato de imagem WebP com a versão 5.8. Anteriormente, era necessário instalar um plug-in do WordPress para usar imagens WebP no WordPress.
Todos os navegadores modernos da Web, incluindo Google Chrome, Firefox, Safari, Edge e outros, suportam o formato de imagem WebP. Muitas ferramentas de edição de imagens também suportam o WebP e permitem exportar imagens nesse formato.
O WebP também tem recursos semelhantes aos do PNG. Você pode obter os mesmos níveis de transparência em imagens WebP que em PNG.
Prós:
- Oferece tamanhos de arquivo menores em comparação com PNG e JPEG
- Suportado por navegadores da Web populares
- Obtenha o mesmo nível de transparência em imagens que o PNG
- Suporta compressão com e sem perdas
- Permite que você crie imagens baseadas em movimento
Contras:
- Requer ferramentas e plug-ins de terceiros para converter imagens no formato WebP
- Suporte limitado do software de edição de fotos
O que é PNG?
O Portable Network Graphics (PNG) é um dos formatos de imagem mais populares da Internet. Ele suporta milhões de cores, portanto, as imagens são mais nítidas e realistas.
A principal vantagem de usar PNG é seu algoritmo de compactação sem perdas. Quando uma imagem é compactada, ela não perde nenhum dado ou qualidade. Isso torna o PNG um ótimo formato para seu site WordPress se você precisar de um arquivo de imagem menor e quiser preservar os detalhes finos da imagem.
Outra vantagem de usar PNG é que ele suporta fundos transparentes. É por isso que você encontrará muitos arquivos de logotipo de sites e outros elementos no formato PNG.
Por exemplo, aqui está um logotipo para o WPBeginner que está no formato PNG.
Prós:
- Ele não perde a qualidade da imagem quando compactado
- Tem tamanhos de arquivo de imagem menores em comparação com o JPEG
- Oferece transparência de imagem de alta qualidade
- Compatível com todos os principais navegadores e ferramentas de edição de imagens
- Formato ideal para logotipos e gráficos com poucas cores
- Suporta compressão sem perdas
Contras:
- Não oferece suporte à compactação com perdas
- Profundidade de cor limitada e não adequada para imagens complexas com muitas cores
O que é JPEG?
JPEG, abreviação de Joint Photographic Experts Group, é um formato de imagem criado em 1986. É o formato de imagem padrão para muitos dispositivos, incluindo câmeras digitais e smartphones. Muitos construtores de sites e plug-ins de galeria de imagens do WordPress também oferecem suporte a imagens JEPG.
Uma das vantagens de usar JPEG é que ele oferece imagens vívidas e contém milhões de cores. Todos os navegadores da Web são compatíveis com esse formato, e o tamanho das imagens é relativamente pequeno.
Por exemplo, aqui está uma imagem de uma borboleta no formato JPEG. Ela tem muitas cores e detalhes, que não são tão perceptíveis em outros formatos de imagem.
O JPEG é geralmente o melhor formato se você tiver imagens complexas com muitas cores. Na imagem JPEG acima, as cores são vibrantes e proeminentes.
No entanto, quando otimizado, você pode notar uma pequena queda na qualidade da imagem, especialmente se a imagem tiver poucos dados de cor. Além disso, as imagens JPEG são facilmente conversíveis. Você pode transformá-las em qualquer outro formato, inclusive PNG e WebP.
Prós:
- Ele suporta milhões de cores
- Excelente formato para imagens complexas e com muitas cores
- Altamente conversível em outros formatos de imagem
- Compatível com navegadores da Web e ferramentas de edição de imagens populares
Contras:
- Ele perde detalhes da imagem após a compactação
- Não é compatível com imagens em camadas
- Não há suporte para transparência de imagem
WebP vs. PNG vs. JPEG – Tamanho do arquivo de imagem
Quando se trata de comparar WebP vs. PNG vs. JPEG para o tamanho do arquivo de imagem, muito depende do nível de compactação que você escolhe ao otimizar a imagem.
Dito isso, as imagens WebP sem perdas são geralmente 26% menores que as PNG. Da mesma forma, ao comparar imagens com perdas WebP vs. JPEG, as imagens WebP são 25 a 34% menores que as JPEG.
Por exemplo, uma comparação do Google Developers mostra uma diferença significativa no tamanho do arquivo de imagem entre os formatos JPEG e WebP.
Isso mostra que as imagens WebP são muito menores em tamanho de arquivo em comparação com PNG e JPEG. Com um tamanho de arquivo de imagem menor, você pode aumentar a velocidade do WordPress e garantir que as páginas da Web sejam carregadas mais rapidamente.
Como resultado, você também verá uma melhoria no SEO do WordPress. O Google considera a velocidade de carregamento da página como um fator de classificação. Se o seu site carregar rapidamente, você terá uma vantagem sobre os sites com carregamento lento.
WebP vs. PNG vs. JPEG – Qualidade da imagem
A escolha do melhor formato de imagem para WordPress com base na qualidade da imagem dependerá do tipo de seu site.
Por exemplo, se você é um fotógrafo que publica imagens com muitas cores em seu site WordPress, então o JPEG é o melhor formato de imagem a ser usado. As imagens JPEG têm uma alta taxa de compactação e ajudam a reter os dados de cores.
Por outro lado, se você estiver publicando capturas de tela ou imagens individuais com o mínimo de cores, é melhor usar o formato PNG. O PNG fornece imagens de alta qualidade e funciona perfeitamente para imagens simples e complexas.
O formato WebP funcionará se você quiser compactar imagens em seu site para manter o alto desempenho. Se você comparar o WebP com o JPEG, o WebP atinge uma média de 30% a mais de compactação do que o JPEG. No entanto, não recomendamos o uso do WebP se você tiver um site de portfólio de fotografia ou design gráfico.
Qual é o melhor formato de imagem para o WordPress?
Depois de comparar WebP vs. PNG vs. JPEG, o melhor formato de imagem realmente depende de suas necessidades.
Diz-se que o WebP é o formato do futuro que em breve será usado por todos os sites. Quando comparamos o WebP com o JPEG, o WebP oferece o menor tamanho de arquivo de imagem, o que economiza espaço de armazenamento e melhora o tempo de carregamento do site. No entanto, você precisará certificar-se de que seu construtor de sites ou ferramenta de edição de imagens seja compatível com o formato WebP.
Por outro lado, o JPEG é o melhor formato de imagem para fotógrafos profissionais e proprietários de sites que precisam de imagens com cores precisas.
O PNG é o melhor formato para compartilhar capturas de tela e outras imagens em que não há muita cor. É um formato muito versátil e oferece imagens de alta qualidade com um tamanho de arquivo relativamente baixo.
Dicas de bônus para usar imagens no WordPress
As imagens desempenham um papel fundamental em seu conteúdo, e muitos proprietários de sites não dedicam tempo para adicionar imagens de qualidade aos posts e páginas de seus blogs.
Além de escolher o formato de imagem correto para o WordPress, aqui estão algumas dicas para ajudá-lo a criar imagens incríveis e otimizá-las para desempenho:
- Use plug-ins de compactação de imagens – imagens grandes podem tornar seu site mais lento. Você deve usar plug-ins de compactação de imagens para otimizar as imagens WebP, JPEG e PNG a fim de proporcionar um desempenho rápido.
- Adicionar texto alternativo de imagem – Texto alternativo ou texto alternativo é uma tag de imagem HTML que descreve uma imagem. Ele permite que os bots dos mecanismos de busca e os usuários com leitores de tela entendam suas imagens. Ao otimizar seu site para SEO, adicionar texto alterna tivo às suas fotos pode ajudá-las a aparecer nos resultados de pesquisa de imagens.
- Selecione o tamanho correto da imagem para o seu site – Muitas vezes, os iniciantes não sabem ao certo qual tamanho de imagem devem usar em seus sites. Escolher o tamanho certo proporciona consistência e uma experiência de usuário tranquila.
- Usar marca d’água ou desativar o clique com o botão direito do mouse – Se não quiser que outras pessoas usem suas imagens sem permissão, você pode adicionar uma marca d’água e desativar o clique com o botão direito do mouse nas imagens. Para saber mais, consulte nosso guia sobre como evitar o roubo de imagens no WordPress.
Esperamos que este artigo tenha ajudado você a aprender sobre WebP vs. PNG vs. JPEG para encontrar o melhor formato de imagem para o WordPress. Talvez você também queira ver nossa lista dos melhores softwares de design e nosso guia para iniciantes sobre SEO de imagens.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Regarding the question of the best format for WordPress. Is it better to upload only WebP to the website due to its size and loading speed, or is it better to upload PNG and then convert to WebP using a plugin? My concern is that I only have WebP on my website. However, I was alerted that this isn’t the best practice for situations when someone visits my website using a very old browser for some reason. Consequently, their browser wouldn’t support this format, meaning they wouldn’t see the images on my website. Therefore, I thought about using PNG with a plugin that would serve WebP to newer browsers and PNG to older ones.
WPBeginner Support
If you have users using older browsers to view your site then it would be good to have a fallback image and the simplest way to do that would be to upload the file type you want your users to load and use a plugin to convert to WebP that sets up the fallback for you.
Administrador
A Owadud Bhuiyan
As far as I’m aware, the PNG format is typically used for transparent images.
However, the majority of people tend to use JPEG.
Am I right?
WPBeginner Support
You are correct, that that is how the image formats are currently used
Administrador
Ralph
I’ve heard about this webp trend years ago but never cared. I know the faster the website is the better. However is it not fighting ove diminishing returns?
All my jpegs for main blog articles photos are 1920×1280 and without any optmization it is 150-250 kb, mostly around 220 kb. I use bigger resolution, as screens are getting better and better so i don’t have to upgrade it in the future.
I know in webp these same pictures could be lower size. Maybe 150kb? 120 kb?
Taking into consideration we are getting better and faster internet all around the world, and in my country internet was good years ago and infrastructure is really good is it really worth it?
I need to spend a lot of time converting every jpg to webp, but don’t see REAL WORLD (outside of website testing apps) upgrade.
I wish i could do this in like 5 mins, but is that 70kb less really worth it?
WPBeginner Support
One thing to think about is users on mobile data may not have the best connection for larger images. To determine if that change is worth it, the only person who can decide if it is right for your site is you as it is currently a new option available but not a requirement.
Administrador
Piotr Z
Your talk about pictures and websites got me thinking because I recently started my own blog. When I made my blog, I didn’t know that the kind of pictures I use can affect how fast the website loads. So, I did some tests and found out that my ‘heavy’ pictures were causing problems. That’s when I learned about differences in formats when it comes to pictures.
JPEG is like magic for making pictures smaller and making websites faster. It can shrink pictures way more than regular pictures (like PNG). I used converter plugins to help me with this, and it worked out pretty well.
Now, when it comes to picking between WebP. Do the popular tools like Canva, or even some mobile phone apps can covert to this format by default? Or I will need to find the WP plugging for it?
Thanks for explaining this important stuff!
WPBeginner Support
Image editing tools should normally have a way to create a WebP image, we have not tested mobile apps for that functionality.
Administrador
Ahmed Omar
Thank you for the detailed explanation.
Actually I was facing this issue of WebP images, and I was wondering what is WebP.
Now it is clear, and even I can take the benefit from it.
but here is my question, can I change peg and png to WebP? and how I can do it?
Thank you
WPBeginner Support
There are a few tools available to convert it for you, for a starting point we would recommend taking a look at our article below
https://www.wpbeginner.com/wp-tutorials/how-to-use-webp-images-in-wordpress/
Administrador
Akpobor Joseph
Thanks, WPBeginner for this article. I actually just completed a quick research on this topic before I saw this notification. Honestly, I’m getting a lot of help from your team as regards my journey online.
I really appreciate your good work.
WPBeginner Support
You’re welcome, glad our guide was helpful and we hope our team and articles continue to be helpful to you
Administrador