06 Sep Razones para optimizar las imágenes de tu web y cómo conseguirlo fácilmente

¿Cuántas veces has entrado a una página web y te ha sorprendido por la calidad de sus fotografías?

Tu reacción ha sido: «Wow»

¿Y cuántas veces te has sentido defraudado al ver imágenes malas o que tardan en cargar?

Has dicho: «Adiós».

La diferencia entre que un visitante permanezca en tu dominio o que lo abandone, puede depender de las fotos que le presentas y cómo se las presentas. Por eso es fundamental optimizar las imágenes de tu website.

Verás en este artículo cómo puedes cambiar el tamaño y el peso de una imagen, sin perder calidad, y cuál es la resolución ideal y el formato que deben tener las fotografías en la web. 

Y, si te quedas hasta el final del post, descubrirás un regalo que he hecho para ti, que te vendrá muy bien.

 

¿Por qué hay que optimizar las imágenes de la web?

 

Ya tienes el dominio comprado, contratado el hosting y es el momento de empezar a diseñar. Para ello debes usar técnicas de copywriting y cuidar la parte visual.

Necesitas fotos para tu web y esta selección no puedes dejarla al azar. Es uno de los elementos más importantes de tu portal; tanto para los usuarios, como para los motores de búsqueda (Google).

Aunque hoy en día hay teléfonos móviles que hacen instantáneas increíbles, la imagen siempre será superior si usas medios creados para tal fin. Invertir un poco de dinero en una réflex o en un fotógrafo profesional puede darte muchas alegrías.

 

 

Me dirás: «Pero Eva, cuanto mejor sea una foto más ocupa». Cierto, pero vas a aprender a reducir el peso de una imagen sin perder su calidad. Te diré más adelante cómo.

¿Y por qué te interesa que no pese mucho la foto? Porque tarda más en cargar y esto, los internautas, lo penalizamos con el abandono.

Nadie va a esperar más de 5 segundos; debes ofrecer la mejor experiencia al usuario. Así que, no te queda más remedio que publicar fotos con el menor peso posible, sin descuidar su apariencia.

Si optimizas las imágenes de tu web, el tiempo de permanencia del visitante en tu página aumenta. Esto Google lo tiene en cuenta y lo premia ranqueando tu url hacia las primeras posiciones de las SERPs.

Por lo tanto, para convencer tanto al usuario como a Google, es importante la calidad y la velocidad. Tus fotos deben ser buenas y cargarse rápido.

 

 

Entonces, lo primero que debes hacer es escoger a conciencia las imágenes para tu web y después revisar ciertos valores. Has de tener en cuenta la resolución, el tamaño, el peso, el SEO, etc. Aunque parezcan muchos factores, en realidad verás conmigo que es sencillo.

 

Fotografía de calidad con poco peso. ¡Es posible!

 

Antes de repasar cada paso que debes dar, para optimizar las imágenes de tu web,  veamos un caso práctico. 

 

 

 

En este ejemplo, Nike transmite fielmente cómo es la zapatilla. Lo hacen siempre pensando en el comprador. Y ahí está la clave: ponerse en el lugar del cliente.

Quien quiere comprar un producto, lo que busca es una representación del mismo lo más real posible. Por eso la marca deportiva publica sus fotos con mucha precisión y detalle. Además se pueden visualizar sin tiempo de demora. ¡Genial! Es un ejemplo de una imagen buena y que no ralentiza la web. ¡Objetivo cumplido!

Ahora quiero que te hagas esta pregunta:

 

 

Al descargarme estas fotos para presentártelas en el artículo he comprobado que se han guardado a una resolución de 1920×1155 px y un peso de 1.048 MB. Eso quiere decir que se han preocupado por mantener la máxima calidad, para mostrar el producto a pantalla completa. Si tienes un ecommerce, puedes que necesites una gran capacidad de almacenamiento en tu hosting.

Para otras muchas webs estos parámetros no son tan necesarios. Así que podrás reducir el tamaño y el peso de las fotos y ganar en velocidad de carga. 

Para ello debes tener en cuenta estos factores:

 

 

Formato de fotografía para webs, ¿cuál elijo?

 

