NeoAttack » Cómo optimizar imágenes para web: herramientas y consejos

Cómo optimizar imágenes para web: herramientas y consejos

por | Nov 21, 2018 | ESTRATEGIAS SEO | 0 Comentarios

Optimizar imágenes para web siempre ha sido una cuestión importante.

Y es que, si has llegado hasta aquí, es porque así lo crees.

Con este post no solo ampliarás tus conocimientos sobre los tipos de archivos de imágenes y opciones de optimización, sino que además reflexionarás sobre el impacto que el diseño tiene en el WPO y la experiencia de usuario final, de forma que si trabajas en un proyecto web, tengas la capacidad de encontrar un equilibro entre el diseño y el rendimiento del sitio.

¿Preparado? ¡Vamos a ello!

Optimizar imágenes, una cuestión de rendimiento web y experiencia de usuario

¿Alguna vez te habías preguntado el impacto que el diseño tiene en el desempeño de una web?

¿Y te has preguntado en qué otros ámbitos puede repercutir el buen o mal rendimiento del sitio online? Solo hace falta pensar en cómo nos comportamos cuando hacemos una búsqueda en Internet.

¿Qué tan probable es que tras abrir varias pestañas regreses a una web la cual carga de forma lenta? Muy pocas, seguramente.

Pero es que quizá no solo no regreses en ese momento, sino que no regreses nunca.

Así que cuando hablamos de rendimiento web, cuanto mayor esfuerzo dediques a ello, mejor.

optimizar imágenes para rendimiento web

La optimización de imágenes es quizá, uno de los aspectos que mayor impacto tendrá en la mejora de la velocidad de carga de un sitio online.

Esto es debido a que las imágenes constituyen la mayoría del peso total de una web.

Y es que cada vez se incluyen más imágenes y de mejor calidad en los sitios online, principalmente en los sitios de comercio electrónico lo cual hace que el peso promedio de una web vaya in crescendo cada año.

En el último análisis que de forma periódica hace HTTP Archive queda claro.

optimizar imágenes peso según httparchive.org

Reducir el tamaño de fotos, reducir el peso de una imagen y otras mejoras sustanciales en los elementos de diseño que conforman el sitio web contribuirá a:

Velocidad de carga. Al optimizar imágenes de una web mejorará sustancialmente el rendimiento del sitio online.

Mejor posicionamiento web. Además de mejorar la velocidad web, se ha de optimizar imágenes para el seo. La velocidad de carga afecta al ranking en los motores de búsqueda ya que Google incluye la velocidad del sitio en su algoritmo de clasificación. Aprovecha al máximo el tiempo de rastreo que Google destina a tu sitio, haciendo que este rastree el mayor número de páginas posibles al mejorar el peso de la web.

Experiencia de usuario. Si es bueno para el usuario, es bueno para Google. Una web que no termina de cargar es un pain point a tener muy en cuenta.

Imagen de marca. La velocidad de carga de una web tiene un gran impacto en la imagen de marca de una empresa. Gran parte de cómo se percibe tu sitio, viene dado por el tiempo que le has hecho invertir a un usuario en acceder a tu web y encontrar lo que buscaba.

Ahora que has visto la importancia de optimizar imágenes de un sitio web, aprenderás cómo hacerlo.

¿Cómo optimizar imágenes para web?

Para optimizar imágenes de una web, lo primero es conocer los distintos tipos de archivo de imágenes disponibles.

De esta forma no solo sabrás elegir el formato que mejor se adapta a tus necesidades en cada momento, sino que sabrás las opciones de optimización de las que dispones en cada caso.

Tipos de archivo de imágenes disponibles y opciones de optimización

Comprimir JPG/JPEG

El tipo de archivo .jpeg es un formato de imagen idea para fotografías. Se utiliza para imágenes con muchos colores.

El formato de imagen jpeg es un formato de archivo con pérdida. Esto quiere decir que al cambiar el tamaño de imágenes jpeg, este descarta parte de información a medida que se guarda.

La compresión jpeg se efectúa mediante un algoritmo basado en la forma que los humanos vemos y en la que percibimos la información.

Por tanto, al reducir el tamaño de un JPG, y con la bajada en la calidad de la misma, notaremos artefactos (pérdida de claridad) y granulosidad en ciertas partes.

