Tres trucos para optimizar imágenes para web

Publica fotos en internet correctamente.  Hoy te traemos tres trucos pasos para optimizar imágenes para la web.

Tres trucos para optimizar imágenes para web
Tres sencillos pasos para optimizar imágenes para web
Tres sencillos pasos para optimizar imágenes para web

Tienes el CMS correcto (y si es Opennemas aún mejor), tu contenido es bueno, pero el tiempo de carga de tu web es terrible.

Pues seguramente se trata de un problema de optimización de las fotos en tu site.

Un dato para que veas lo importante que es un buen tiempo de carga web: el 47% de los internautas esperan que una web se cargue en 2 segundos. Si tu web tarda 3 segundos (uno más) el 40% de los que han querido entrar abandonarán y se marcharán a otro lugar. Como puedes ver el asunto es importante.

Por eso hoy te traemos tres sencillos pasos para mejorar la calidad de tus fotos y sacar el máximo rendimiento a tu web.

Las fotos: elemento crucial para SEO

Las fotografías forman parte del contenido de tu site y por ello es importante revisar que están colgadas de la forma correcta y que además enriquecen o aportan valor al contenido que has publicado.

Recuerda que las fotos de tu web también son importantes para SEO y si tus imágenes son las correctas, Google las indexará de la misma forma que lo hace con el contenido de calidad.

 

Si quieres saber más sobre SEO aquí te contamos seis sencillos trucos

 

Pero comencemos por el principio.

Muchos medios se nutren de imágenes de agencias pero también son muchas las ocasiones en las que el propio redactor o creador de contenido web sale a la calle y busca la fotografía perfecta

Por ello, y a la hora de la captura debemos de tener en cuenta los siguientes puntos:

1. Fotografías con situaciones dinámicas: Busca fotografías con situaciones en las que haya o se transmita movimiento. Donde se aprecien gestos de las personas o cosas que fotografiamos, sin poses y mirando a cámara.

Lo recomendable es buscar situaciones en las que se esté desarrollando una acción.

Dos ejemplos para ilustrar la diferencia:

Ejemplo de imagen no dinámica

no dinamica

Ejemplo de imagen dinámica

dinamica

2. Ángulos distintos: Una imagen con un ángulo diferente llama más la atención, bien desde abajo o desde arriba, se trata de ofrecer una perspectiva que no es la que tiene el espectador.

Recomendable también cortar el "aire" que rodea arriba y abajo la imagen que queremos mostrar y que no aporta nada al contexto de la situación.

Dos ejemplos para ilustrar la diferencia:

Ángulo diferente al del lector

buen angulo

Angulo del lector y con demasiado "aire" arriba

mal angulo

Optimización de imágenes

Y después de hacer la foto adecuada, ¿Qué ocurre si no optimizamos las imágenes que luego colgaremos en nuestra web?

Si se utilizan imágenes no optimizadas (una imagen de calidad con una resolución de 3000 x 2000 px puede fácilmente superar los 3 MB), la carga de las páginas de tu web será en general más lenta. Esto influirá negativamente en la experiencia de los usuarios y en los resultados de los buscadores de tu sitio de noticias.

Por ello antes de subir la imagen al CMS es necesario tratarla y optimizada previamente, para un uso de web.

Cualquier editor de imágenes, como photoshopgimp, etc. te permitirá hacer esto de una forma muy sencilla.

Para que os hagáis una idea muchas de las plantillas utilizadas en nuestro CMS Opennemas utilizan un tamaño de las fotos de 680 x 380 px y sin superar nunca los 90KB de peso.

Pero como ya os contamos, todo depende de la plantilla que uséis en vuestra web, así que siempre consultad en las recomendaciones que os facilite vuestro gestor de contenido.

No te pierdas nuestra comparativa más arriesgada entre Opennemas y Wordpress aquí

 

Por supuesto, también se puede controlar el ‘peso’ en la mayoría de editores de imágenes ajustando la compresión de la imagen.

Pasos importantes para optimizar imágenes:

1. Conocer los tipos de imágenes y las diferentes opciones

JPGS: El formato más popular en ecommerce y casi en toda la web.  Los JPG son perfectos para fotografías o imágenes complejas que contienen muchos colores, sombras, degradados o patrones complejos.

Los JPG manejan bien este tipo de imágenes porque los JPG tienen una gran paleta de colores para trabajar.

Los JPG también se pueden guardar en alta calidad, baja calidad o en cualquier punto intermedio. Esto te permite ajustar y guardar la imagen exactamente como quieras, equilibrando la calidad y el tamaño del archivo.

PNGS: Los PNG son también muy populares. En Adobe Photoshop, tendrás la opción de guardar PNG como PNG-8 o PNG-24.

