De todos es sabido que una imagen vale más que mil palabras y que una página web gana mucho teniendo fotos que la acompañen, pero eso sí, todo esto es cierto si dichas imágenes están bien optimizadas. Merodeando por Internet, nos encontramos multitud de sitios web que tienen sus imágenes sin optimizar. Esto es que pesan demasiado, que son más grandes de la cuenta, que el formato no es el apropiado. Todos estos problemas causan que la web cargue más lenta y, como ya te conté en este post, eso afecta al posicionamiento, lo cual es un problema gordo. Cualquier persona que se dedique al diseño web en Córdoba o en cualquier otra parte del mundo debe controlar este aspecto. En este post te voy a enseñar a optimizar las imágenes de tu web, reducir el tamaño y el peso de las fotos y cómo cambiar el tamaño de una imagen para que tenga exactamente las dimensiones con las que posteriormente se mostrará en tu sitio. Con este tutorial, empezarás a enamorar a Google, al menos en lo que a optimización de imágenes se refiere. Vamos a ello 😉
¿Por qué debes comprimir las imágenes de tu página?
Google tiene en cuenta cientos de factores a la hora de posicionar los sitios en sus páginas de resultados. Entre esos factores hay uno que es fundamental: el tiempo de carga. Cuanto más rápido cargue tu web, mejor. Dicho esto, es obvio que cuanto menos optimizadas estén tus fotos, pesarán más y por tanto tardarán más en cargar, haciendo que se resienta el posicionamiento. Por suerte, es muy fácil cambiar el tamaño de una imagen y, como consecuencia, reducir el peso de tus fotos y de tu sitio completo.
El tamaño de las imágenes en las páginas web: los píxeles
Qué son los píxeles
Los píxeles son la unidad mínima de una imagen digital. Cada imagen digital es un rectángulo que se compone de una determinada cantidad de píxeles, cada uno de un sólo color. A mayor número de píxeles, la imagen será más grande. A la inversa, cuantos menos píxeles, más pequeña será la imagen.
Cómo saber los píxeles idóneos para una web
Muy bien, ahora que controlas lo que es un pixel, te estarás preguntando cuántos píxeles tienes que ponerle a tus imágenes para que queden bien en tu página. Es fácil de averiguar. Puedes valerte de una extensión de Google Chrome para ello. Se llama Page Ruler y te permitirá dibujar un rectángulo en tu página y ver sus medidas. También te sirve para medir espacios o imágenes que ya estén insertadas en la web. En la siguiente imagen estoy midiendo una de las fotos que adornan nuestro post sobre bancos de imágenes gratis.
Como ves, la imagen ocupa 800 píxeles de ancho por 447 píxeles de alto. El resto de medidas indican la ubicación de la imagen respecto a la página, siendo la esquina superior izquierda el píxel 0,0.
¿Qué es el pixelado?
Te lo muestro con un par de ejemplos. La siguiente imagen tiene 300×300 píxeles:
Y la siguiente tiene 500×500 píxeles:
Como ves, se ven bien de calidad, pero ahora hagamos una prueba. Voy a coger la imagen de 300×300 píxeles y la voy a forzar para ampliarla a 500×500 píxeles:
Como ves, pierde calidad, se produce lo que se conoce como pixelado. Por tanto, lo ideal es partir de una imagen que tenga, como mínimo, el tamaño que quieres usar. Si es mayor tampoco pasa nada, porque siempre podremos modificar el tamaño de la imagen sin pérdida de calidad. Y ese será el primer paso en nuestra optimización de imágenes.
Por último: comprobar el tamaño real de las fotos
Con Page Ruler podrás conocer el tamaño al que se muestran las imágenes en un sitio web, pero eso no quiere decir que la imagen tenga realmente ese tamaño. A veces las imágenes se muestran más pequeñas de lo que son, reduciéndose mediante HTML o CSS. Esto provoca el problema que te contaba al principio, las imágenes pesan más de lo que deberían. Para ver el tamaño que tiene una imagen realmente te voy a contar otra extensión que te va a resultar muy útil no sólo para esto, sino para mil cosas más. Una auténtica navaja suiza llamada Web Developer. Haz clic aquí para instalarla. Una vez que la tengas, debes seguir los siguientes pasos:
- Haz clic en la rueda dentada que ha aparecido junto a tu barra de direcciones, luego en la pestaña Images y luego en Display Imagen Dimensions. Aparecerá encima de cada imagen un cartelito con sus dimensiones.
- Sitúa el cursor encima de la imagen cuyo tamaño quieras comprobar y haz clic con el botón derecho.
- Haz clic sobre Abrir imagen en una pestaña nueva.
- Repite el paso 1 en dicha pestaña nueva.
Si los tamaños coinciden, enhorabuena, tienes esa imagen al tamaño correcto. Si no, tienes un problema que debes solucionar, pero no te preocupes, para eso está este post 🙂
Ok, ya tienes toda la información que necesitas saber para empezar con el trabajo, así que vamos a optimizar imágenes como si no hubiera mañana.
Cómo cambiar el tamaño de una imagen
Lo primero que debes hacer es comprobar si las imágenes de tu web tienen el tamaño correcto o no. Es vital que todas ellas tengan las dimensiones correctas. Como te he dicho antes, con las que estén bien no tendrás que hacer nada (en este paso), pero tendrás que cambiar el tamaño de las fotos que sean mayores que el tamaño con el que se muestran. Esto lo harás con ILoveIMG, una web que permite reducir el tamaño de una imagen online gratis.
Redimensionar imágenes con ILoveIMG es facilísimo. Sólo tienes que hacer clic en el botón azul “Seleccionar imágenes” y elegir las que quieres redimensionar. Puedes realizar el cambio por lote si es que todas tendrán el mismo ancho o alto. Introduciendo una de las dos medidas, te adaptará la otra proporcionalmente a cada imagen que hayas subido. Por ejemplo, si quiero que todas las imágenes de las entradas de mi blog tengan 500 píxeles de ancho, puedo subirlas todas y seleccionar ese ancho. Automáticamente se cambiará el tamaño a 500 píxeles de ancho y al alto que corresponda según la proporción que tenga la imagen. Si no queremos que se respete la proporción, podemos desmarcar la casilla “Mantener relación de aspecto”. También puedes prevenir que no se aumenten las imágenes que sean más pequeñas que la medida que has introducido para que no pierdan calidad. Esto lo puedes hacer marcando la casilla “No agrandar si el original es más pequeño”.
Otra opción es reducir las fotos de tamaño por porcentaje. En este caso te da tres opciones: 25% más pequeño, 50% más pequeño y 75% más pequeño. Como ves, en este caso no tienes opción de ampliar la imagen, sólo puedes bajar el tamaño.
Cuando hayas terminado de cambiar el tamaño de las fotos, puedes pasar al siguiente paso en tu optimización de imágenes: comprimirlas.
Cómo comprimir imágenes online
Para comprimir fotos online te voy a recomendar dos páginas que te permiten ambas bajar la calidad de una foto. Una es de nuevo ILoveIMG y la otra es TinyPNG. ¿Por qué te recomiendo dos? Muy sencillo, en las pruebas que he realizado, ILoveIMG ha dado un mayor rendimiento optimizando archivos PNG. Sin embargo, TinyPNG ha ganado en cuanto a bajar el peso de JPG se refiere. Por tanto, para comprimir imágenes PNG te recomiendo ILoveIMG y para comprimir imágenes JPG te recomiendo TinyPNG. En caso de que quieras optimizar una imagen de formato GIF, tendrás que hacerlo también con ILoveIMG, ya que TinyPNG no admite dicho formato.
Ambas plataformas son muy fáciles de usar. Lo único que tendrás que hacer será seleccionar la foto o fotos cuya resolución quieres bajar y el compresor de imágenes hará el resto. Comprobarás además que en ambos casos se reduce mucho el tamaño de las fotos sin perder calidad. En ese aspecto ambos hacen un gran trabajo.
Cómo recortar fotos online
Aunque no es algo inherente a la optimización, sí que quiero decirte que en ILoveIMG también tienes la posibilidad de recortar tus fotos online. El proceso es tan sencillo como cualquiera de los que ya te he explicado anteriormente.
Simplemente haz clic en el botón Seleccionar imágenes y podrás subir tus fotos y recortarlas de manera intuitiva. Aparecerá un rectángulo azul con manipuladores en esquinas y medios y podrás elegir el recorte que más te guste.
Mientras recortas, tendrás a la derecha un panel con las medidas que tendrá la imagen resultante. Esto te sirve de guía si quieres que el tamaño final tenga un tamaño concreto en píxeles. Incluso puedes situar y redimensionar el rectángulo a mano y posteriormente introducir la medida exacta que debe tener. El rectángulo se adaptará a dicha medida automáticamente.
Cómo comprimir imágenes mediante plugin (WordPress)
Si usas WordPress para tu página o blog y ya tienes muchas imágenes subidas, quizás te resulte algo tediosa la labor de ir una por una revisando tamaño, redimensionando, comprimiendo y volviendo a subir la misma foto optimizada. Para esos casos puedes usar un plugin optimizador que se ocupará de comprimir y cambiar el tamaño de tus fotos de modo automático.
Te recomiendo WP Smush. Sólo tienes que instalarlo y comenzar a optimizar tus imágenes. Si usas la versión gratuita tendrás que hacerlo “a mano”. Tienes que ir al panel del plugin y optimizar por lotes de 50 en 50 hasta que hayas optimizado todas las que ya tienes subidas. Después puedes marcar la opción para optimizar automáticamente las imágenes que subas, por lo que no tendrás que volver a preocuparte de ello.
No obstante, conseguirás mejores resultados si reduces el peso de las fotos antes de subirlas usando los medios que te he explicado en los pasos anteriores. WP Smush para optimizar las imágenes en WordPress está bien si tienes ya mucho subido y como opción por si en algún momento te despistas y subes alguna foto sin comprimir, pero la buena práctica es subir las fotos ya optimizadas.
Como ves, optimizar tus imágenes online para web no es algo complicado y reservado a personas especializadas, es algo que tú mismo puedes hacer fácilmente. Sólo necesitas saber cómo hacerlo, paciencia y constancia para realizar el proceso con todas las fotos antes de subirlas a tu página. Espero que te haya gustado este post y que te haya resultado útil. Si es así, puntúalo con 5 estrellas, compártelo para que llegue a más gente y déjame un comentario, me encantará saber que te ha servido 🙂
POSTS RELACIONADOS:
