Cómo conocer el tamaño ideal de imágenes para web, es una pregunta muy frecuente a la hora de construir nuestra primera página web; normalmente contamos con ciertas imágenes o fotos que vienen en un tamaño predeterminado por el formato de la cámara que usamos y estás no siempre encajan perfectamente dentro de nuestro diseño.
El día de hoy quiero enseñarles en tres pasos cómo podrán tener imágenes con las dimensiones, peso y calidad óptimas para sus sitios web. Además, les entregaré un bono extra que potencializará sus fotos en Internet.
Debemos arrancar con dos conceptos que un principio nos puede parecer confusos y hasta lo mismo, mas conocer la diferencia es vital para tener imágenes perfectas; estos conceptos son tamaño y peso.
El tamaño es la dimensión de la imagen, es decir el largo por el ancho. En las imágenes la unidad de media son los pixeles y esto es lo debemos conocer para diseñar piezas visuales que cuadren perfecto.
El peso es el espacio que ocupa una foto dentro de una unidad de almacenamiento. La unidad de medida son los bytes y a mayor cantidad de bytes mayor es el peso que ocupará.
Resumiendo, el tamaño varía de acuerdo a nuestros requerimientos, pero el peso debemos mantenerlo lo más bajo posible para que tengamos imágenes de carga rápida.
En internet lo idea es tener imágenes con pesos menores a 100 KB, puede que te parezca bajo, pero al final te darás cuenta que para internet se obtiene alta calidad y rapidez con esta cifra como referencia.
Primer paso: ¿Cómo sabemos el tamaño ideal de imágenes para web?
Si estás usando algún constructor este te dirá el tamaño recomendado de la imagen que debes poner en la mayoría de los casos, por lo que acá ya te ahorrarías un paso.
La otra opción es que no tengas ni una sola pista de dónde empezar, entonces debemos comenzar por saber que el ancho promedio de una página web es de 1400 pixeles y el área de trabajo (es decir la que llevará el contenido) es de 1000 pixeles; no obstante, no es ninguna regla, pero sirve de referencia.
Estoy seguro de que hay páginas web que nos gustan tanto que siempre las usamos como una guía de diseño, por eso también sugiero que uses la herramienta Inspeccionar de tu explorador para ver el tamaño de la imagen que nos gusta.
Es muy fácil, tan solo ingresamos a la página web que nos inspira, encima de la imagen que nos llama la atención damos clic derecho y buscamos la opción “Inspeccionar”, allí se nos abrirá una ventana donde nos mostrará el código de la página, nos pintará la imagen de azul y nos dirá el tamaño que tiene.
Segundo paso: Crear imágenes personalizadas con el tamaño correcto en pixeles.
Existen cientos de opciones para que lo hagas, hay alternativas para expertos y principiantes. Hoy te diré dos que son las que recomiendo para todos los que están empezando en el diseño web de forma empírica.
¿Recuerdas la aplicación Paint que viene instalada por defecto en el sistema operativo de Windows? ¡Así es! Esta vieja conocida nos permite crear lienzos con el tamaño que necesitemos y así sacar imágenes a medida. Tan solo abre la herramienta Paint, busca “Cambiar tamaño”, selecciona “Pixeles” e ingresa las medidas.
La siguiente herramienta que recomiendo al 100% es Canva, acá no solo podrás crear piezas con el tamaño personalizado, sino que además te permitirá diseñar imágenes de altísima calidad.
El siguiente vídeo te explica fácilmente cómo hacerlo:
Te aconsejo guardas las imágenes en formato PNG.
Tercer paso: Optimizar el peso para que carguen rápidamente en Internet.
Ya sabes cómo identificar el tamaño ideal de imágenes para web y crear fotos a medida. Seguramente las tienes descargadas y listas para subirlas a tu sitio, sin embargo, aún te falta un paso.
El peso con el que Paint y Canva descargan las imágenes no es el ideal para nuestra página web, por eso debemos comprimirlas para que sean rápidas y ligeras.
En internet encontramos muchas páginas que hacen esta tarea, puedes probar varias hasta encontrar la que te de mejores resultados; por mi parte me gusta usar https://compressnow.com/ porque me permite subir la imagen, seleccionar el nivel de comprensión y descargarla nuevamente.
Recomiendo que pruebes diferentes niveles de compresión hasta que encuentres ese punto de equilibrio entre calidad y ligereza.
Bono extra: Usa las fotos para mejorar el SEO de tu página.
Todo lo que subas a tu sitio suma o resta para alcanzar los objetivos, no basta con tener imágenes visualmente llamativas y livianas, también debes enfocarte en el nombre que colocas.
Cuando asignes un nombre a cada imagen debes incluir las palabras clave de tu producto o servicio, no usar signos de puntuación y separar palabra por palabra con un guion, por ejemplo:
“camisetas-blancas-para-mujer-colombia”
Ahora si tienes todo listo para crear imágenes con el tamaño y peso ideal. Manos a la obra.
Entradas recientes
¡Hola!
Soy Cristian Huertas, un joven colombiano con más de 5 años de experiencia en el ámbito del comercio electrónico, desarrollo de estrategias de ventas y marketing digital. También disfruto del mundo de las inversiones y los buenos hábitos financieros.
Espero que el contenido haya sido útil y de tu agrado. Si tienes preguntas al respecto, sugerencias o te puedo ayudar en algo, no dudes en escribirme a través de mis redes sociales o el formulario de contacto que se encuentra en la pestaña "Hablemos".
Hasta pronto 🙂
