USD
UYU
No importa qué tipo de sitio web tengas, la optimización de imágenes juega un papel vital en el rendimiento de tu sitio web. Las imágenes suelen ser uno de los elementos que más influyen en el tamaño total de la página, por lo tanto, en el tiempo de carga.
Los sitios web con las imágenes no optimizadas sufrirán el abandono de aproximadamente el 39% de los visitantes. Por lo tanto un tiempo de carga rápido es crucial para brindar una experiencia positiva a los usuarios y mejorar el posicionamiento en los motores de búsqueda.
Ventajas de optimizar tus imágenes
1- Tiempo de carga reducido: Las imágenes optimizadas tienen un tamaño de archivo más pequeño, lo que permite que se carguen más rápidamente en el navegador del usuario. Esto resulta en una mejor experiencia de usuario y reduce la posibilidad de que los usuarios abandonen el sitio debido a una carga lenta.
2- Ahorro de ancho de banda: Las imágenes no optimizadas consumen más ancho de banda al cargar la página. Esto puede ser especialmente problemático para los usuarios que tienen una conexión lenta o limitada. Al optimizar las imágenes, se reduce la cantidad de datos necesarios para transmitirlas, lo que ahorra ancho de banda tanto para el usuario como para el propietario del sitio web.
3- Mejora del rendimiento en dispositivos móviles: Con el aumento del uso de dispositivos móviles, es fundamental optimizar las imágenes para garantizar un rendimiento óptimo en estas plataformas. Las imágenes pesadas pueden agotar rápidamente los datos móviles y ralentizar la carga de la página. La optimización de imágenes garantiza que los usuarios móviles puedan acceder rápidamente al contenido sin problemas de carga
4- Mejor SEO y clasificación en los motores de búsqueda: Los motores de búsqueda consideran el tiempo de carga como un factor importante para determinar la clasificación de un sitio web. Un sitio con imágenes optimizadas y una carga rápida tiene más posibilidades de obtener una mejor clasificación en los resultados de búsqueda.
5- Crear copias de seguridad será más rápido.
A continuación te daremos distintas recomendaciones para optimizar las imágenes de tu sitio web.
Elegí el formato de archivo correcto
JPEG
Es el formato por excelencia utilizado para comprimir fotografías e imágenes. Ofrece una buena calidad de imagen con tamaños de archivo más pequeños, lo que ayuda a mantener un tiempo de carga rápido. Es recomendable para fotografías y gráficos complejos, como banners o imágenes para acompañar el contenido de tu web.
PNG
Este formato es ideal para imágenes que precisen transparencia o áreas sólidas de color, cómo logotipos e iconos. Los archivos PNG tienden a ser más grandes que los archivos JPEG, por lo que se recomienda utilizarlos cuando se necesita transparencia o cuando es importante preservar detalles y bordes nítidos.
GIF
El formato GIF es ideal para imágenes animadas o gráficos simples con colores limitados. Tiene soporte para transparencia y compresión sin pérdida, pero su calidad de imagen es menor en comparación con los formatos JPEG y PNG.
WebP
Este formato nace como una alternativa a los formatos JPG y PNG, ya que tiene las mejores cualidades de ambos formatos. Lo más importante es que ofrece un tamaño de archivo aproximadamente un 25-34% menor.
SVG
Este formato es una alternativa al formato PNG, opción ideal para gráficos vectoriales, como logotipos e iconos. A diferencia de los formatos de imagen rasterizados (JPEG, PNG, GIF), los gráficos SVG son escalables y no pierden calidad al aumentar o disminuir su tamaño. Esto los hace ideales para dispositivos de alta resolución y pantallas de diferentes tamaños.
Ajustá las dimensiones y resolución
La dimensión de una imagen se determina por la cantidad de píxeles que tenga tanto de largo como de ancho.
No existen tamaños estandarizados para tu sitio web, depende de cuál será la función de esa imagen, a continuación sugerimos algunas medidas que te servirán de orientación para las imágenes de tu web.
Imágenes para la cabecera (header o slider): es una imagen que va a ocupar la totalidad del ancho de nuestra pantalla por lo que debería tener una tamaño de 2500 píxeles de ancho.
Imágenes que acompañan al texto: estas imágenes suelen ocupar la mitad del ancho de nuestra pantalla o en muchos casos incluso menos. Su tamaño debe oscilar entre los 600 px y los 1000 px de ancho o largo, según la orientación de la imagen.
Imágenes para productos o de cada miembro del equipo: Suelen ser imágenes cuadradas de 400 px x 400 px.
Logotipo: En WordPress depende del tema que estes usando, pero normalmente un logotipo horizontal que se ubica en la cabecera será de 250px de ancho, y de 160px de ancho para los logotipos verticales.
Pero recuerda, no son números exactos, cada tamaño dependerá del diseño y composición de tu sitio web. Por ejemplo, si usas una imagen de 500 x 500 px para una miniatura de 50 x 50 px, el navegador tendrá que descargar y escalar la imagen correctamente antes de mostrarla a los visitantes del sitio.
Para saber en que tamaño exacto de la visualización máxima de tu imagen, podés usar la herramienta Inspeccionar de tu navegador. También, existen varias extensiones de reglas para el navegador que podés instalar para medir diferentes elementos en una página web.
Si bien es posible recortar imágenes con la biblioteca de medios de WordPress u otras herramientas integradas, hacerlo antes de cargarlas en el sitio evitará crear varias versiones de la imagen original y consumir espacio adicional en el disco.
Por otra parte la resolución de una imagen se mide en píxeles por pulgada (dot per inch: dpi), cuanto más dpi, mayor será la calidad de la imagen pero, a su vez, mayor será el peso de una fotografía o imagen. Generalmente la resolución recomendada para las imágenes que se usan en web debe oscilar entre 72 dpi y 150 dpi.
Optimizá el peso de tu imagen
Optimizar el tamaño de imágenes es indispensable a la hora de subir cualquier tipo de imagen a la web ya que será determinante para mejorar la velocidad de carga de tu sitio.
Independientemente de la resolución que tenga una imagen, podemos optimizarla para encontrar el equilibrio entre la tasa de compresión (calidad) y el tamaño del archivo. Para esto es importante la manera en la que guardemos nuestra imagen cuando la exportamos desde Photoshop o desde cualquier tipo de herramienta y que la optimicemos antes de subirla a nuestro sitio web.
En Netuy recomendamos el uso de imágenes de menos de 500 kbs. Para esto, tras haberla exportado correctamente desde la herramienta de edición que usemos, podemos pasarla por alguna de las muchas herramientas online que existen para comprimir imágenes, aquí te dejamos algunos ejemplos para optimizar el peso de una fotografía:
Herramientas y Programas de Optimización de Imágenes
A continuación te mostramos algunas de las herramientas y programas que podés utilizar para optimizar tus imágenes.
Se trata de una aplicación web totalmente gratuita que se presenta como una completa y potente alternativa online para Photoshop. Tiene los mismo atajos de teclado que Photoshop y es compatible con todos sus archivos y su forma de funcionar.
Se presenta cómo la alternativa más económica a photoshop. Es un programa de edición de imágenes desarrollado por Serif. Aunque la primera versión se lanzó en 2015 únicamente para Mac, poco después estuvo disponible para Windows y ahora podrás usarlo incluso en un iPad.
El programa de retoque fotográfico más usado del mundo se debe a que este es una de las herramientas más completas de su categoría.
Impulsá tu SEO con nombres de archivo de imagen adecuados
Usar los nombres predeterminados que tu cámara asigna a cada imagen no es una buena práctica. Supongamos que subiste una foto de tu producto estrella a la web, un calzado deportivo de color azul. Google no podrá obtener mucha información de esta imagen si usas el nombre imagen-01. Lo más apropiado sería nombrar esta imagen cómo calzado-deportivo-azul.
Asegurate de escribir el nombre del producto e incluye palabras descriptivas como su marca o color. Además, utiliza guiones medios en lugar de guiones bajos para nombrar tus archivos. Por ejemplo, utiliza camiseta-blanca. en lugar de camiseta_blanca.
Si tenés una audiencia internacional y traduces las imágenes del sitio, no olvides traducir también los nombres de los archivos.
Cuando se trata de palabras clave, utiliza una herramienta como Google Search Console para revisar tu análisis de búsqueda y las consultas que incluyen tus productos.
Esto te ayudará a encontrar lo que los clientes escribirían en un motor de búsqueda si estuvieran buscando el tipo de productos que ofreces. Pero ten cuidado de no agregar demasiadas palabras clave. Utiliza solo las que se ajusten al contexto y describan la imagen de forma natural.
Recomendaciones extras
Por último, te dejamos algunas recomendaciones que, aunque no son técnicas, también te ayudarán a alcanzar una mayor calidad en tu sitio web.
Intenta utilizar imágenes visualmente atractivas para el usuario.
Las imágenes deben estar estrechamente relacionadas con el contenido de la página o de la entrada de blog. La imagen debe reforzar el mensaje que queremos transmitir, y debe vender tu negocio.
Evitá utilizar imágenes pixeladas o en las que no se vea claramente el contenido.
Evitá utilizar imágenes repetitivas, que sea demasiado parecidas.
Si crees que tus imágenes no cumplen los requisitos, siempre es preferible usar imágenes de stock, que sí tengan la calidad suficiente.
¡Esperamos que te haya sido útil! Y recordá, que optimizar tus imágenes para tu web mejorará la experiencia de los usuarios que entren en ella.
Creá tu propio sitio
Si te sentís inspirado después de leer este artículo y deseás crear tu propio sitio web, no dejes que la falta de conocimientos en programación o diseño web te detenga. En Netuy, tenemos la solución perfecta para ti.
Diseñá tu propio sitio web con nuestro Constructor de Sitios. Una plataforma fácil de usar que te permite crear un sitio web profesional sin necesidad de conocimientos de programación o diseño. Es tan fácil como elegir una plantilla entre más de 200 opciones profesionales y modernas y comenzar a personalizarla según tus necesidades y preferencias. Adquirí tu Constructor de sitios gratis con nuestros planes de Hosting Web Linux.
También podés crear tu sitio o tienda online con nuestros Planes WordPress, sin necesidad de tener conocimiento en programación ni diseño web. Con nuestros planes de WordPress podés obtener Elementor PRO, el constructor de sitios más popular, y WooCommerce, el creador de tiendas más completo. Cuenta con un sistema muy intuitivo, fácil de usar, en donde diseñás simplemente arrastrando y soltando a base de clics.
Opción ideal para quienes quieren ofrecer servicios de diseño web.
Poné manos a la obra y comenzá a diseñar tu propio sitio web.
Si querés saber más sobre estos servicios y otros, comunicate por whatsapp que nuestro equipo de ventas te ayudará a elegir la mejor opción para ti.
