Cómo cambiar el tamaño de una imagen para la web

Esta publicación explica cómo cambiar el tamaño de una imagen para la web. Primero en píxeles para que la imagen encaje correctamente en la página web. Luego, en kilobytes para reducir el tamaño del archivo sin degradar demasiado la imagen.

¿Por qué cambiamos el tamaño de las imágenes para la web?

Queremos que las imágenes se vean bien en la pantalla y que se descarguen rápidamente para los visitantes del sitio web.

Los sitios web con imágenes de carga rápida se clasificarán más alto en los motores de búsqueda.

Porque los motores de búsqueda prefieren enviar a los usuarios a sitios web que brindan una buena experiencia.

Hay dos pasos hacia una imagen de carga rápida:

• El primer paso es cambiar el tamaño de la imagen en píxeles , y debería ser lo primero.
  Ese es el ancho y el alto. Debe tener el tamaño adecuado para su lugar en el sitio web.
  Hay algunas rarezas en el tamaño de las imágenes desde la introducción de los sitios web receptivos.
  Una imagen debe tener el tamaño adecuado para un móvil, una tableta, una computadora de escritorio y un televisor, de lo que hablaremos más adelante.
• El segundo paso es reducir el tamaño de la imagen en kilobytes , lo que se conoce como compresión.
  La compresión reduce o combina los colores dentro de una imagen, por lo que reduce el tamaño en kilobytes. Es posible hacer esto sin perder demasiada calidad.

Llevar a cabo estas dos tareas, cambiar el tamaño y comprimir, se conoce como optimizar una imagen para la web.

Le mostraré las mejores prácticas para cambiar el tamaño de una imagen y cómo hacerlo.

Las complicaciones de las imágenes receptivas

Comencemos por mirar imágenes receptivas, aquellas que cambian de tamaño para verse bien en diferentes tamaños de pantalla.

Primero diseñamos para dispositivos móviles, por lo que comenzaré haciendo referencia a la versión móvil de un sitio web.

En los sitios web para móviles, la imagen suele ocupar todo el ancho de la pantalla. Las imágenes se apilan sobre el texto y los usuarios están muy acostumbrados a desplazarse rápidamente por páginas web largas y compatibles con dispositivos móviles.

Para un dispositivo móvil, un ancho muy bueno para una imagen es de 640 píxeles. La altura puede ser la que desee.

Pero el tamaño de la imagen no termina ahí. Una talla no sirve para todos.

Imágenes en diferentes dispositivos

Pensemos en esa misma imagen en un monitor extra grande o en una pantalla de TV; sí, ahora se puede acceder a los sitios web a través de su televisor inteligente.

La imagen puede ubicarse en una columna a la izquierda del texto.

Podría abarcar el ancho de la pantalla como lo hizo en la versión móvil. Llamamos a estas imágenes heroicas.

¿Imagina lo grande que debe ser esa imagen ahora?

Para un televisor, una imagen de píxeles perfectos tendría 1920 píxeles de ancho, o más.

Si ya ha reducido el tamaño de la imagen en 640 píxeles para un dispositivo móvil, se verá terrible si intenta ampliarla a 1920 píxeles. Lo estarías estirando más del 400%.

La ampliación de las imágenes no se ve bien: los píxeles se estiran y la imagen aparece borrosa.

Decidirse por mantener las imágenes a 1920 píxeles tampoco resuelve el problema. Estos se descargan muy lentamente, especialmente en conexiones lentas a Internet.

Para aumentar las complicaciones: una imagen debe tener el tamaño de píxel exacto para usar en la página. A los motores de búsqueda les gusta tener una buena idea de la anchura y la altura, conocidas como dimensiones.

Como puede ver, no hay un tamaño estándar y todo se vuelve bastante complicado. Todo lo que podemos hacer es nuestro mejor esfuerzo.

Complementos de WordPress para imágenes adaptables

Hay algunos complementos de WordPress que ayudan a proporcionar el tamaño de imagen correcto al dispositivo, llamados imágenes adaptativas.

Básicamente, primero se descarga una imagen pequeña, ya sea en tamaño o resolución.

Si la resolución de la pantalla es grande, el complemento proporciona la versión más grande. Esto acelera el tiempo de espera del visitante.

Esta es la solución si desea utilizar grandes imágenes heroicas pero le preocupa el tiempo de descarga.

Aquí hay dos complementos de imágenes adaptables que me gustan:

• Imágenes adaptables para WordPress por Nevma
  Simplemente envía versiones más pequeñas de las imágenes a dispositivos móviles, por lo que es un complemento muy básico que hace el trabajo una vez que se han guardado las configuraciones después de la activación.
