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!
no-repeat;center top;;
auto
big
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.
line
icon-right-dir
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.
no-repeat;center top;;
auto
big
icon-right-dir
Paso 1: Prueba tu web
Google Page Speed Insights
https://developers.google.com/speed/pagespeed/insights/
Usando tu editor de imágenes favorito
line
icon-right-dir
Índice de contenidos
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 400×400 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 660×300 px, pero en el editor de imágenes creé una de 1024×485. 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 6000×4000 pixeles y pesaba 6,4 MB!, con la redimensión y exportándola para Web, me quedó en 548Kb.
no-repeat;center top;;
auto
big
icon-right-dir
Paso 2: Mide las dimensiones que necesitas
Page Ruler para Chrome
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=es-419
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.
no-repeat;center top;;
auto
big
icon-right-dir
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.
line
icon-right-dir
Utili
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%.
no-repeat;center top;;
auto
big
