Optimización de imágenes

Aparte de optimizar el peso de las imágenes, desde mi experiencia es importante que todos los productos tengan las mismas dimensiones. Por ejemplo, cuando vemos los productos en catalogo, si descargamos las imágenes desde internet en distintos sitios, pueden ser dimensionadas de forma distinta y esto generaría un ruido visual en nuestra web. Para esto lo que hago es pasar todas las imágenes por Photoshop, definiendo guías para los márgenes, y allí uso como template mi PSD y voy colocando las imágenes del sitio para darles el mismo formateo a todas. Cuando exporto las imágenes lo hago desde la opción de “exportar para web” y las imágenes ya salen muy bien comprimidas, lo que me ahorra el proceso de utilizar herramientas como tiny. Este proceso que les comento es muy sencillo en photoshop, solo se trata de dimensionar las imágenes.
Les dejo un mini tutorial:

1. Entramos a photoshop
2. Creamos un nuevo archivo de las dimensiones que queramos (Yo utilizo 1200x1200 px)
3. Dejamos el fondo blanco
4. Desde la carpeta donde tengamos las imágenes, arrastramos a nuestro lienzo en photoshop
5. Generalmente queda seleccionado el elemento, asique solo debemos darle a la opción “transformar” (atajo = control + t) o desde filtros - transformar
6. Ajustamos el tamaño al que nos parezca el indicado (yo prefiero que ocupe lo mayor posible pero dejando un poco de márgenes, aprox 50px)
7. Una vez que tengamos la imagen como nos gusta, ya podemos exportar yendo a archivo - exportar - Guardar para web…) y allí ya pueden ver la configuración para guardarlo y el peso que va a tener, elegimos donde queremos guardarla y listo!
8. Ya que nos gusto ese tamaño, vamos a la solapa de vista - y allí activamos las reglas, se verán unas reglas en el borde superior y lateral izquierdo, desde allí haciendo clic podemos sacar guías para acomodarlas en nuestro lienzo, sacamos dos desde el lateral y dos desde la parte superior y las dejamos justo donde limita nuestra imagen, para poder tener un encuadre parejo.
9. Guardamos como PSD y siempre que vayamos a subir nuevos productos, las pasamos por este proceso y las tendremos a todas formateadas de la misma manera 😃
   Espero que el aporte ayude, recomiendo mucho saber utilizar un poquito photoshop para poder mejorar las imágenes de nuestras webs!

Les comparto la aplicación Squoosh de Google para comprimir imagenes preferiblemente JPEG, mi favorita personalmente aparte de tiny jpg: https://squoosh.app/?utm_medium=PWA&utm_source=launcher

¿Cuál es el tamaño ideal de una imágen?

• Foto horizontal: 1650 px de ancho x lo que de de alto
• Foto vertical: 1450 px de alto x lo que de de ancho

La optimización de imágenes es un aspecto importante en el SEO de un sitio web. Algunos de los factores a considerar para optimizar imágenes incluyen:

1. Nombre de archivo: El nombre de archivo debe incluir palabras clave relevantes para el contenido de la imagen.

2. Tamaño de archivo: Las imágenes deben ser optimizadas para reducir su tamaño sin comprometer la calidad.

3. Formato: El formato de la imagen debe ser adecuado para su uso y debe ser el más eficiente en términos de tamaño y calidad.

4. Etiquetas ALT: Las etiquetas ALT describen el contenido de la imagen y son importantes para los usuarios con discapacidades visuales y para los motores de búsqueda.

5. Contexto: Las imágenes deben ser relevantes para el contenido en el que se encuentran y deben complementar ese contenido.

Hay varias herramientas en línea que te permiten comprimir imágenes sin perder calidad, aquí hay algunos ejemplos:

• Tiny JPG.
• Compressor
• Kraken
• “Image Optim”
• "Short Pixel’
  Estos sitios web te permiten subir tus imágenes y optimizarlas automáticamente. Algunos también ofrecen opciones para personalizar la compresión y ajustar la calidad de la imagen.

Resumen de la clase sobre Optimización de Imágenes:

• Peso de las imágenes y su influencia en la experiencia del usuario.
• Recomendación: Imágenes menores a 120 KB están en estado óptimo, 120-180 KB está aceptable.
• Consideración del tamaño de la imagen para reducir su peso.
• Herramienta “TinyPNG” para comprimir imágenes sin pérdida de calidad.
• Importancia del formato de imagen: PNG para gráficos, JPG para fotos, WebP como formato versátil.
• Texto alternativo para imágenes: utilizado por algoritmos y sistemas de discapacidades.
• Cómo redactar el texto alternativo: describe la imagen como si se explicara a alguien.
• Uso de guiones en lugar de espacios en los nombres de imágenes.
• La optimización de imágenes influye en la velocidad del sitio y el posicionamiento.
• Imágenes optimizadas benefician tanto la experiencia del usuario como el SEO.

Para los que usan wordpress

1. Smush
2. Cloudflare
3. tiny
   Es todo lo que necesitan, aun si quieren bajar mas el peso con photoshop

Yo les comparto también esta página https://shortpixel.com/online-image-compression

tamaño y peso recomendado imagenes online

https://www.onlineimagetool.com/es/convert-png-jpg-webp-gif, si usas el formato wepb ayuda a reducir tamaño y no perder calidad.

Hola, está clase fue muy bueno. Yo diría entre 100 y 130 kb es óptimo a una buena calidad.

Otra herramienta que es muy buena es https://imageoptim.com/api tiene la misma función Tinypng.

Esto debería estar en el curso de optimización para Ecommerce 👏🏻👏🏻👌🏻

Tamaños Recomendados: Horizontal: 1650 px de ancho Vertical: 1450 px de alto