Para empezar a reducir el peso de tus fotografías deberás tener en cuenta los formatos de las mismas. Los ideales para la web son Jpg, Png y Gif. Estos pueden ser reproducidos en las pantallas con calidad y pesan menos que otros.

 

Formato JPG

El JPG reproduce millones de colores y es el que se suele usar para fotografía. No pesa mucho porque está basado en píxeles. No te servirá para estos casos: ni animación, ni transparencia.

La mayoría de las imágenes de las webs están subidas en este formato. Ofrece calidad (siempre y cuando la instantánea haya sido tomada con un medio fotográfico profesional) y poco espacio.

 

Formato GIF

El GIF es ideal para imágenes con colores planos y animaciones. Es muy habitual verlo en los blogs, para dar cierto dinamismo a los textos. Tienes una galería extensa en webs como:

Y aprovechando que estás en mi artículo voy a mostrar mi felicidad con este GIF:

 

Formato PNG

PNG es el adecuado para transparencias y es mejor que los anteriores en cuanto a calidad, pero pesa más.

Yo lo suelo usar para fotos a las que le he borrado el fondo o para fotos que me interesa que tengan mejor visualización como las de la landing page o el portfolio. 

 

Formato SVG

Al ser un formato vectorial se puede escalar sin perder calidad. Pesa poco y permite una definición alta en tamaños reducidos y aumentados.

Es ideal para iconos o gráficas porque se basa en vectores, pero no para fotografías.

Te animo a ver este vídeo de un profesional que sigo en Instagram. En 7 minutos verás los diferentes formatos habituales y sus particularidades. Comprobarás cómo cambiar de uno a otro hace que la foto pese menos.

 

 

El color de la imagen web: ¿RGB o CMYK?

 

Es importante elegir el modo de salida del color de las imágenes que se mostrarán en un monitor. Hay dos: RGB y CMYK . Y como no, este factor también influye en el peso.

 

Formato RGB

Es un sistema de color para ver en pantalla y reproduce millones de pigmentos. Esto es porque presenta más luminosidad cromática, al tener un espectro más amplio, pero en la mayoría de los casos esos colores no salen en el papel (por eso no se usa si vas a imprimir).

Este modelo tiene su base en los tres colores primarios rojo, verde y azul. Uniendo todos se consigue el blanco y combinándolos se puede representar cualquier tono.

 

Formato CMYK

CMYK está basado en la cuadricromía. Los colores a los que se refiere son cian, magenta, amarillo y negro. Este modelo trabaja de otra forma distinta al RGB, pero mezclando los cuatro tonos citados, podemos obtener también cualquier color del espectro visible.

Es el que se usa para imprimir, porque mantiene los colores más fieles a los que verás en la pantalla.

Cuando guardes tu fotografía debes elegir entre ambas opciones, aunque si exportas para sitio web te viene por defecto RGB. No obstante, desde Photoshop puedes cambiar de RGB a CMYK o viceversa desde esta ruta: Edición + Convertir en perfil.

 

 

Reduce las dimensiones de las fotos para tu página web: el tamaño importa

 

El tamaño importa, sí. No es lo mismo presentar una foto para la home, que para una parte pequeña de la web. La imagen deberá tener unas dimensiones u otras, según dónde vaya a ir situada.

Si tu foto ocupa toda la pantalla del ordenador y no tiene el tamaño adecuado puede verse con mala definición. Por el contrario, si vas a colocar una imagen en un espacio mediano de tu web, no tiene sentido que la subas muy grande, porque ocupará un espacio innecesario y te perjudicará para el SEO.

 

 

Las pantallas de alta resolución tienen 2048px. Así pues, las medidas recomendadas serían:

 

Como no sabemos cómo es el monitor desde el que nos verán los internautas, la medida de las imágenes webs con las que acertarás seguro son: 1920 px de ancho y 1080 px de alto, para toda la pantalla. 

 

¿Cómo saber si están optimizadas las imágenes de una web?

Si no sabes si las fotos de tu web están mal dimensionadas, puedes usar herramientas de análisis como GTMetrix.

Aquí puedes hacer un diagnóstico de tu url. Te indica si las imágenes de tu página web están optimizadas o no: esto es, si son grandes para el sitio donde las has colocado. Si lo son deberás cambiar su tamaño con algún editor de fotografías.

