CDN y peso de las imágenes

Se revisa con Screaming Frog > Images > over 100KB

Cuando tenemos imágenes con peso superior a 100KB la sugerencia es descargar esa imagen de nuestro sitio web y reemplazarla con una optimizada, como podemos hacer esta optimización:
.

• Si sabes usar Adobe Photoshop para mi será la mejor recomendación usar esta herramienta, otras opciones mas fáciles o menos técnicas como lo es Photoshop serían:
• Canva
• Crello
.
.
Como lo hago yo descargo la imagen que necesito optimizar, si tengo acceso a Photoshop ajusto tamaño y peso y la exporto nuevamente, en los casos que no tengo acceso a un pc con Photoshop cargo la imagen a canva o a crello y la exporto en formato jpg, ya que png crea los archivos mas pesados por tener un nivel mayor de calidad y la verdad solo uso png para logos o imágenes que necesito que no tengan fondo
.
.
Después de descargar las imágenes de estas herramientas las paso por una herramienta compresora de archivos de imágenes, mi favorita es https://imagecompressor.io/ por experiencia es la que mejor comprime manteniendo mejor nivel de calidad, sin embargo, existen otras herramientas como la que menciona el profesor https://tinypng.com/ , u https://compressjpeg.com/es/ , https://www.iloveimg.com/es/comprimir-imagen o simplemente colocan en el buscador “compresor de imágenes” y les saldrán bastantes opciones.

.
.

Una vez la imagen esta optimizada la vuelo a subir a mi sitio web preferiblemente con el mismo nombre en caso dado que la imagen haya estado posicionada en google images y no perder ese posicionamiento o ranking, o cuando la imagen estaba asociada con un nombre ejemplo imge334 lo reemplazo por una que sea asociada al contenido de la imagen y no olvidar describir el campo de “alt” para describir la imagen y ayudar a que los crawls puedan asociar el contenido, que luego en otra clase se habla de la importancia de las etiquetas en las imágenes.

.
.

Otra recomendación que hace el profe es que si tu imagen no la puedes comprimir a menos de 120KB por ejemplo en una portada tengas como límite máximo 180KB

Algo muy importante que no se menciona en la clase es el tamaño (ancho y alto) que debe tener una imagen para web.

Por mas que comprimas una imagen que mide por ejemplo 5600 px-2500 px te quedará pesada. Esto es redimensionar primero la imagen antes de comprimirla.

Un banner que ocupe todo el ancho de pantalla deberia medir máximo de ancho: 1400 px

De ahí que imagenes que ocupen menos espacio en la pagina deberian estar entre los: 800px (imagenes de media columna), 400px (logo), hasta 50px (iconografia)

Yo utilizo smush como plugin de wordpress para la optimización de imagen y hummingbird para optimización, por otro lado

https://imagecompressor.com/es/ Y este para optimizar imagenes , tiny png tiene un problema no permite optimizar imágenes muy pesadas.

Si desean quitarle el background a sus imágenes, esta herramienta ayuda mucho: https://www.remove.bg/

TIP para ahorrar tiempo de vida:

Si eres el todero de tu propio sitio web, y quieres ahorrar tiempo, de entrada, todas las imágenes que uses descárgalas en formato JPG.

¿Por qué?

Porque una img en formato JPG queda pesando la tercera parte (o menos) que una guardada en PNG 🤷‍♂️ consiguiendo, casi siempre (en mi caso y espero en el tuyo también) que sea innecesario tener que pasar u optimizar dichas imágenes en un segundo programa 👌

En mi caso el mejor compresor online que he encontrado es https://imagecompressor.io/

La página gtmetrix tiene una interfaz totalmente distinta a lo que se ve en el curso, me fue imposible ver por cuánto tiempo guardar los archivos en caché del anterior video y este punto tampoco puedo verlo, sería bueno que hubiera una actualización en este aspecto.

CloudFlare es uno de los mejores CDN ademas ya están entregando certificados SSL gratuitos con todas las cuentas.

Las imágenes deben pesar máximo 180KB.
Lo que yo hago es abrir la imagen en PS, la guarda con la opción “optimizado para la web” y luego la misma la subo https://imagecompressor.io/

para comprimir imágenes puntuales, uso https://squoosh.app/
para hacerlo por batch, si utilizo CDN para optimizar

Recomiendo para comprimir imágenes https://shortpixel.com/online-image-compression tiene uno online y también un plugin para WordPress, es uno de los mejores que existen luego de compararlos con varios sin tener perdida de calidad.

Les recomiendo cloudflare como CDN

Otro tip que utilizo es convertir las imagenes al formato Webp es mucho mas ligero y no afecta la calidad de la imagen, después de hacer la conversion optimizo la imagen

Tengo una duda, si necesito optimizar las imagenes, las tengo que comprimir, subirlas nuevamente a la biblioteca de medios y eliminar la imagen antigua o como hago ese cambio sin que se rompa la imagen

Muy bueno el aporte de la página donde se comprimen imagenes sin perder calidad!

Yo comprimo las imagenes directamente con photoshop, de esa manera no pierdo calidad en las imagenes, ademas tengo las imagenes alojadas en mi sitio web.

Cloudflare también tiene planes gratuitos bastante competentes.