08 Jan

Otimizando as imagens eu seu site WordPress ou outros CMS

1. Tamanho da imagem (dimensões em pixels)

Independentemente dos formatos de arquivo (JPG, PNG, GIF, TIF, etc.), você nunca deve carregar imagens de alta resolução em seu site apenas para fins de exibição.

A única exceção é se você tiver um arquivo de imagem protegido que também forneça impressões e licenças de imagem (como o PhotoShelter, que tem medidas de segurança em vigor a qualquer momento). Caso contrário, se você estiver exibindo imagens em um portfólio ou em uma postagem do blog, nunca use imagens nas dimensões máximas.

 

a) Apresentações de slides de largura total
Para slideshows de largura total (que aumentam automaticamente para o tamanho total do navegador), eu recomendo ir para 2560 pixels de largura, que é a largura de resolução comum para monitores de 27 ″ e 30 ″.

As imagens podem ter a altura necessária para criar uma proporção com a qual você se sente confortável. Por exemplo, para slideshows de página inteira, mantenha a proporção original das imagens. Mas, para apresentações de slides menores na parte superior de uma página inicial, tente manter as imagens menores (para uma proporção de cerca de 3: 1 ou mais).

Aqui está um exemplo de uma apresentação de slides de um site de fotografia recente que eu construí:

b) Imagens menores / miniaturas
Descubra o tamanho do site que eles exibem (usando a ferramenta “Inspecionar Elemento” do navegador ou uma captura de tela do seu site e meça o tamanho da imagem) e duplique isso.

Por exemplo, este site exibe miniaturas (abaixo do controle deslizante principal) em 320 × 214 pixels.

Mas, se olharmos mais de perto, o site usa um tamanho de imagem duplo (640 pixels de largura) para que pareçam nítidos em telas de retina:

c) Imagens grandes em “lightbox” são exibidas
Sempre que uma imagem precisar ser ampliada na tela (como em uma tela de lightbox depois de clicar em uma miniatura, possivelmente parte de uma apresentação de galeria), mantenha-a no máximo a 1.500 pixels de largura (e uma altura máxima de 800-900 pixels) normalmente é aceitável.

Restringir as dimensões da imagem como essa manterá o tamanho do arquivo razoavelmente pequeno, para uma transição mais rápida entre as imagens (se a apresentação de slides permitir a navegação entre as imagens):

2. Qualidade de imagem / nível de compressão

a) Exportando imagens JPG
Supondo que você esteja usando uma ferramenta como o Adobe Lightroom, você quase nunca precisa exportar imagens para 100 (no controle deslizante de qualidade). Escolher algo como 60 ou 70 dá a você uma qualidade boa o suficiente em tamanhos de arquivo muito menores.

Somente quando você começa a ir abaixo de 50 a 60% você começa a obter ruído de imagem perceptível. Mas entre 100 e 70-80, a diferença de qualidade é imperceptível, enquanto a diferença no tamanho do arquivo de imagem é enorme.

Aqui está uma experiência que eu fiz com a exportação de uma imagem em diferentes níveis de qualidade:

Um princípio semelhante se aplica se suas imagens de exportação do Adobe Photoshop.

E se você estiver usando a versão mais recente do Photoshop CC, use a nova caixa de diálogo de exportação em Arquivo> Exportar> Exportar como…

Em seguida, faça algumas experiências e escolha um nível de compactação com o qual você se sinta confortável. Mais uma vez, a maioria das pessoas considera 60% – 70% um compromisso aceitável (entre a qualidade da imagem e o tamanho do arquivo).

b) Usando PNG / SVG / GIF para gráficos com cores sólidas
Seu website provavelmente contém outros elementos gráficos separados das suas fotos comuns, como logotipos, ícones, capturas de tela, banners etc.

Quaisquer gráficos que contenham áreas de cor sólida (criados por você no Photoshop ou outras ferramentas online) poderiam ser salvos em outros formatos de arquivo sem perdas. Os formatos PNG, SVG e GIF podem funcionar bem nesses casos.

Vamos pegar um dos gráficos que usei acima neste artigo como exemplo:

Você tem que testar isso sozinho, em uma base por imagem. Sempre tente usar formatos de arquivo sem perdas (como PNG ou GIF) quando puder obter tamanhos de arquivo menores (em comparação com JPG).

