Vivemos em um mundo de alta definição. E como a maioria de nós passa mais de oito horas por dia olhando para diferentes tipos de tela, a qualidade das imagens e os caracteres contidos nessas telas são muito importantes.
Embora estejam disponíveis há apenas alguns anos, os visores Retina são o caminho do futuro. A alta densidade de pixels em telas Retina torna as imagens claras e nítidas. E quem não ama imagens bonitas e nítidas?
Aprenda a criar um site compatível com telas Retina é um ativo importante para qualquer desenvolvedor web. Infelizmente, não existe uma solução ideal e perfeita para tornar seu site amigável com telas Retina-Ready.
Portanto, enquanto esperamos que alguém encontre a solução mais completa, examinamos algumas das melhores opções possíveis para preparar o seu site. Dessa forma, você não será desencaminhado quando chegar a hora em que todos os dispositivos terão Retina aparecendo de uma forma ou de outra.
Mas antes de começar, reserve um tempo para dar uma olhada Como instalar um tema WordPress, Quantas plugins devo instalar no WordPress.
Então vamos ao trabalho!
Criando vários arquivos de imagem
Vamos começar com o básico. A maneira mais fácil de obter suporte do Modo Retina para o seu site é crie múltiplas variações de imagem em diferentes resoluções. Isso significa que para cada tipo de resolução (ou seja, 1x), você precisa criar uma versão de alta resolução desse clipe (ou seja, 2x).
Basicamente, você pode criar várias versões do mesmo arquivo e usar um plugin como WP Retina 2x ou um script como retina.js para gerar automaticamente as versões "@ 2x" de cada tamanho de imagem ou encontrar imagens "@ 2x" e exibir o tamanho correspondente a cada dispositivo.
É verdade que criar várias versões da mesma imagem pode ser um processo demorado. Infelizmente, não existe um método rápido que gere automaticamente essas imagens para você. Contudo, existem vários plugins do Photoshop que permitem reparar rapidamente suas imagens.
Plug-ins como " Retinize It Que é uma série de ações do Photoshop que permitem otimizar facilmente seus designs para telas Retina. Se estiver usando uma versão mais antiga do Photoshop (pré-CC), você pode usar algo como " Quatro O que basicamente faz tudo o que a ferramenta Photoshop Generator atual faz, mas para versões mais antigas do Photoshop.
Gráficos vetoriais escaláveis (SVG)
A maneira mais fácil de avançar com o modo Retina é usar Scalable Vector Graphics (SVG) em seu site. SVG é um formato de imagem vetorial baseado em XML. Como o nome sugere, uma imagem SVG é escalonável, o que significa que as imagens podem ser esticadas tanto (ou tão pouco) quanto necessário, embora sejam nítidas e claras. Pode ser uma maneira rápida e fácil de implementar o Modo Retina sem muito esforço.
Leia também: Como fornecer imagens WebP em vez dos tradicionais PNG e JPG
No entanto, existem duas desvantagens em usar SVG no WordPress. A primeira é que, por ser um formato vetorial, o SVG não é adequado para todas as imagens. Portanto, você pode usar SVG para logotipos e ícones, mas não para arquivos como fotos (o que é um pouco doloroso se você gosta de usar imagens de alta resolução no seu site). Mas se você quiser usar ícones simples, animações ou ilustrações, os arquivos SVG certamente podem ser uma opção para um site compatível com o Retina.
A segunda desvantagem de usar SVG no WordPress é que ele não é um formato oficialmente compatível com o WordPress devido a questões de segurança. Como um arquivo SVG é essencialmente um arquivo XML, ele abre para todas as vulnerabilidades conhecidas associadas ao formato de arquivo XML, como análise coercitiva, ataques de entidade externa XML (XEE), ataques de negação de serviço XML (XDoS), etc.
No entanto, existe uma maneira de habilitar o suporte SVG para o seu site, o que tornará seus arquivos SVG seguros.
Como ativar o SVG com segurança no WordPress
SVG seguro é um plug-in que permite ativar com segurança o suporte a arquivos SVG em seu site. Este plugin garante que seus arquivos SVG sejam desinfetados para prevenir quaisquer vulnerabilidades XML em potencial que afetem seu site.
Fique longe de plug-ins que permitem o tipo MIME para permitir o upload de SVG para a biblioteca de mídia do WordPress, pois eles são perigosos e potencialmente prejudiciais para o seu site. Portanto, se você estiver realmente tentado a usar o formato SVG no WordPress, certifique-se de fazer isso com segurança e não baixe o primeiro plug-in SVG que vir.
Gere mais conversões para o seu blog lendo nosso tipos de conteúdo 15 que geram mais visitantes para o seu blog
Alguns plugins para integrar a compatibilidade do Retina no WordPress
Existem vários scripts e plug-ins para compatibilidade com Retina que podem tornar sua vida muito mais fácil ao tentar configurar um site compatível com o Modo Retina. No entanto, como mencionado anteriormente, a maioria dos plug-ins e scripts disponíveis substituem suas imagens por imagens de alta resolução apenas para telas de alta resolução. Eles não se estendem como um SVG: você ainda precisa criar várias imagens de diferentes resoluções.
1 - retina.js
retina.js é um dos scripts mais usados para servir imagens de alta resolução. Este é um script de código aberto que facilita a veiculação de imagens de alta resolução em dispositivos com telas Retina.
O script verifica cada imagem na página para ver se há uma versão de alta resolução dessa imagem no servidor. Se houver uma variante de alta resolução, o script trocará a resolução padrão pela imagem de alta resolução. Esta é uma das formas mais comuns de veicular imagens para telas Retina em seu site.
Veja também: GIF, Emojis ou Memes: uma boa ideia para sites WordPress?
2 - Denso
Semelhante ao retina.js, Denso é um plugin jQuery que oferece uma maneira fácil de exibir imagens no formato de proporção de pixels. O script chama o método $ .fn.dense () de inicialização, que tem como alvo as tags "img" que servirão como imagens compatíveis com o modo Retina conforme necessário.
Portanto, ele substitui todas as imagens pela respectiva versão de alta resolução, assim como o script retina.js.
3 - WP Retina 2x
Este último pode ser comparado a um gerador mágico de imagens Retina.
WP Retina 2x é um plugin que cria arquivos de imagem exigidos por dispositivos de alto DPI e os exibe para seus visitantes de acordo. Ao contrário dos dois scripts anteriores, ele gera imagens de resolução diferente a partir de uma imagem inicial. Portanto, se você não estiver muito satisfeito em criar manualmente imagens diferentes com resoluções diferentes, esta opção é para você.
Isso é tudo para este tutorial, espero que permita converter suas imagens para a imagem Retina Ready.
Descubra também alguns plugins premium do WordPress
Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.
Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.
1. Uma lista de escritores extravagantes do WordPress
Como o nome sugere, o plugin Lista de autores sofisticados do WordPress exibe a lista de autores do seu site em um widget. Possui uma interface de usuário simples que permite exibir as informações de qualquer autor na barra lateral. Tudo o que você precisa fazer é arrastar o widget do autor para a barra lateral e o plug-in fará o trabalho.
Suas principais características são, entre outras: a possibilidade para exibir os autores do blog de uma forma divertida para atrair novos visitantes, a capacidade de exibir uma lista de autores na barra lateral ou na página, a capacidade de iniciar uma competição entre os autores do seu blog, um layout responsivo, suporte para códigos de acesso e muito mais.
Download | Demo | hospedagem na web
2. Índice Fácil
Ce WordPress Plugin user-friendly permite que você insira um índice em suas postagens, páginas e tipos de postagem personalizados. Possui muitas funcionalidades, sendo as principais:
gerenciamento automático de um índice, suporte para a tag , Suporte ao plugin Rankin Math, compatibilidade com vários editores de página, como Gutenberg, Divi, Elementor, WPBakery Page Builder e outros, a possibilidade de escolher em quais páginas suas publicações deseja exibi-lo, a inserção automática do índice em determinadas páginas, e muitas outras.
Este é um WordPress Plugin freeware que tem tudo o que você precisa para exibir seu índice, então fique à vontade para escolhê-lo como sua primeira escolha.
Descarregar | Demo | hospedagem na web
3. WooCommerce Advanced Bulk Edit
Você edita regularmente seu catálogo de produtos? Se você tem 100 produtos ou 10.000, este WordPress Plugin premium é na minha humilde opinião “A must have”: (Essa é a primeira palavra que vem à mente).
Por apenas alguns dólares, o plugin WooCommerce Advanced bulk Edit facilitará a vida e poupará tempo monstruoso. Não há hesitação, é uma bomba.
Descarregar | Demo | hospedagem na web
Recursos Recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- fontes 5 de tráfego que você provavelmente sabe
- Estudo de Caso: Marketing de conteúdo, como aprender com os erros
- Por que os freelancers precisam de uma programação diária
- aspectos 7 que o ajudarão a criar um blog de sucesso
Conclusão
Aqui ! É isso neste tutorial, espero que ele permita que você crie imagens prontas para Retina para o seu site. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia em Criação de blog WordPress.
Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.
...