comparación optimización imágenes en photoshop

Entonces ¿por qué se utilizan tanto las imágenes jpg en webs? Una imagen jpg es ideal para crear archivos pequeños, pero con mucha información.

Al comprimir archivos jpeg obtendremos un archivo pequeño para imágenes que, de otra forma, serían muy pesados y ralentizarían el tiempo de carga de una web.

¿Cómo comprimir un archivo jpeg?

Realiza pruebas con diferentes calidades de imágenes jpeg de forma que obtengas una imagen de una calidad aceptable y con un tamaño relativamente pequeño.

Para ello, utiliza la opción Guardar para Web del Photoshop.

En la imagen de ejemplo anterior, la imagen superior muestra una calidad infinitamente mejor que la imagen inferior, la cual presenta gran perdida de información.

Sin embargo, el peso total de esa imagen es de 205,2 KB, excediendo así el peso recomendado.

Formato

Jpeg progresivo

Y si el rendimiento real de una web es importante, el rendimiento percibido también lo es.

Te habrás dado cuenta de que, en muchas webs, las imágenes se cargan de arriba a abajo. Estas imágenes son del tipo JPEG de línea o baseline.

Y como se escanean , aparecen en el navegador.

Un archivo JPEG Progresivo es un archivo que en vez de realizar un escaneo de arriba abajo apareciendo en fragmento en la web, aparece todo a la vez, pero de baja calidad.

Poco a poco, mientras se carga la web, la imagen de baja calidad de va reemplazando progresivamente por versiones de calidad más alta.

[blockquote]El JPEG progresivo es una forma de mejorar el tiempo de carga de la web a la par que la experiencia de usuario.[/blockquote]