Mas como eu disse, isso só vale para gráficos com cores sólidas. Sempre que você tentar esse mesmo experimento com uma foto normal (tirada com sua câmera), o JPG geralmente ganha (muito).

3. Extra compressão usando ferramentas ou plugins

OK, então você está pronto para enviar imagens para o seu site.

a) plugins WordPress
Se estiver usando o WordPress, você está com sorte. Há um monte de ótimos plugins que fazem muito trabalho para você, automaticamente. Eles pegam todas as imagens que você carrega e comprimem (sem perdas) para otimizar o tamanho do arquivo.

Imagify, Smush.it e Kraken são soluções populares, mas o meu favorito é o ShortPixel:

Uma conta gratuita com eles oferece uma cota mensal decente e você pode obter um plano premium para permitir a otimização de muitas outras imagens por mês, se necessário.

O nível de otimização “brilhante” do plug-in oferece um bom compromisso entre a qualidade da imagem e o tamanho do arquivo, mas você pode alternar para os níveis de otimização “com perdas” ou “sem perda” conforme achar adequado.

Se puder, recomendo a otimização em massa de todas as suas imagens antigas (da biblioteca de mídia do WordPress):

Veja como o ShortPixel se compara ao Imagify, E www e outras ferramentas de otimização de imagem.

Plugins WP mais úteis aqui:

b) Outras ferramentas de compactação de imagem
Se você não usa o WordPress, pode experimentar outras ferramentas on-line ou on-line para “espremer” suas imagens.

Share this
17 Dec

Plugin formulário para WordPress

Formidableforms: um ótimo plugin formulário para WordPress

Todo programador web em algum momento vai precisar desenvolver um formulário para coletar registros, em diversos CMSs e Frameworks existem dezenas de opções, aqui trazemos uma opção excelente para o CMS WordPress.

O Formidableforms é um plugin formulário para WordPress, compatível com as versões mais recentes. O plugin esta disponível  no site dos desenvolvedores.

Conheça os planos de hosting WordPress da GF7 Brasil!

Dentre os recursos que este poderoso plugin oferece estão por exemplo:

* WordPress Drag and Drop Form Builder:

Criar formas complexas de maneira fácil com um simples criador de formulários arrastar e soltar WordPress. Usuários menos experientes podem com uma curva de aprendizado rápida criar formulários complexos.

* Formulário de várias páginas com barra de progresso:

Divida a entrada de dados complexos em formulários fáceis de gerenciar com várias páginas que salvam automaticamente um rascunho em cada virada de página. Barras de progresso e linhas-raiz também proporcionam uma ótima experiência ao usuário. A experiencia do Usuário é de suma importancia para que o mesmo leve o preenchimento da ferramenta até o final. Portanto este recurso facilita e ajuda o usuário a compreender o progresso do preenchimento

* Editor Front End WordPress

Permitir que os usuários editem entradas de formulários, envios e páginas criadas pelo usuário ou postagens – tudo a partir da beleza do seu tema. A edição de front-end é bastante simples.

*Formulários Inteligentes com Lógica Condicional

Use a lógica condicional para mostrar ou ocultar perguntas com base nas respostas. Também redirecionar condicionalmente a submissão e encaminhar as notificações condicionalmente. Este feature é excelente se o usuário precisa de uma pesquisa de mercado ou fazer uma consultoria online por exemplo. Pode-se também utilizalo para realizar provas e testes com respostas interativas.

*Salvar e continuar envios parciais

Permitir que usuários conectados salvem o formulário e continuem depois. Salvar automaticamente os rascunhos na página, em formulários de várias páginas. Este recurso facilita a vida do usuário, e evita que os dados sejam perdidos.

Conclusão:

Alem de diversos outros recursos, este excelente plugin pode ajudar o seu site a conseguir uma taxa de conversão do formulário e torna a experiencia do usuário mais agradável. Também vale ressaltar que existe um painel com relatórios ricos em informações dos formulários já preenchidos facilitando a analise dos dados de maneira simples e eficiente.

Screenshots:

 

Download disponível em: https://formidableforms.com 

Share this

Since 2008 - GF7 Brasil Sistemas -  © All rights reserved.