PNG-8 tiene una paleta de colores muy limitada de 256 colores. Si bien el tamaño de la imagen es más pequeño, esta no será una buena opción para imágenes complejas y fotografías de muy alta calidad y mucho detalle.

Sin embargo, PNG-24 proporciona una imagen de mayor calidad, pero es un archivo de mayor tamaño.

Lo más importante es que los PNG pueden controlar mejor la transparencia. Este es uno de los mayores puntos de diferenciación entre PNG y JPEG.

png

GIFS: Los GIF fueron muy populares hace años, pero todavía son una opción para tamaños de imagen pequeños donde solo se necesitan unos pocos colores.

Al igual que PNG-8, los archivos GIF están restringidos a solo 256 colores.

Debido a esto, los GIF nunca deben usarse para fotos de productos.

2. Guardar imagen adecuadamente: Hay tres cosas que puedes hacer

GUARDAR LA IMÁGEN EN LAS DIMENSIONES ADECUADAS
Para ello debemos abrir la imagen en Photoshop y verla al 100%.

Esto te permite ver la imagen en el tamaño exacto que se mostrará en un monitor de un ordenador cuando guardes la imagen para la web.

GUARDAR PARA WEB

Es posible reducir el tamaño del archivo sin reducir significativamente la calidad de tus imágenes. Para ello se puede utilizar la opción 'Guardar para Web' de Photoshop.

Simplemente abre tu imagen en Photoshop y ve a Archivo> Exportar> Guardar para Web ....

Aparecerá una ventana que te permitirá elegir la calidad de exportación.

Hay que tener en cuenta, si se exporta en JPG:

  • La barra de calidad, de 0 a 100, siendo 0 compresión máxima y 100 compresión nula, es decir calidad alta. En Opennemas recomendamos siempre entre un 60% ~ 80%

  • La opción “progresivo”. Si se pulsa, el jpg guardará diferentes capas a diferentes calidades de manera que a la hora de cargarse en el servidor la imagen se verá inicialmente en baja calidad e irá mejorando su definición a medida que vaya cargando. Si no, la imagen aparecerá directamente en alta, a ‘trompicones’.

Si se exporta en PNG:

  • Como os explicábamos antes la principal diferencia es que PNG-8 comprime un máximo de 256 colores, mientras que PNG-24 alcanza los 16 millones de colores. Normalmente se usa PNG-8 para iconos, gráficos e imágenes con una paleta reducida de colores.

  • Transparencia. Solo se debe usar en el caso de que la imagen tenga partes transparentes.

  • La opción “entrelazado” es muy similar al “progresivo” en JPG, hace referencia al tipo de carga. Dependerá de nuestras preferencias y de las capacidades del navegador donde vaya a cargarse la imagen.

COMPRIMIR PARA WEB

Las aplicaciones de compresión de imágenes son la forma más fácil de reducir el tamaño de archivo de las imágenes.

Este tipo de herramientas eliminan datos ocultos en el archivo de imagen, como perfiles de color y metadatos adicionales (como la ubicación geográfica donde se tomó la fotografía) que no son necesarios.

Abajo algunas recomendaciones:

Y para explicaros aún mejor todos los pasos que hemos seguido os dejamos aquí abajo un paso a paso en imágenes

Paso a paso en imágenes

1. Ver imagen al 100%

optimizar imagenes 1

2. Exportar cómo

optimizar imagenes 3

3. Guardar para web

optimizar imagenes 2

3. Qué hacer con los contenidos ya subidos erróneamente

Y ahora llega la pregunta del millón: Sabemos que hay imágenes que están perjudicando el tiempo de carga de nuestra web¿qué hacemos entonces?

Para mejorar la carga de la web y reducir el espacio en disco es necesario listar las imágenes en el gestor que estemos utilizando. Por ejemplo, con nuestro CMS Opennemas es muy sencillo. Se puede hacer una visualización de todo el listado, buscar las imágenes de mayor peso y eliminarlas.

A continuación, y en cualquier caso, será necesario sustituir todas las imágenes eliminadas por otras de menor peso o por la misma pero optimizada para web.

Estaríamos ya listos y nuestras imágenes habrán quedado correctamente optimizadas, por lo que el tiempo de carga de la web habra mejorado considerablemente.

Esperamos haberos ayudado con todos estos consejos!

Entonces ¿aún no sabes todo lo que te ofrece el mejor CMS del mercado para periódicos digitales? ¡Contacta con nosotros y sabremos darte una solución individualizada tanto si eres un nuevo emprendedor en el ámbito de los medios o buscas dar un giro a tu diario! Y recuerda, puedes crearlo de forma totalmente gratuita haciendo click aquí.

¡CREA YA TU PERIÓDICO CON OPENNEMAS, ES GRATUITO!

banner opennemas

You are using Opennemas CMS
TRY IT NOW