En el siguiente apartado te recomiendo algunos.

 

 

 

También puedes hacer uso de PageSpeed Insights. Es una herramienta de Google que te ayudará a conocer el estado de tu web en cuanto a la velocidad de carga.

Te dice, según colores, qué está bien y qué debes cambiar (verde bien, naranja regular y rojo mal ). Uno de los puntos que analiza son las fotos de forma que, si lo ves en rojo, es momento de optimizar la parte visual de tu web.

 

 

Cambiar el tamaño de una imagen online

El editor por excelencia es Photoshop. Es el que yo uso. Puedes configurar todos los parámetros que te estoy explicando en este artículo. La única pega que tiene es que es de pago y tiene que estar instalado en tu ordenador.

Si eres fan del programa Paint, también puedes usarlo para el mismo fin.

Para reducir el tamaño de las imágenes en línea gratis te recomiendo Fixlr o BeFunky. Son editores, no tan completos como Photoshop, pero para un trabajo sencillo te sirven.

Con ambas puedes cambiar las dimensiones de una imagen y son muy intuitivas y fáciles de manejar. Si las pruebas, me encantaría que me dejaras un comentario más abajo, para decirme cuál te ha gustado más.

 

 

 

Y no puedo dejar de lado el editor de fotos de WordPress, donde puedes escalar de forma personalizada.

 

 

Tamaño ideal de fotos para blogger

Cuando escribes en un blog amenizas el texto con fotos, ilustraciones, infografías, etc. Presentar sólo palabras es un error, porque los lectores huirán de tu artículo.

El tamaño de las imágenes en un blog es proporcional a las dimensiones del mismo. Normalmente no suelen ocupar toda la pantalla de un ordenador, porque dejamos espacio lateral a los elementos del widget.

De forma que, como te he dicho antes, no tiene sentido subir una foto de 1900 px, cuando se va a ver sólo en la mitad de la pantalla.

Mi recomendación es de unos 700px u 800 px; y, si vas a presentar un carrusel de fotos o alguna presentación, no te conviene que las fotos sean demasiado grandes, porque ralentizarán la animación.

Cuando insertas una fotografía para una web diseñada con WordPress te aparecen estas opciones por defecto:

 

 

En el tamaño puedes escoger la medida exacta, tal cual hayas subido la imagen, o elegir entre varias opciones que te da el CMS, para que aparezca más o menos grande, según el espacio donde irá publicada.

El problema de tener la opción de varias medidas es que, si subes una imagen a tu galería de medios, se guarda automáticamente en varios tamaños. Es decir, se crean 4 archivos de la misma imagen: con la medida original, la pequeña, la mediana y la grande.

Para evitar ocupar tanto espacio en el hosting te recomiendo que desde «Ajustes + Medios» dejes a cero los valores de los tamaños.

De esta forma sólo habrá un archivo, pero eso sí, cuando lo publiques será con las dimensiones de la foto original y no podrás elegir entre estas tres opciones mencionadas.

 

Resolución de las fotografías para pantallas

 

El medio de visualización de una fotografía te dirá la resolución que necesita.

No es lo mismo ver una imagen en una pantalla de ordenador o de un teléfono móvil, que verla impresa.

Y como no, este factor también afecta al peso de la imagen.

Para imágenes online se necesita una resolución de 72 ppp. Un valor inferior que si la vas a imprimir, porque el detalle ha de ser menor. Lógicamente así ocupa menos y te ayuda al SEO.

Recuerda: la imagen carga más rápido y no ralentiza el tiempo medio de carga de tu web. Y ya te he dicho antes que esto Google lo valora mucho.

 

 

Comprimir imágenes o fotos online

 

Llegados a este punto, te reitero que una cosa es el tamaño de la imagen y otra la resolución.

Ya has visto que configuras la foto según las medidas idóneas para el espacio donde irá publicada, con un modo de color en RGB, un formato de bajo peso y con una resolución de 72ppp.

Si das todos los pasos que te he ido indicando, tu foto ocupará menos espacio. Pero puedes ir más allá y comprimir o reducir más el peso de una imagen sin perder calidad.

 

 

