Saltear al contenido principal

Optimizar imágenes para que tu Página Web vuele

Optimizar Imágenes Para Que Tu Página Web Vuele

En el mundo 2.0 la velocidad de carga se esta consagrando como uno de los pilares fundamentales en el Diseño Web. Los buscadores están cada vez mas dando prioridad a una carga de web mas rápida frente a un diseño mas pesado. Y es una realidad, el usuario lo que quiere es que cuando entre en tu web tenga al momento la información que esta buscando… y sino se ira a otro resultado que le garantice en un corto plazo de tiempo lo que busca. ¡Optimizar imágenes es la clave!

 

Cómo optimizar imágenes para tu Página Web

1 – Nunca subir tus fotos originales a tu web.

Parecerá una tonteria, pero navegando por internet te encuentras infinidad de sites que usan imagenes directas de la cámara. Eso es un craso error ya que normalmente estas fotografías vienen con un tamaño extremadamente grande y pesado, hecho que hace que tu web acabe pesando el doble. Y eso si hablamos solo de una imagen… si por lo que sea, el usuario ha creado una galeria, multiplica ese peso por el volumen de imágenes subidas y… ¡tachan! Todos tus datos moviles gastados en una web por descargarte todas sus imágenes.

 

2 – El formato siempre ha de ser RGB y no CMYK.

Los colores RGB son los colores que funcionan en pantallas, los CMYK son los que sirven para impresión. Y dirás, oh esto a mi no me pasara… pero acaba pasando. Muchas veces editamos fotos y no nos damos cuenta en el formato que las guardamos, y una vez subidas a la web, vemos que se ven mal, pero en tu pantalla de ordenador en tu editor se ven geniales, y no entendemos que esta pasando…. ¡Revisa el formato! Muchas veces ahi reside el problema.

Optimizar Imágenes para Web | Carlos Villarin · Freelance Web

 

3 – El tamaño de las imágenes, si es importante.

Pues por norma general, nos gusta que nuestras fotos se vean bien y contra mas grandes sean mejor, pero hay limites que ayudan a que nuestras imágenes no pesen demasiado y no sean difíciles de cargar. Muchas veces, editamos la imagen, controlamos el RGB, pero no nos percatamos de que nuestra imagen esta a 300ppp y a 5000px de anchura, es decir, ¡tamaño poster!

Hay que tener cuidado con esto, ya que no tendrás problema en subir estas imágenes a tu web en ese formato, pero una vez el usuario intente entrar en la web, la carga sera muchísimo mas lenta.

Lo importante aqui es que siempre tengas en cuenta 2 cosas: que tu imagen este a 72ppp (pixeles por pulgada) y que no supere los 2000px de anchura como máximo. Con estas dos bases, tus imágenes se reducirán considerablemente en cuanto a tamaño de carga, optimizar imágenes es clave.

 

4 – Guardar en formato para Web o Dispositivos.

Aquí uno de los temas importantes: muchas veces guardamos la imagen en un simple Guardar Como (Control+S o Comando+S), pero para una buena optimización seria ideal que la imagen fuera guardada con una opción que aparece mas abajo (estoy hablando en Photoshop, por norma general, todos lo usamos o el 90% de la población), que se llama: Guardar para Web… o Guardar para web y Dispositivos, depende de la versión del Photoshop.

Esta opción reducirá considerablemente el peso de tu imagen y se optimizara mucho mejor para tu pagina web. Esto evitara que cargue peso innecesario y se optimize para una rápida visualización web. Optimizar imágenes con este recurso es algo fundamental en tu día a día si tienes un blog o web.

 

5 – El Formato también importa: JPG o  JPEG y PNG.

El ultimo punto importante a tener en cuenta, es en que formato guardamos nuestra imagen para web. Por norma general es siempre necesario que nuestras imágenes estén en JPG o JPEG. Es el formato por excelencia de imagen y el que menos problemas nos dara a la hora de subir imágenes.

Esta claro que aveces vamos mas allá, y queremos hacer imágenes con transparencias, con fondos semitransparentes… entonces el formato ideal sera PNG, pero has de tener en cuenta que este formato, aumentara exponencialmente su tamaño ya que tiene unas características mas complejas (estas guardando algo editado sin fondo) que un simple JPG.


Una vez tienes todo controlado… siempre te quedara revisarlo con las Herramientas que Google te ofrece gratuitas como: PageSpeed Insights.

Esta entrada tiene 0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Carlos Villarin

Carlos Villarin

Carlos Villarin | Diseñador Gráfico & Diseñador Web Freelance y Consultor SEO. Experto en Wordpress. Webs optimizadas para SEO. Amante del perfeccionismo. Perseverante y soñador. Los sueños, se hacen realidad.

EXPERTO EN

ANALIZANDO DATOS CON

Experto en Wordpress | Carlos Villarin · Diseñador Web Freelance
Experto en WooCommerce | Carlos Villarin · Creador de Tiendas Online
Experto en Google Analytics | Carlos Villarin · Analizador de datos
Experto en Google Adwords | Carlos Villarin · Analizador de datos
Experto en SemRush | Carlos Villarin · Analizador de datos
Experto en Wordpress | Carlos Villarin · Diseñador Web Freelance

EXPERTO EN

ANALIZANDO DATOS CON

Volver arriba