Cómo comprimir, recortar y reducir fotos online

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. 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 redimensionar 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 optimizar 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.

POSTS RELACIONADOS:

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.

Cambiar tama√Īo de imagen
Page Ruler en acción

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:

Reducir tama√Īo fotos
Foto de 300×300 p√≠xeles

Y la siguiente tiene 500×500 p√≠xeles:

Reducir tama√Īo im√°genes
Foto de 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:

Reducir tama√Īo fotos
Foto de 300×300 p√≠xeles forzada 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:

  1. 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.
    Comprimir imagenes
  2. Sit√ļa el cursor encima de la imagen cuyo tama√Īo quieras comprobar y haz clic con el bot√≥n derecho.
  3. Haz clic sobre Abrir imagen en una pesta√Īa nueva.
  4. 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 ūüôā

Reducir fotos de tama√Īo
La foto en la web y la foto en pesta√Īa nueva. Los tama√Īos coinciden.

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
IloveIMG listo para la acción.

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‚ÄĚ.

Reducir tama√Īo JPG
Opciones de redimensión

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.

Bajar tama√Īo fotos
Redimensión por porcentaje

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 recomiento 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.

Comprimir imagenes
Este panda se come los kilobytes que da gusto ūüėÄ

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.

Cambiar tama√Īo fotos
Recortar imagen junto al resto de opciones de ILoveIMG

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.

Recortar fotos online
Recortando una foto con ILoveIMG

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.

Reducir fotos de tama√Īo
Opciones de recorte de ILoveIMG

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.

Comprimir fotos WordPress plugin
Nuestra amiga de WPSmush esperando que le lancemos fotos

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.

Cambiar tamano de imagen online
Marcando estas opciones se optimizar√°n las im√°genes autom√°ticamente al subirlas.

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.

Comprimir imagenes y fotos online
Las imágenes de este post antes y después de optimizar

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 ūüôā

Por favor, punt√ļa este post.
[Total: 4 Media: 4.5]

4 comentarios en “C√≥mo comprimir, recortar y reducir fotos online”

  1. Me ha encantado tu post! Gran contenido y muy bien explicado, muchas veces olvidamos que estos detalles ayudan a que nuestra web o blog sea más amigable y más cómoda para el usuario. Gracias!

    • Y lo importante que es para nuestras webs que todo est√© bien optimizado, para tener a Google contento ūüėČ Muchas gracias por leer y comentar, Luz ūüôā

  2. ¬°Hola Elena!

    La herramienta Page Ruler es fant√°stica y me viene como anillo al dedo. F√≠jate que yo andaba haciendo c√°lculos mentales por comparativa. Ya lo s√©, ya. Un desastre. No me rega√Īes, por favor…

    Sin embargo, cuando se sabe lo que se debe hacer es sencillo de realizar y con este post, Elena, consigues que hasta los menos tecnológicos sepan como optimizar las imágenes de su web de forma fácil y con una ruta muy bien marcada.

    ¬°Felicidades!
    Un abrazo,
    Verónica Fabra

    • Jajaja, re√Īir nunca. Mejor dar estos trucos para que las cosas os sean m√°s f√°ciles ūüôā Me alegra que te haya gustado tanto el post. Muchas gracias por tus palabras, Ver√≥nica.

Deja un comentario

Los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Elena Maíllo Caballero como responsable del Sitio Web, siendo la Finalidad: gestionar los comentarios; la Legitimación: se produce gracias a tu consentimiento explícito. Destinatarios: Tus datos serán guardados en Webempresa; Derechos: Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos escribiéndome un correo a hola@plan-ab.es. Para más información, te recomiendo que leas mi Política de Privacidad.