Cómo optimizar tus imágenes al máximo 2018 y mejorar la velocidad de carga de tu web

webxcite-tecnica-de-los-5-porques
Tecnica de los 5 porques: identifica la raíz del problema
abril 21, 2018
optimizar imágenes en WordPress
 

Muchas veces el tiempo de carga de tu página web, puede verse demorada, y por lo general lo que la hace más lenta, es debido al tamaño y peso de las imágenes.

Optimizar imágenes ayuda en cierta medida a que tu página web cargue más rápido.

Encuentra aquí herramientas y tips que te pueden ayudar a bajarle el peso a tus imágenes y optimizarlas para tu página web.

Para esta tarea usaremos:
  • herramientas de optimización
  • plugins para WodPress
  • y hasta la compresión de imágenes que nos arroja Google Page Speed Insights
Me encantaría que al finalizar me comentaras que resultados de optimización lograste al seguir estos pasos. Bueno sin más, vamos a ello!
 

Antes de Comenzar, hazle un test a tu website

Evalúa cómo se encuentra en salud tu página web. Para ello existen varias herramientas.
Por lo general yo uso varios test de velocidad web, ya que cada uno me arroja información más detallada del cómo se encuentra en salud mi página web.

Voy a dejar pendiente hacer un artículo para compartirte las herramientas que uso, pero para el caso de este artículo, con Google Page Speed Insights es suficiente.
 

Usando tu editor de imágenes favorito

Redimensiona las imágenes

 Ya sea que uses editores de imágenes tales como: Photoshop, Fireworks, Illustrator, Corel Draw..., debes planear qué dimensiones va a tener tu imagen dentro de la sección que deseas ubicarla dentro de tu página web.

Esto es muy importante ya que no es lógico subir una imagen de 3000x 3000 pixeles, cuando realmente necesitas una de 400x400 pixeles. La gran diferencia de pesos sólo ajustando la medida que necesitas, es impresionante!

Debido a que yo uso Chrome, utilizo Page Ruler para identificar que dimensiones debe tener mi imagen dentro del sitiio web. Page Ruler es una extensión que se instala en tu explorador de internet.

Sin embargo, si usas firefox puedes buscar en Google "page ruler firefox" y encontrarás distintos complementos que te pueden servir.

Cuando uso Page Ruler, mido las dimensiones que necesito y doblo las dimensiones para que la imagen no se me pixele mucho y también pensando en cómo se vería en pantallas grandes.

Por ejemplo, las dimensiones que veo usando Page Ruler para los artículos de nuestro blog es de 660x300 px, pero en el editor de imágenes creé una de 1024x485. Realmente no me preocupo por la exactitud, ya que la maravilla que hace WordPress es adaptar la imagen al espacio asignado.

Sin embargo la imagen original era de 6000x4000 pixeles y pesaba 6,4 MB!, con la redimensión y exportándola para Web, me quedó en 548Kb.

Guardando la imagen para web

Según tu editor de imágenes puedes encontrar una opción que dice "Guardar para Web" que optimiza de entrada la forma como guarda la imagen sin bajarle calidad.

De los editores que conozco, encuentras estas opciones en los siguientes menús:
  • Photoshop: Archivo > Exportar > Guardar para Web
  • Fireworks: Archivo > Export Wizard > (3 clicks en los botones de continuar) > Guardar
  • Encuentra opciones similares en tu editor de imágenes.

Paso 3: Busca "Guardar Para Web" en tu editor de imágenes favorito

Photoshop / Firefox / Illustrator / Corel Draw...
 

Utilizando herramientas online para optimizar imágenes

Usa herramientas para comprimir imágenes: puedes encontrar en Google muchas herramientas para optimizar imágenes.

Tinypng.com

Usando tinypng sólo debes subir o arrastrar la imagen a la página y este automáticamente la optimizará sin bajarle la calidad

Optimizilla.com

La diferencia entre optimizilla a tinypng, es que aquí tu puedes asignarle el porcentaje de compresión que va a tener la imagen, lo que puede hacer que reduzca mucho más el peso, pero también puedes llegar a pixelar la imagen si lo bajas a un porcentaje de reducción menor del 50%. La medida óptimima está entre el 90% al 50%.
ViviLo
ViviLo
Ingeniera de Sistemas, graduada de la Universidad de Cundinamarca en el 2008. Me apasiona el diseño y desarrollo de páginas web, por esta razón quiero compartir mi experiencia en este mundo web y gracias a WordPress potencializó mis habilidades.

Deja un comentario

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