Cuál debe ser el tamaño de las fotos para web? ¿Qué tamaños de fotos debo utilizar? ¿Cómo puedo reducir el tamaño de fotos? ¿Cómo y por qué comprimir imágenes? Si te haces estas preguntas u otras similares sigue leyendo, en este post trato de resolver todas las dudas al respecto.
Abrir una página web no es como ver a través de una ventana. No vemos una representación ni un reflejo. En cambio, lo que ocurre es que nuestro navegador descarga las piezas y las instrucciones de un puzzle para presentarlo en nuestras pantallas.
Así pues, si los elementos que debe descargar no están optimizados y pesan demasiado la carga de la web en cuestión se ralentizará. Las estadísticas indican que el 47% de los internautas espera que una web cargue en menos de dos segundos y que el 40% se va si tarda más de tres.
Y así surge otro concepto importante que engloba otros, como reducir los tamaños de fotos y comprimir imágenes, algo fundamental en las particularidades de las webs de fotógrafos con WordPress.
Optimizar, comprimir imágenes y reducir el tamaño de fotos
El tamaño de las fotos, comprimir imágenes y su tratamiento son claves para optimizarlas y prepararlas para que la web cargue lo más rápido posible y funcione mejor.
Optimizar imágenes es un aspecto fundamental en el denominado SEO de imágenes, aspecto del que hablo en mi post SEO para fotógrafos.
Qué tamaños de fotos usar para web
El primer paso para optimizar imágenes es decidir su tamaño. En general, lo ideal es que las fotos que subas a tu web tengan las mismas dimensiones, en píxeles, que las que usa tu página para presentarlas. Me explicaré.
No tiene sentido subir una foto de 4000 por 2000 píxeles para usarla en la web a 500 por 250. Así que hay que optimizar las imágenes, reducir el tamaño de fotos para que tengan los píxeles a los que se va a utilizar.
Sin embargo, hay situaciones que pueden generar otras dudas. Es el caso de las imágenes que nuestra página no utiliza con unas dimensiones fijas. Es decir, ¿qué pasa con la típica foto de cabecera?, esa que va en grande arriba junto al menú y que se suele asignar al mismo tamaño que el ancho total de la pantalla del usuario.
Así que, teniendo en cuenta tres factores: las dimensiones de pantallas más utilizadas, el interés de Google por que se usen imágenes de calidad y alta resolución cuando sea necesario, y/o los casos de webs en las que las fotos tengan especial relevancia (webs de fotógrafos, arte, cine, vídeo…), los tamaños de fotos que recomiendo son las siguientes:
-Si la foto se va a ver, como máximo a 500 por 250 píxeles, se debe reducir el tamaño de foto a 500 por 250 píxeles.
-Si la imagen es para la cabecera de la web, la denominada hero section, entonces el archivo debe tener, como máximo, 2500 píxeles de ancho (esto cubre las pantallas de mayor resolución), que es el tamaño de foto máximo que debemos utilizar.
-Cuando, además de tamaños de fotos fijos en la web, incluyamos imágenes como parte de una galería o un lightbox. Es decir, que cuando se haga clic sobre ella se vea más grande que el tamaño inicial, entonces se puede reducir el tamaño de foto que se sube a la web a un máximo de 1920 píxeles de ancho si es horizontal. Si es vertical bastará con un ancho de 700 píxeles.
Ahora que ya sabemos que tamaños de fotos son los necesarios, vamos a hablar de cómo guardarlas y reducir el tamaño de fotos que hay que usar.
Pero antes, y teniendo en cuenta el primer supuesto, es decir, si la imagen en cuestión va a tener un tamaño máximo fijo y no se verá más grande si hacemos clic, entonces se plantea otra pregunta. ¿Cómo saber a que tamaño se muestra la foto en la web?
¿Cómo saber a que tamaño se muestra la foto en la web?
Si tu tema no te provee esa información de manera asequible en el panel de administración de WordPress, sigue leyendo.
En Google Crome
Hay que hacer clic con el botón derecho del ratón sobre la foto en cuestión y elegir la opción Inspeccionar. Ahora escogemos la herramienta para seleccionar el elemento de la página que queremos inspeccionar con Ctrl+Shift+C o haciendo clic en el icono:
A continuación ponemos el cursor del ratón sobre la imagen y en la esquina superior izquierda aparecerá un cuadro con información. Junto al nombre veremos las dimensiones de nuestra imagen, en este caso, 600 x 361,01.
Por tanto, hay que reducir el tamaño de foto a 600 píxeles de ancho como mucho.
En Mozilla Firefox
Firefox nos lo pone más fácil. Basta con hacer clic derecho sobre la imagen que nos interesa y aparece una ventana con diferentes datos. Debemos fijarnos en el apartado dimensiones, concretamente, en el tamaño escalado que se encuentra entre paréntesis.
Cómo reducir el tamaño de fotos y guardarlas
Hay muchas maneras de reducir el tamaño de fotos antes de subirlas a una web. Si eres fotógrafo, videógrafo o conoces ese mundo y sus herramientas, sin duda, ya sabrás cómo acometer la tarea.
De todas formas, vamos a ver que opciones hay.
Tenemos tres tipos de herramientas para reducir el tamaño de fotos que necesitamos en nuestra web: programas, servicios online y plugins para WordPress.
8 programas, aplicaciones online y plugins para reducir el tamaño de fotos
-Photoshop/Lightroom
-LibreOffice Draw
-ReducirFotos.com
-Compressor.io
-WordPress
-Smush.it
-ShortPixel
Por supuesto, además de estas hay muchas otras herramientas que podemos utilizar para reducir el tamaño de fotos o para comprimir imágenes antes de usarlas en nuestra web. He escogido estas como una pequeña muestra. Unas por su calidad otras por su facilidad de uso o por ser gratuitas.
A los que seáis fotógrafos o similar poco debo enseñaros sobre estas dos herramientas y su potencial, entre otras cosas, para comprimir imágenes. Son, claramente, la mejor opción y primer paso sólido para optimizar imágenes. Tras reducir el tamaño de fotos hay que pensar en cómo guardarla para la web.
Reducir el tamaño de foto jpg
Como normal general el formato por excelencia, de momento, sigue siendo JPG. Usaremos PNG para transparencias y GIF para animaciones.
Para reducir el tamaño de fotos en formato JPG o, mejor dicho, para el último paso del proceso la compresión, la convención es usar una compresión entre el 60 y 70%, pero puedes hacer tus propias pruebas y decidir que ratio te convence más para comprimir imágenes.
Por supuesto hay otras muchas aplicaciones para tratamiento de imagen que ofrecen capacidades similares a las de las dos anteriormente mencionadas. Sin embargo, si no eres fotógrafo o no estás habituado a usar estos programas, para reducir y comprimir imágenes LibreOffice Draw es la opción más sencilla y barata. Es gratis.
Hay que abrir la foto que necesitamos reducir y elegir la opción Guardar del menú contextual que aparece haciendo clic derecho sobre la foto. Esta herramienta permite modificar el tamaño en píxeles (y otras unidades) y, además, definir la compresión JPG.
Esta web ofrece varias herramientas gratuitas. La opción Redimensionar permite reducir el tamaño de fotos, bien con un deslizador o introduciendo el tamaño requerido en píxeles. También nos ofrece la posibilidad de ajustar el ratio de compresión antes de guardar la imagen de nuevo en nuestro ordenador.
También ofrece una opción Recortar con varias posibilidades entre las que se encuentra Libremente, que nos permite reencuadrar la imagen, por si queremos mejorarla antes de reducir y comprimir.
Esta aplicación web solo permite comprimir imágenes png, así como JPG o WebP. Es decir, no podemos modificar el tamaño en píxeles.
Antes de subir la foto debemos elegir una de las dos opciones que ofrece la versión básica para compresión de imágenes gratis. Podemos escoger Lossy, mayor compresión aunque con algo de pérdida de calidad, o Lossless, que comprime sin pérdida.
Una vez subimos la imagen, la comprime automáticamente. Nos permite una comparación visual del antes y el después antes de descargar la imagen optimizada.
El propio WordPress también nos permite una edición básica de nuestras imágenes. Sin embargo, debo dejar muy claro que esta no es la opción adecuada para optimizar imágenes.
Solo la incluyo aquí porque puede ser una opción para aquellas fotos que ya estén en la galería de medios de WordPress y que se subieran sin reducir su tamaño.
Seleccionamos la imagen en cuestión y elegimos la opción Editar. Aquí podemos recortar y reencuadrar la imagen, además de redimensionarla incluyendo las dimensiones adecuadas en píxeles.
Por supuesto, WordPress no nos permite modificar la compresión.
Este plugin es fácil de usar. Una vez instalado, si dejamos la configuración por defecto, el solito comprimirá todas las imágenes de la web, además de alguna otra opción.
Y todo ello con la versión gratuita. Si por ejemplo queremos disfrutar de la opción de convertir nuestras imágenes al formato WebP, deberemos pagar la versión Pro.
ShortPixel es otro plugin para optimizar imágenes que utiliza otro sistema para separar su versión gratuita de la de pago.
En la versión gratuita este plugin nos ofrece acceso a todas sus opciones, incluida la conversión al formato WebP, un tipo de archivo que comprime más que los tradicionales JPG o PNG tanto sin pérdida de calidad o con ella. Y también le dice al navegador que versión mostrar en función de la resolución del dispositivo.
Como en el caso de Compressor.io, ShortPixel permite compresión con pérdida, que puede afectar a la calidad de la imagen; sin pérdida, y la denominada Glossy, que el mismo plugin recomienda para el caso de fotógrafos o webs en las que la alta calidad de las imágenes sea importante.
Sin embargo, esta última opción solo debemos usarla si ya hemos optimizado la foto antes de subirla, especialmente en cuanto al tamaño de foto.
Conclusión
En resumen, para optimizar nuestras imágenes y mejorar así el rendimiento de la web, debemos cumplir con los siguientes pasos:
-Determinar el tamaño máximo al que necesitamos o queremos que la imagen sea visualizada por los usuarios.
–Reducir el tamaño de fotos que vamos a usar de acuerdo con ese tamaño máximo.
-Si utilizamos programas o aplicaciones web que nos permitan comprimir las fotos antes de guardarlas, entonces una compresión entre 60 y 70% en fotos JPG es adecuada.
-Aunque tanto si comprimimos las imágenes al guardarlas y antes de subirlas a nuestra web, como sino, debemos utilizar un plugin de optimización de imágenes que las comprima por nosotros. ¿Por qué?
La razón por la que se recomienda utilizar plugins de optimización aunque subamos nuestras fotos con la debida compresión es que WordPress hace varias copias de cada foto que subimos para los diferentes tamaños que se utilizan en la web. Así se comprimirán también esas copias.
Tienes más claro ahora ¿Cuál debe ser el tamaño de las fotos para web? ¿Qué tamaños de fotos hay que utilizar? ¿Cómo reducir el tamaño de las fotos? ¿Cómo y por qué comprimir imágenes?
Si aún sigues teniendo alguna duda, no dudes en utilizar el formulario de comentarios para comunicármela y trataré de aclararla.
