A pesar de que es lo suficientemente fácil recordar los más grandes en el algoritmo de Google en los últimos años y sus grandes alcances, puede ser que no te hayas dado cuenta de los cambios de algoritmos de propiedad realizados cientos de veces por año.
Google y otros motores de búsqueda incluyen el tiempo de carga y la velocidad de una página en sus rankings para métricas de diseño. Esto significa que no puedes pasar de alto la optimización de imágenes en tus proyectos de diseño de páginas web y proceso de desarrollo.
Tomarse el tiempo de optimizar imágenes no tiene pierde tanto para el SEO como para la experiencia de usuario. Como con cualquier otro aspecto del diseño, la optimización de imágenes es en parte, intuitiva, en parte generados por las mejores prácticas de generación de datos y por completo a prueba de testeos A/B. Los diseñadores web deben seguir estar cinco mejores prácticas de optimización de imágenes.
1. Haz que la optimización de imágenes sea la primera etapa de tu proyecto
Tomar decisiones acerca del tamaño, complejidad y selección de imágenes en esta fase puede ayudar a que las páginas no sean tan pesadas cuando se lance.
Por ejemplo, aunque específicamente, una optimización de «imagen», el uso de una mayor cantidad de fuentes web puede aumentar, en gran manera, el tiempo de carga . Para una UX óptima, limita tu selección de fuentes web.
2. Selecciona una formato de archivo apropiada para el tipo de imagen que tienes
El error más común que los diseñadores y desarrolladores web cometen es usar el formato erróneo o el mismo para cada imagen en una página web. Sigue estas instrucciones para determinar el formato correcto para cada imagen.
- Las fotografías casi siempre deben estar en archivo JPEG como otras imágenes complejas con miles (o millones) de colores, gradientes de color sutiles, y no existe necesidad de transparencia de colores.
- Las imágenes en formato vector con complejidad mínimo funcionan mejor como SVG (Scalable Vector Graphics), lo que ofrece el bonus de ser capaz de redimensionar las imágenes para computadoras, tablets, móviles y pantalla de retina sin pérdida de calidad usando solo un recurso web.
- Los diseños de logo, ilustraciones, íconos e imágenes similares que tienen menos de 256 colores son mejores optimizados en GIF mientras requieran solo transparencia basada en máscaras.
- El formato PNG es necesario para imágenes que requieren transparencia alfa y capas. Los archivos PNG tienden a ser más grandes que otros formatos, dependiendo de cuán bien en estén optimizados.
- Los movimiento sencillos sin sonido, y más pequeños que algunos cientos de píxeles en altura y ancho, por lo general, son mejor producidos como GIF animados en lugar archivos de video.
- Una biblioteca grande de íconos basados en vectores que pueda cambiar puede beneficiarse con una fuente web CSS2 en formato TTF/OTF o WOFF.
- En algunos casos, dibujar o animar contenido a través de CSS y JavaScript puede significar una buena optimización.
3. Optimiza las imágenes a la vista
Una vez que hayas escogido el formato correcto, échale un ojo para asegurarte de que la imagen sea lo más comprimida posible sin sacrificar la calidad.
Los archivos JPEG aplican una compresión con pérdidas, lo que significa que debes balancear la calidad y el tamaño del archivo al momento de optimizar. La diferencia entre un JPEG de calidad «máxima» de 100 por ciento y un JPEG de «baja calidad» de 30 por ciento puede ser sorprendente. Intenta bajar la calidad y luego aumentar un 10 por cierto a la vez hasta que alcances un nivel aceptable. Asegúrate de revisar el recurso original para una prueba final.
Para optimizar archivos GIF al ojo, usa la menos cantidad de colores necesarios para mostrar una imagen y prueba diferentes tamaños de paletas de color. La diferencia entre un GIF de 16 colores y uno de 256 puede ser de muchos kilobytes. Dependiendo de la imagen, puedes ser capaz de reducir la paleta un bit más para ahorrar espacio.
Cuando optimices archivos PNG, intenta usar formatos PNG-8 cuando sea posible. Esto te limita a una paleta de 256 colores, pero con el beneficio de un tamaño de archivo significativamente más pequeño que un archivo de PNG-24. Herramientas como, ImageAlpha, optimizan la transparencia alfa en imágenes PNG-8, en parte convirtiendo las imágenes en imágenes PNG-8 que incluyen transparencia alfa.
Además de tus típicas herramientas de diseño, ImageOptim es una aplicación excepcional para optimizar imágenes PNG, GIF y JPEG. Usar esta herramienta puede, fácilmente, cortar tu tiempo de carga a la mitad.
4. Determina lo que es mejor para tu página web
Cada página web, escenario y audiencia es diferente, así que no existe una forma específica cómo tus imágenes pueden beneficiar un proyecto.
La forma más correcta de determinar esto es calculando el peso de página total para tu página web al sumar el tamaño de todos los recursos (HTML. CSS, JavaScript, imágenes, video y otros). Luego puedes usar una herramienta calculadora para descubrir cuánto tiempo puede demorar cargar un contenido en el navegador de un usuario. Nota que el tiempo de descarga real y renderización puede variar de 25 a 50 por ciento más que esta estimación.
Con esto en mente, usa imágenes con un peso menor de 200kb, si es menos, mejor. Intenta que tu página web pese menos de 1 megabyte.
5. Da nombres con significado a las imágenes
Aunque en este artículo hablamos más sobre la optimización de imágenes, no olvides lo básico. Las imágenes de nombre «Parte-roja-carro,jpg» contienen más información SEO que «imagen1.jpg».
La optimización de imágenes efectiva parece como una experiencia de usuario responsive con móviles, de carga rápida y de buen rendimiento. Luego de eso, todo depende del contenido.
Si necesitas una página web ligera, fresca y funcional para tu empresa, Staff Digital puede ayudarte. Somos una agencia digital en Lima, Perú, especializada en diseño de páginas web, diseño de logos, branding, ecommerce y SEO. Estamos a un clic de distancia.
Artículo traducido y adaptado de How design. En Staff Digital nos encanta encontrar y compartir información de alta calidad de diversas fuentes. Si encuentras un artículo interesante en inglés sobre Diseño Web, Marketing Digital o Redes Sociales, ponte en contacto con nosotros y uno de nuestros editores se encargará de traducirlo y publicarlo. Gracias por visitarnos!
