Cómo optimizar las imágenes para tu Sitio Web
Al publicar imágenes en sitios web, dos cosas son de suma importancia: la calidad de la imagen y los requisitos del sitio web. El equilibrio entre ellos dicta la optimización de la imagen en dicho sitio. Este tipo de archivos se cargarían de la manera más rápida, sin hacerte esperar lo más mínimo.
Sumario:
Según los estudios estadísticos, muchas personas abandonan los sitios solo porque la imagen tardó un segundo más en cargarse. También se debe a que las dimensiones no coinciden con el sitio web, lo que da como resultado imágenes extrañamente recortadas o estiradas. Además, si son de baja calidad pueden dañar negativamente a la empresa y al sitio, ya que puede perder ventas y visitas. Lo ideal es disponer de un sitio donde conseguir imágenes de calidad -la materia prima es esencial-, como un banco de imágenes profesional -DepositPhotos, por ejemplo-, pero si no es posible por cuestiones económicas, lo explicaremos pasando esto por alto.
Las dimensiones correctas para cada sitio web, los tiempos de carga y la calidad de la imagen son esenciales para mantener al usuario en nuestro portal o web. Las buenas imágenes captan la atención del espectador inmediatamente; las que son de baja calidad hacen que abandonen más pronto que tarde. Optimiza las imágenes no solo por razones estéticas, también comerciales, ya que esto conseguirá aumentar las visitas y, por ende, las ventas.
Afortunadamente, los servicios de retoque saben cómo hacer que estos archivos se vean mucho mejor y se carguen lo más rápido posible en nuestra página para dar una grata impresión a los usuarios. Veamos cómo lo hacen.
En este artículo, vamos a exponer qué aspectos son cruciales para optimizar imágenes para la web. Dependiendo del sitio, las fotos se verán de manera diferente y tendrán distintos criterios para procesarlas. El esquema sería el siguiente:
-
Formato de imagen
-
Tamaño de la imagen
-
Dimensiones de la imagen
-
La calidad de imagen
Formato de imagen
Uno de los aspectos centrales de la optimización de la imagen es el formato del archivo. En la web, los formatos de imagen más populares son JPEG, PNG y GIF. Sin embargo, algunos formatos son mejores que otros en circunstancias específicas.
- Los archivos JPEG son de facto para la mayoría de las fotos de Internet. Es como el estándar de imagen para la web. Esto se debe a sus excelentes capacidades de compresión (lo que da como resultado tamaños de archivo comprimidos) mientras conserva una calidad de imagen decente.
- Los PNG son de mayor calidad que los JPEG, pero no se pueden comprimir tanto como los JPEG. Por lo tanto, el tamaño del archivo es mayor. El formato de archivo PNG-24 es mucho más grande que el formato PNG-8. No se pueden retener los colores tan bien como los archivos JPEG bajo una compresión óptima.
- Las imágenes GIF se utilizan a menudo para mostrar animaciones. Desafortunadamente, los GIF no muestran colores como los PNG o JPEG, por lo que solo es adecuado para producir imágenes simples con pocos colores.
Los formatos de imagen son esenciales para hacer un buen trabajo de diseño. Por ejemplo, el uso de archivos JPEG para logotipos está totalmente prohibido debido al fondo blanco que dejarían. Por otro lado, los PNG tienen transparencia, por lo que los logotipos van mejor con este formato. Los GIF tienen su razón de ser si queremos mostrar alguna animación, pero con los modernos estándares de programación web esto ha quedado un poco anticuado.
Del mismo modo, los archivos JPEG se utilizan para cargar contenido de imágenes rápidamente, lo que puede ser una gran comodidad para los clientes, especialmente en las plataformas eCommerce -comercio electrónico-. Sin embargo, un segundo demasiado tarde y es posible que hayas perdido una venta.
Los profesionales que se dedican al diseño gráfico y son especialistas en imágenes, saben perfectamente qué formatos necesitas para tu web, en función de cómo y dónde quieras utilizarlas.
Tamaño de la Imagen
Ahora que conocemos los tipos de archivo y sus diferencias, no debería sorprendernos que reducir su tamaño, también conocido como compresión, hará que se cargue más rápido. Pero, ¿a qué tamaño debemos aspirar, cómo y cuándo?. Porque el tamaño importa, y mucho.
Hacer la imagen demasiado pequeña provoca que los colores se conviertan en entes extraños. No quieres eso para tu sitio porque dará una impresión de baja calidad. Algunos formatos manejan la compresión mejor que otros, como los JPEG. Incluso si reduces una imagen JPEG a, digamos, 25 KB, aún conservaría algo de calidad en comparación con PNG y GIF.
El uso de imágenes con colores distorsionados sin duda hará que los usuarios tengan reticencias a la hora de devolvernos la visita. Si vendes productos online, ¿qué pensarán los potenciales compradores de tus productos si subes imágenes sin editar?. También pueden tener una idea equivocada acerca de dichos productos.
Optimizar el tamaño de la imagen del sitio web es crucial porque encontrar el delicado equilibrio entre calidad y tamaño es lo que mejor saben hacer los expertos en la edición de este tipo de archivos.
Dimensiones de la imagen
En términos sencillos, la resolución es básicamente lo nítida y detallada se ve la imagen en general. La relación de aspecto de los píxeles hace que las dimensiones de la imagen, como la longitud y el ancho compongan finalmente su composición. La relación entre la longitud y el ancho es la relación de aspecto.
Estos dos son esenciales para conseguir optimizar las imágenes de nuestro sitio, con el fin de que el usuario final consiga la mejor experiencia de navegación.
Resolución:
Las imágenes con alta resolución aparecerán nítidas y detalladas incluso cuando hagas zoom, en comparación con las imágenes de menor resolución. Sin embargo, y como sabrás, una resolución más alta equivale a un tamaño de archivo más grande. Exactamente igual que si queremos ver una película en 4K, el tamaño del archivo es descomunal.
Un archivo de imagen más grande tardará más en cargarse y probablemente puede empañar la reputación de tu sitio si colocas por descuido la imagen de mayor resolución.
Además, muchos sitios web tienen requisitos de resolución específicos. Por ejemplo, el límite de resolución más alto de Amazon es 10,000px y el más bajo es 500px. Una imagen de resolución de 10,000px tendrá un nivel de detalle extremo. El límite de resolución de la foto de portada de Facebook es de 640 x 480 píxeles.
Relación de aspecto:
La relación de aspecto es la relación entre el ancho y el alto de una imagen, tal y como hemos explicado anteriormente. A menudo se denota en proporciones según el tamaño de cada una. Por ejemplo, si la imagen es un cuadrado, la relación es 1:1. Si la imagen tiene el doble de ancho que de alto, la relación sería de 2:1.
Muchos sitios web indican relaciones de aspecto por su resolución, como 1920x1080 píxeles para una relación de aspecto de 16:9. Esto es especialmente importante en lugares donde se debe colocar un tamaño específico de la imagen, por ejemplo en la parte superior de la página de inicio de una Web. Este tipo de imágenes que se diseñan con precisión se ven excelentes y muy atractivas.
Las imágenes se verían como si pertenecieran al sitio web de forma natural, lo que haría que los usuarios quisieran consumir los contenidos por más tiempo.
Por ejemplo, Amazon prefiere imágenes cuadradas de 1:1, mientras que la relación de aspecto de una foto de portada de Facebook sería de 16:9. Esto es algo complicado, como podemos ver. Sin embargo, y volvemos a repetir, disponer de un profesional del diseño gráfico es la salida más sencilla.
La calidad de imagen
Dejando de lado los tecnicismos, hablemos de la calidad de imagen. Tener fotografías de buena calidad es lo más importante: el tamaño, el formato y otras cosas pueden venir después de que se haya elegido la mejor toma para editar y procesar. La buena fotografía es muy apreciada, pero eso solo no es suficiente.
Fotografía:
Hay que tener en cuenta muchas cosas en la fotografía. Afortunadamente, la mayoría de fotógrafos son muy capaces de tomar fotografías llamativas y repletas de sentido. Sin embargo, lo que viene después de la fotografía es el posprocesamiento. Aquí es donde debes buscar servicios profesionales de retoque fotográfico para hacer el trabajo. Y este es un punto complicado.
Como todos sabemos, los servicios de retoque brindan fotografías de excelente calidad al por mayor y hacen su trabajo muy rápido y a precios asequibles. De hecho, no tienes ni que moverte de casa, hay cientos de servicios online que se dedican a ello, por no hablar de Freelancers específicos.
Vectores:
Hay sitios web donde los vectores funcionan mucho mejor. Se utilizan principalmente para hacer ilustraciones y dibujos, con el fin de que la web sea más atractiva. Seguramente ya lo habrás percibido al visitar muchas páginas en internet, donde puedes encontrar auténticas obras maestras de este tipo de archivos. De hecho, los vectores dan un impulso extremo al aspecto de nuestro sitio, dotándolo de una calidad muy visible.
Puedes usar un software específico para vectores, como Adobe Illustrator o un diseñador gráfico para ayudarte con este tipo de ficheros. No te confundas, los vectores no son sencillos de trabajar.
Conclusión
No hay más que añadir en cuanto al trabajo con imágenes destinadas a «vestir» nuestra web. Los conceptos son sencillos, aunque el trabajo de fondo es costoso, en tiempo y dinero, pero no hay alternativa, a no ser que quieras una página estilo «Google», que las hay, pero todos sabemos que las visitamos porque no queda más remedio, no porque nos llame poderosamente la atención ni nos entre por los ojos.