Normalmente el truco está en reducir el número de colores de la imagen. Y lo podrás hacer con ayuda de algunos programas.

 

Plugins para reducir el peso de una foto en WordPress

Si tienes el hosting con Webempresa, te recomiendo un plugin gratuito para WordPress llamado Optmizador.io. Lo que consigues instalándolo es comprimir tus imágenes automáticamente y todas al mismo tiempo.

Si tienes el hosting con cualquier otra plataforma, en el siguiente vídeo verás dos plugins adicionales: reSmush.it y LazyLoad.

 

 

Si en tu blog o sitio web no tienes muchas ilustraciones, pero las pocas que tienes las quieres optimizar, en lugar de plugin te conviene comprimir las imágenes online con estas herramientas:

 

Tiny PNG

Te permite trabajar desde el ordenador, sin tener instalado ningún programa. Puedes subir hasta 20 fotos a la vez, con un peso total de 5 MB, en la versión gratuita. Si quieres subir un número mayor al mismo tiempo, o que ocupen más megas, tienes la opción de pago: 25€ anuales.

Yo la uso mucho y te puedo asegurar que da buenos resultados. Es rápida y ofrece menos peso con casi la misma calidad.

 

 

También la puedes complementar con Photoshop para comprimir las imágenes desde este programa. Te da la posibilidad desde la interfaz de Adobe de escalar, previsualizar y guardar los archivos ya comprimidos. Es muy cómodo.

Una vez que comprimes los archivos te indica el peso inicial, el resultante y el porcentaje de reducción del tamaño. Te la descargas en tu ordenador, y ya está lista para ser publicada en tu web o en las redes sociales.

 

 

Con esta aplicación también puedes analizar tu url. Te indica si las imágenes de tu web están optimizadas o no.

 

 

Optimizilla

Esta herramienta también te da la posibilidad de trabajar con hasta 20 imágenes a la vez. 

Lo bueno en este caso es que puedes elegir el porcentaje de calidad que quieres perder con la compresión, a través del manejo de una barra lateral. Puedes hacer zoom y ver la diferencia entre ambos ejemplos, antes de procesar el cambio. 

 

 

Image Optimizer 

Su ventaja es que sirve para comprimir el archivo de imagen y a la vez cambiar el tamaño y la calidad (te da varias opciones para elegir).

Trabaja de modo online o, si lo prefieres, lo puedes instalar en el ordenador.

La única pega es que no tiene el protocolo de seguridad https. Así que si quieres preservar tus datos, esta web no te asegura que lo vayan a hacer.

 

 

Revisa y previsualiza

 

Si quieres tener a mano todos los pasos y los factores que te ayudan a reducir el peso de tus imágenes, te vendrá muy bien un checklist.

Y tengo una buena noticia: ¡ya la tengo hecha para ti! Sí, sí. Todo lo que te he detallado en este post, pero de forma esquemática, para que no se te pase por alto ningún detalle, antes de publicar tu foto en tu web.

No te quedes sin ella, descárgatela aquí:

Una vez que hayas jugado con todos los elementos que te he explicado y hayas comprimido las fotografías, revisa cómo queda la imagen en tu página, antes de publicarla. La vista previa es fundamental en estos casos.

Si el resultado no es el esperado, quizás es que debas hacer una nueva fotografía con un medio más profesional.

La diferencia entre presentar una web con imágenes optimizadas y con calidad es increíble. No debes subestimar el factor visual porque es lo primero que ven los usuarios.

Y tan importantes son estos consejos, como tener una presentación personal y única. Los bancos de imágenes te pueden ayudar en muchos momentos puntuales (sobre todo en el blog o en las redes sociales).

Pero, si quieres mostrar una página web exclusiva, lo mejor es que tengas tus propias fotografías.

Tanto si tienes una tienda online como una página de servicios o de marca personal, puedes pedirme un presupuesto a través del formulario de contacto en el correo info@evaortiz.es.

Si te ha quedado alguna duda, estaré encantada de resolverla en los comentarios. O si puedes aportar alguna herramienta más o truco para optimizar las imágenes de la web, me vendría genial.