Um site de qualidade envolve diversos fatores – conteúdo, um bom nome, design e estruturação bem feita e imagens. Infelizmente, não é muita gente que dá a devida importância para as imagens de seu site, podendo elas serem como uma LOGO, imagem de post e até de montagem do design em si. Diversos temas WordPress, que reconhecem como isso é imprescindível para a qualidade do site, já trazem opções para cadastro de imagens retina de alta qualidade. Se o seu tema não contempla isso ou você quer dar uma tunada em todas essas peças de um site, o CanalWP vai te apresentar um plugin que vai lhe ajudar.
Alta Qualidade com WP Retina 2x
O Plugin
Para dispositivos que utilizam imagens de alta qualidade ou Retina (High DPI), o plugin WP Reina 2x faz toda a tarefa de criar os arquivos necessários e deixar seu site equipado com imagens mais bonitas e nítidas. As imagens do seu site receberão tratamento retina de forma automática, mas você também pode realizar todo o processo de forma manual.
Praticamente não requer configuração, com o WP Retina 2x você tem imagens de altíssima qualidade e com suporte para os mais diferentes métodos que os dispositivos utilizem: PictureFill, Retina.js, IMG Rewrite e Retina-Images. Extremamente rápido de engenha otimizada, o plugin não vai criar absolutamente nada no banco de dados do seu servidor.
Download e Instalação
Fazer a instalação do WP Retina 2x no seu site WordPress é extremamente fácil e prático. Você pode eleger uma dentre as diversas maneiras que o WP oferece para realizar a instalação. As mais comuns são: buscar pelo nome do plugin (WP Retina 2x) através do seu Painel WordPress (Plugins > Adicionar novo) ou realizar o download do arquivo do plugin e fazer o upload do mesmo via FTP ou Dashboard WordPress.
Para fazer o download direto na página oficial no diretório do WordPress, clique no botão abaixo e nós vamos te redirecionar para lá sem qualquer complicação.
Utilização do WP Retina 2x
Com o plugin instalado e ativado em sua Dashboard, acesse Mídia > Retina para começar a acompanhar o processo de geração das imagens retinas para aquelas que você já tem cadastrada em seus posts, páginas e widgets.
Quando você acessar a ferramenta o número de Issues estará como 0 (Zero). Clique no botão Refresh para atualizar esse número. Ele refere-se aos problemas que você possivelmente terá ao realizar a geração retina, o que não quer dizer que ocorram para todos os tamanhos necessários. Muito provavelmente alguns tamanhos serão gerados e outros não.
Dependendo do tamanho da imagem cadastrada e da qualidade dela, alguns problemas podem ser apontados. Então, para aquelas imagens que não acusarem problemas você pode realizar o processo tranquilamente. Caso você queira que 1 ou mais arquivos sejam ignorados, clique no botão referente a eles com o nome IGNORE.
Uma mensagem como essa pode ser exibida em inglês, te orientado a alterar algumas imagens para o bom funcionamento do plugin:
As imagens em tamanho real deve ter uma resolução de 2048 × 2048, pelo menos para o plugin poder gerar as imagens em retina exigidos pelo seu website. Você pode carregar ou substituir as imagens por drag & drop. Sua configuração do PHP permite uploads no máximo de 64MB.
Para realizar a geração das imagens retinas manualmente e para um único arquivo, basta clicar no botão referente com o nome GENERATE. Após isso você verá por meio de pequenos cubos, a sinalização para quais tipos de imagem retina o processo funcionou. Os tipos vão variar a depender dos plugins e funcionalidades do seu tema.
Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.
Ferramentas WordPress Veja Mais Ferramentas
PublishPress
Asset CleanUP PRO
Q2W3 Fixed Widget
e quanto ao “peso” das imagens no blog eles aumentam uso o wp smush par orimizar as imagens mas a qualidade esta muito ruim
Olá, quando subo a imagem verifico se a mesma está otimizada (TynyPNG), edito se estiver grande ainda, porém as vezes a imagem já está com uma qualidade fraca e mesmo assim o PageSpeed mostra que ainda está grande etc. Existe algum plugin para fazer uma otimizada na imagem?
Olá Rodrigo,
Você pode utilizar o WP Smush plugin que nós também utilizamos aqui no CanalWP, inclusive temos um tutorial sobre ele aqui => https://www.canalwp.com/plugins-wordpress/otimize-suas-imagens-com-wp-smush-no-wordpress/
Também tem esse plugin que é muito bom https://br.wordpress.org/plugins/ewww-image-optimizer/
Pessoalmente eu sempre passo as imagens no tinypng.com antes mesmo de passar pela otimização interna do WP Smush só para ter certeza, mas apenas nas imagens em destaque dos artigos.
Abraço.
Olá, o que você acha da velocidade de carregamento do site? Podes ficar comprometida com fotos em HD? O Google pode penalizar no ranqueamento ?
Olá. Estou com um problema com o blog do meu pai e não sei como ajuda-lo. Toda foto que ele posta fica com uma péssima qualidade mas ao clicar na foto ela abre e a qualidade está ótima. Não sei o que posso fazer para que a foto no post fique boa. Adicionei este WP Retina 2X mas não consigo usar ou pelo menos não notei diferença. Tudo que clico diz que apenas para pro version only. Agradeço se puderem me ajudar. O blog fica no endereço http://www.antoniocarlosfraquelli.com
Olá Vanessa,
Você sabe dizer se o plugin Jetpack está instalado no blog? Você pode estar utilizando algum plugin que está otimizando as imagens, mas está perdendo muita qualidade.
Se você for no painel do WordPress em Mídia > Biblioteca e visualizar uma das fotos a qualidade realmente está melhor do que a que aparece no site? Tem certeza?
Se você tiver certeza é possível que realmente seja algum plugin.
Fico no aguardo.
Abraço.
Olá Sendy, eu estou com um probleminha e gostaria de saber se você tem como me ajudar.
As imagens nos meus posts do WordPress saem sempre sem qualidade. Eu já tentei diminuir o tamanho no photoshop, já coloquei o código na página de functions.php e nada resolveu (www.iuryparise.com.br)
Sabe o que mais posso fazer?
Olá Iury,
Você está utilizando algum plugin otimizador de imagens?
Você está subindo as imagens em .png ao invés de .jpg?
Fico no aguardo.
Abraço.
Olá Gabriel,
Não uso nenhum plugin otimizador de imagens e uso as mesmas em .jpg – mas sempre as salvo na qualidade máxima e mesmo assim aparecem sem qualidade.
Abraço.
Iury,
Dando uma verificada no seu site as imagens aparecem em ótima qualidade.
Pode me mandar uma página especifica onde isso pode estar acontecendo e um link para a imagem original.
Fico no aguardo.
Abraço.
Gabriel, tudo certo? Depois de mil anos, aqui estou eu novamente.
Bom, vou te enviar o link de um post e de uma imagem em particular para você dar uma analisada:
Este é o post: http://iuryparise.com.br/as-obras-de-arte-comestiveis-expostas-na-cake-design-expo-2016/
E está é uma das imagens que está nele (a de destaque): http://i1.wp.com/iuryparise.com.br/wp-content/uploads/2016/08/000.png?resize=750%2C410
Repare que ela está sem qualidade, sendo que quando a salvei (inclusive no meu computador) ela está 100%. Não sei mais o que posso fazer.
Olá Iury,
Você provavelmente está usando o plugin Jetpack para WordPress. Nesse plugin existe uma opção (não me lembro qual) que salva suas imagens no servidor do wp.com e utiliza como um serviço de cdn em seu blog. Acredito que essas imagens estão sendo enviadas de volta depois de passar por um processo de redução de imagem para otimizar o tamanho final dela.
Nesse caso, você vai precisar parar de utilizar este serviço e utilizar diretamente o próprio WordPress. Desativando essa opção no Jetpack deve fazer tudo voltar ao normal.
Verifica lá e me atualiza.
Abraço.
Bom dia Gabriel! Então, o problema é saber onde faço isso. Cliquei nas configurações do Jetpack e em “Fotos e Vídeos” mas só aparece Carrossel, Galerias Lado a Lado, Photon e Shortcode de Incorporação. E só tenho a opção de desativar.
Gabriel, acabei de ver que era a opção “Photon” do Jetpack. Desativei e agora tá tudo sucesso! As imagens demoram um pouco mais pra carregar, mas nada se compara com a qualidade das fotos. Não tenho nem como te agradecer! Obrigado de verdade :)
Excelente Iury,
Fico feliz que tenha resolvido seu problema e espero que siga tudo certo.
Muito obrigado por me retornar com a situação.
Grande abraço!