• Imagen adaptable de Shortpixel por ShortPixel
  Este complemento es inteligente. Comenzará a recortar y comprimir imágenes para diferentes pantallas tan pronto como se active. Aunque puede tener un mayor control si es necesario. La documentación de ShortPixel también es completa. Incluso puede comparar una imagen antes y después de la compresión con su prueba de compresión de imagen.
  

Entonces, lo que haría es usar estos complementos adaptables, pero no confíe completamente en ellos y descargue fotos en su sitio de WordPress directamente desde una cámara. Mantenga limpia su biblioteca multimedia.

Primero cambie el tamaño de la imagen y comprima mínimamente para reducir la KB. Una vez que lo cargue en WordPress, el complemento de imagen adaptable hará el resto.

Comencemos a cambiar el tamaño de una imagen para la web.

Cambiar el tamaño de una imagen para la web, en píxeles

Con todo lo que hemos discutido en mente, elija el ancho de su imagen.

• Un fotógrafo necesitaría imágenes de excelente calidad. Para mostrarlos a todo el ancho de pantalla en un monitor extra grande, necesitarán una imagen bastante grande. Tamaño de las fotos a al menos 1920 píxeles.
• A cualquier otra persona, le aconsejo que opte por 1200 píxeles. Este es un buen equilibrio. Las personas en monitores extra grandes verán una pixelación en las imágenes de ancho completo, pero es una compensación por una imagen de carga rápida.

Para mi propio sitio web y blog utilizo imágenes con un máximo de 1200 píxeles de ancho, la mayoría de las que están en las páginas son 800. He aquí por qué:

• Las imágenes de ancho completo nunca se utilizan en mi sitio web. Me gusta que todo sea muy rápido.
• Mi negocio no es particularmente visual, la gente no necesita ver mis fotos con una resolución tan alta.
• Utilizo imágenes separadas de tamaño exacto para Open Graph y eso no requiere nada más grande que 1200.
• Según Google Analytics, sé que las personas que visitan mi sitio utilizan un dispositivo de mano o una computadora portátil. Información útil.

Lo dejo a tu criterio.

Software de edición de imágenes gratuito

Hay muchas herramientas gratuitas disponibles en línea, así como programas de edición de imágenes que se pueden descargar.

Para las fotos, use el formato de archivo JPEG, y eso es lo que cubriremos aquí.

Para los vectores, elija PNG o SVG, y eso es para un tutorial futuro.

Software de edición de imágenes GIMP

'GIMP' (el programa de manipulación de imágenes GNU) es un editor de imágenes que es completamente gratuito.

Descargue la versión estable actual de GIMP del sitio web.

GIMP proporciona un tutorial sobre cómo cambiar el tamaño (dimensiones) de una imagen (escala).

Editores de imágenes online

Una búsqueda rápida de 'imagen de cambio de tamaño en línea' en Google le dará una gran cantidad de opciones que le permitirán cargar, cambiar el tamaño, comprimir y descargar su Jpeg.

El primer resultado que encontré fue resizeimage.net. Muy simple de usar: recorta, cambia el tamaño y comprime una imagen.

Si desea recortar la imagen, use la opción número 2, pero la pasé por alto y fui directamente a la opción número 4, donde puedo cambiar su tamaño por píxeles.

Ponga 1200 en el campo de ancho, Nan en altura y marque la casilla para Mantener relación de aspecto.

El formato de la imagen de salida será JPG.

Elija una opción de compresión.

La compresión progresiva mostrará una versión pixelada del JPEG tan pronto como el visitante esté en la página. El resto de la información se descargará progresivamente para construir la imagen final. Me gusta bastante esta opción porque el visitante sabe esperar.

Reduzca la calidad de la imagen en aproximadamente un 75%, nuevamente dependiendo de cuán despiadado le gustaría ser.

Cambiar el tamaño de una imagen en KB: compresión

Comprimir es muy diferente a cambiar el tamaño. Todas las imágenes deben comprimirse antes de cargarlas, incluso si está utilizando un complemento de imagen adaptable.

La compresión reduce el tamaño del archivo de la imagen al reducir los píxeles, por lo que se descarga más rápido.

Durante la etapa de compresión, intente no comprometer demasiado la calidad de la imagen.

Intente lograr un equilibrio entre que la imagen se vea bien y se descargue rápidamente.

Las imágenes también se pueden comprimir con el software GIMP.

Tutorial de GIMP sobre cómo cambiar el tamaño (FileSize) de un Jpeg.