As imaxes teñen varias características fundamentais que debes aprender a valorar como merecen porque é un dos factores máis determinantes á hora de atraer e seducir aos teus potenciais clientes.

Non podemos prescindir delas en case ningunha situación.

Unhas boas imaxes son sinónimo dun aspecto profesional, sensación de calidade e boa opinión do cliente de quen está detrás da web. Por iso debes pensar na posibilidade de facelas cunha profesional.

Porén a súa incorrecta utilización e optimización pode penalizar de xeito decisivo o teu deseño web.

As imaxes adoitan ser a maior parte de datos que envía unha páxina cando é consultada polo usuario, ocupan un espazo destacable nos servidores, consumen os recursos do hosting e un peso excesivo das mesmas afecta negativamente ao SEO.

Reducir o seu peso e adecuar o seu tamaño é unha obriga para todo aquel que manteña unha páxina web.

Unha correcta optimización axúdanos a facer que as imaxes sexan eficaces e mellore o rendemento. Cantos menos datos se descargue o usuario, maior será a velocidade, menor o consumo de recursos e Google estará máis contento.

Neste senso este artigo ten como obxectivo mostrar trucos e ferramentas útiles para optimizar as túas imaxes sen que perdan calidade.

Acompáñame!

Selecciona o formato de imaxe acaído

Non é ningún segredo que o formato da imaxe determina as súas características e tamén en parte o seu peso.

• Imaxes vectoriais (ou de formato SVG). É un tipo de imaxe formada por obxectos xeométricos definidos por valores matemáticos. As imaxes vectoriais son ideais para logotipos, iconas, etc. e ofrecen un resultado óptimo en axustes de aumentos de resolución, pois non se pixelan. Porén, non serven para fotografías.
• Imaxes de mapa de bits (ou bitmap). Son un tipo de imaxes formadas mediante unha cuadrícula de pixeles cunha cor individual definida para cada un. Este tipo de formatos teñen problemas ao aumentarlles o tamaño dando lugar a imaxes borrosas ou distorsionadas. Porén son ideais para mostrar fotos. Formatos tan coñecidos como JPEG, PNG ou GIF son mapas de bits.

Neste sentido ten en conta as súas propiedades para saber que formato elixir en cada momento e por que é a mellor opción:

Prioriza as imaxes vectoriais para formas xeométricas, iconas e logotipos de alta resolución.

Escolle o formato GIF se precisas imaxes animadas, e só neste caso, porque ten un importante límite de gama de cores (256 cores) o que adoita ser insuficiente para a maioría de imaxes.

Opta polo formato PNG se queres manter detalles de alta definición e ademais precisas fondos transparentes. Hai que ten en conta que adoitan ser imaxes de maior peso que as outras.

Elixe o formato JPEG se queres obter unha combinación de optimización cunha perda mínima de calidade e un peso aceptable. É ideal para a maioría das fotos, aínda que debes ter en conta que non permite fondos transparentes.

Escollas o que escollas hai que optimizar sempre ao máximo as imaxes.

Optimiza as imaxes con software no teu PC

Podes escoller o programa de edición de imaxes que desexes, pero o meu consello é que o fagas co coñecido Photoshop ou cunha boa alternativa libre, o Gimp.

O primeiro que tes que facer é fixarte na resolución, e adaptala. Agás circunstancia xustificada, non creo que precises imaxes de máis de entre 800px e 1000px de ancho (agás que queiras unha que ocupe a pantalla completa e teña 1920px de ancho para pantallas full HD).

Photoshop ten unha opción óptima para realizar este paso, seleccionando a opción “gardar para web”, que reduce e optimiza a imaxe directamente.

No caso de Gimp debes primeiro redimensionar a capa e posteriormente exportala.

Optimizando unha imaxe de 3857px de ancho e 3,76 MB de peso conseguimos unha redución considerable tanto en Photoshop (91% de redución – 339KB sen perda de calidade) como en Gimp (96% de redución – 150KB cunha perda de calidade mínima).

Optimiza as imaxes con aplicacións online

Outro paso na optimización das imaxes sería utilizar TinyPNG, unha ferramenta nestes intres imprescindible no meu día a día.

TinyPNG é unha ferramenta online que comprime ao máximo as imaxes, combinando cores similares e suprimindo os metadatos (información sobre onde, como e cando foi sacada a foto).

O servizo é completamente gratis, pode optimizar un máximo de 20 imaxes á vez e chega con arrastrar e soltar as imaxes para que a aplicación faga o resto.

Optimiza as imaxes mediante plugins de WordPress

Ter un plugin de optimización de imaxes permite que non teñas que preocuparte desta cuestión unha vez que a imaxe está no teu WordPress. Adoitan funcionar de xeito automático e existe unha oferta múltiple de plugins gratuítos e de pago.

Smush Image. O seu funcionamento é súper sinxelo. Unha vez instalado comeza a optimizar as imaxes que previamente subiches. Redimensiona, optimiza e comprime. Se queres forzar a que o plugin reoptimice, simplemente debes pulsar a opción “Bulk Smush Ahora”.

Este plugin está moi ben valorado pola comunidade, con 3.814 puntuacións positivas e máis dun millón de instalacións. Ten unha versión PRO que permite, entre outras cousas, optimizar imaxes de máis de 1MB de peso.

EWWW Image Optimizer. Un plugin moi similar ao anterior. Optimiza automaticamente as imaxes a medida que se suben ao teu sitio web. Simplemente hai que instalalo e deixar que se encargue de todo.

SG Optimizer e LiteSpeed Caché. Se tes o teu hosting contratado con Siteground ou con Raiola Networks, as miñas opcións principais de aloxamento como podes ler na miña caixa de ferramentas, xa incorporan dous plugins de optimización propios que conteñen diferentes opcións (entre as que se atopa tamén o tratamento de imaxes).

Conclusión

No artigo de hoxe viches a importancia de optimizar as imaxes para o teu WordPress.

Con tres simples pasos reducimos de xeito exponencial o peso dunha imaxe, sen case perda aparente de calidade.

Se queres ter unha páxina veloz e onde o usuario navegue comodamente, debes prestar especial atención ao tema que vimos de tratar. E ten por seguro que vai ser moi difícil que consigas comprimir máis a imaxe do que o acabamos de facer.

Pensas que hai mellores métodos?

Como podemos mellorar o funcionamento das imaxes no noso WordPress?

Vémonos nos comentarios!