Las imágenes juegan un papel particularmente importante en la creación de sitios web. A menudo, una imagen dice más que muchas palabras, por lo que nunca se debe descuidar el contenido visual. Sin embargo, demasiadas imágenes, formatos de archivo incorrectos o imágenes demasiado grandes también pueden tener un efecto negativo en la velocidad de carga, la usabilidad o la apariencia. Debes prestar atención a esto si quieres optimizar tus imágenes. Todos los sitios web se benefician de un material de imagen adecuado: en las tiendas online, las imágenes de los productos tienen un efecto beneficioso en la tasa de conversión, en el sitio web de una empresa, las imágenes crean más información sobre la empresa y, en el caso de los contenidos informativos, las imágenes y las infografías ayudan a comprender mejor los contextos.
¿Cómo llegan las imágenes al sitio web?
Al comienzo del sitio web, a menudo es necesario examinar la materia prima. Las imágenes suelen estar disponibles en formato PDF, JPG, PNG o EPS. Los tamaños de los archivos también suelen ser diferentes aquí, aunque una imagen grande no siempre es de alta calidad. Si el sitio web antiguo sirve como base, primero debe verificar si se pueden adoptar las imágenes y logotipos existentes. Para ello, los archivos de imagen deben ser aceptables en términos de calidad y tamaño de salida.
Los formatos de imagen adecuados son:
- JPEG (para fotos y gráficos de alta calidad)
- PNG (para gráficos con menos detalles y áreas sólidas)GIF (para videos cortos)
- WebP (Desarrollado por Google y flexible de usar)
Para los fondos y encabezados, debe optimizar las imágenes para que sean lo suficientemente grandes. Como solución de emergencia, aquí también se pueden utilizar imágenes de archivo adecuadas.
Se recomiendan los siguientes tamaños de píxel para los encabezados:
- 1920 píxeles con visualización a pantalla completa
- 1200 píxeles a la altura de pantalla completa
- Para que los usuarios puedan ver que el contenido/texto sigue, 1920 x 700 píxeles son adecuados
Para obtener más imágenes en el sitio web, el tamaño se puede ajustar de la siguiente manera:
- Formatos horizontales máx. 900 píxeles de ancho
- Formatos verticales máx. 700 píxeles de altura
- Imágenes destacadas adaptadas al curso del texto
¿Por qué deberías comprimir imágenes?
Cuanto más grandes sean las imágenes, más tiempo tardará la página en cargarse. Una velocidad de página lenta tiene un efecto negativo en la en la experiencia del usuario y, a más tardar con el tema de la experiencia de la página 2021, esto se está convirtiendo cada vez más en un factor de clasificación decisivo. Especialmente en dispositivos móviles, muchas imágenes grandes pueden garantizar que los visitantes abandonen su sitio antes de que haya terminado de cargarse. Las imágenes suelen ser el primer y más efectivo punto de partida para optimizar el tiempo de carga de tu sitio web.
Con estas herramientas, puede comprimir imágenes y reducir el tamaño del archivo
El programa más conocido e importante para comprimir y editar imágenes es Adobe Photoshop. Aquí la imagen se puede reducir fácilmente por imagen >tamaño de imagen.
Alternativamente, también hay herramientas más baratas o gratuitas que se pueden usar para comprimir imágenes.
- Squoosh
- tinypng
- Comprimirjpeg
- Compresor de imágenes
- Irfanview (Descargar)
- GIMP
Para imágenes de sitios web normales, debe mantener un tamaño de imagen de un máximo de 200 KB, para esto debe comprimir las imágenes y elegir sabiamente.
Además, se deben ajustar otras propiedades al optimizar imágenes:
- Brillo/Contraste
- Las imágenes torcidas se enderezan
- En algunos casos, también se eliminan las manchas (defectos de imagen o p. ej. grietas en una calle, manchas en las paredes de la casa, etc.)
En el siguiente paso, el color y la forma de las imágenes deben ajustarse a través de CSS. Por ejemplo, los siguientes factores incluyen:
- Color: Contorno/Sombra
- Forma: bordes redondeados o completamente redondos
- Ajuste CSS del ratón por encima para obtener las vistas grandes deseadas
Optimiza las imágenes para sitios web responsive
Para que las imágenes se muestren de forma óptima en los dispositivos móviles, deben ajustarse correctamente de antemano.
- Representación más pequeña
- una imagen diferente (mismo motivo) pero móvil como formato horizontal (el escritorio es, por ejemplo, formato vertical)
- Ajustar el espaciado de las imágenes de la galería
Fuente:
Spanish