[infobox color=»#dff7dd»]✍ Opciones para optimizar imágenes en formato jpeg: disminuye la calidad de la imagen haciendo diferentes pruebas para que la imagen final tenga un buen balance de peso y calidad. Reduce el ruido de la imagen. Convierte tus archivos JPEG baseline en archivos JPEG progresivos. [/infobox]

GIFS

El padre de los formatos de archivos gráficos para web. Actualmente obsoleto para cosas que no sean imágenes animadas debido a su alta capacidad para incluir animación.

Al ser un formato de archivo sin pérdida, podrás reducir el peso de un gif sin los problemas que presentaba el JPEG.

[infobox color=»#dff7dd»]✍ Opciones para optimizar imágenes en formato GIF: para conseguir un equilibrio entre estética del GIF y tamaño de archivo, disminuye el tramado y el nº de colores. Aumenta los patrones horizontales y reduce el ruido vertical. Esto afectará sustancialmente al tamaño del archivo. [/infobox]

Antes de optimizar imágenes GIF, considera reemplazarlo por una animación CSS3.

Imágenes PNG

Diseñado para mejorar el formato de archivo GIF, el PNG es un formato de imagen sin pérdida ideal para imágenes planas, con pocos colores o espacios en blanco y transparencias parciales.

[infobox color=»#dff7dd»]✍ Opciones para optimizar imágenes en formato GIF: un compresor de png utiliza un método diferente al método de compresión de los GIFS. Además de los patrones horizontales también busca los verticales por lo que es probable que el archivo resultante tras comprimir un png sea de un tamaño más reducido que un GIF. [/infobox]

La gran mayoría de imágenes que se utilicen en una web serán PNG. Otra porción serán las fotografías de gran tamaño en formato JPG y solo una muy mínima parte serán GIFS.

Herramientas de optimización y programas para comprimir imágenes

El Photoshop será tu herramienta nº 1 para optimizar imágenes para web. Es el mejor programa para redimensionar imágenes sin perder calidad deseada.

Actualmente, el Photoshop es uno de los mejores programas para comprimir fotos, redimensionar imágenes sin perder calidad, reducir el peso de fotos, optimizar la calidad de imágenes, etc…

Utilizando la herramienta Guardar para Web de Photoshop tendrás opciones para optimizar imágenes de forma rápida y fácil.

Además de proporcionarte optimizaciones adicionales para muchos formatos de archivo de imágenes, te permite previsualizar el resultado antes de guardar y te permite subir o bajar la calidad de fotos e imágenes de todo tipo.

Verás en una misma pantalla cómo a la vez que ajustas la calidad de la imagen se reduce el tamaño de tu foto.

[blockquote]Con guardar para web encontrarás el equilibrio perfecto entre estética y tamaño de archivo.[/blockquote]

[infobox]❗ Para acceder a esta opción: abre el Photoshop > Archivo > Guardar para Web[/infobox]

Optimizar imágenes GIF

El Photoshop te servirá como programa para reducir peso de fotos formato GIF.

Accede a la herramienta, selecciona el formato de archivo, selecciona la calidad de la imagen teniendo en cuenta el peso de la misma, elige la cantidad de colores de la paleta y el tramado.

Optimizar imágenes GIF

Ten en cuenta que la cantidad de tramado afectará al tamaño del archivo.

De jpeg a jpeg progresivo

Photoshop te servirá también para optimizar imágenes JPEG e incluso convertir el archivo baseline a un jpeg progresivo.

Tan solo tendrás que dar el check a la casilla Progresivo en el cuadro de diálogo.

jpeg a jpeg

Comprimir archivos online

Existen algunos programas para comprimir fotos en internet muy útiles y fáciles de usar.

El más conocido es el programa para comprimir fotos online TinyPNG, un compresor de imágenes png y jpeg.

Es un compresor de imágenes gratis con el que podrás optimizar imágenes para web al instante y si descargarte o pagar por ningún programa.

Entra en nuestro video tutorial para comprimir y reducir el tamaño de fotos e imágenes online sin perder calidad y conviértete en un verdadero crack en optimizar imágenes.

Optimizar imágenes para WordPress

Dado que WordPress es actualmente uno de los CMS más utilizados en la actualidad, quise incluir una opción para optimizar imágenes de este tipo de webs de forma sencilla.

El programa para comprimir imágenes se llama Smush.it. Es un programa para comprimir imágenes sin perder calidad el cual trabaja solito una vez instalado.

Te ayudará a reducir el tiempo de carga de la web manteniendo las imágenes con un aspecto visual óptimo.

Smush.it

Ahora que sabes cómo y por qué optimizar imágenes, queda en tus manos crear una cultura de trabajo en la que se valore el rendimiento de un sitio web y unos procedimientos de trabajo para no malgastar recursos materiales y humanos en el correcto rendimiento de un sitio online.

[infobox color=»#dff7dd»] No te pierdas: SEO On Page: Guía Completa con Consejos y Trucos para Posicionar en Buscadores (haz click en el link) Y aprende sobre optimización SEO de imágenes[/infobox]

Si necesitas una Agencia de Diseño gráfico que además de ser expertos en Diseño y Branding sean unos cracks en SEO ¡somos los indicados!

banner diseño web

Y tu ¿cómo pones “a dieta” tu web? Tus comentarios pueden ser útiles para otros usuarios.

Teletrabajo y productividad. ¿Qué relación tiene?

En los últimos años, hay dos conceptos que la sociedad ha comenzado a mencionar y relacionar entre sí de manera habitual dentro del entorno laboral: teletrabajo y productividad. En NeoAttack, agencia especializada en marketing digital, ya aplicamos esta novedosa...

leer más

¿Quieres ser mejor que tu competencia?

Descubre cómo.

Estos posts también podrían interesarte

Teletrabajo y productividad. ¿Qué relación tiene?

En los últimos años, hay dos conceptos que la sociedad ha comenzado a mencionar y relacionar entre sí de manera habitual dentro del entorno laboral: teletrabajo y productividad. En NeoAttack, agencia especializada en marketing digital, ya aplicamos esta novedosa...

leer más

Publicidad en TikTok: la guía completa

Me gustaría empezar este post afirmando que, como buen millennial al límite de ser Gen Z: ¡me declaro adicto a TikTok! Y, como buen Paid Media, me declaro también adicto a la publicidad en TikTok y a su gran variedad de formatos publicitarios a los que da soporte. Hoy...

leer más

¿Cómo recuperar el posicionamiento en Google de tu web?

Google ha cambiado mucho desde sus inicios y ahora considera los sitios web que se esfuerzan en hacer un trabajo limpio de posicionamiento o SEO de calidad, teniendo en cuenta desde un Backlink natural hasta la experiencia de usuario en el sitio web. Para saber cómo...

leer más