Optimice sus fotos y no pierda el tiempo

Según HttParchive, el tamaño promedio del sitio web casi se duplicó en 5 años, de 1 MB a 2014 a 2 MB en 2019. Claro, el acceso a Internet es más rápido que nunca, pero ¿cómo son tan grandes ahora? La respuesta consiste parcialmente en activos multimedia en general e imágenes en particular. Ha pasado mucho tiempo ya que los sitios web ya no son páginas de texto simples. Ahora son dinámicos, llenos de imágenes, videos, GIF … y queremos que todos estos elementos se vean hermosos y crujientes en las pantallas con grandes resoluciones. Si su sitio se carga muy lentamente y nunca ha optimizado sus fotos, tengo buenas noticias: hoy descubrirá qué puede hacer para acelerar su WordPress. Veamos las herramientas que puede usar para mejorar el rendimiento de su sitio web y evitar que las imágenes eviten la experiencia de sus usuarios.
Por qué es importante optimizar la imagen antes de explicar los diferentes métodos disponibles para optimizar los activos de imagen y acelerar su sitio, me gustaría pasar unos minutos para convencerlo de la importancia de hacerlo. Las imágenes tienen un gran impacto en la dimensión general de una página web, como dije al principio, la parte de las imágenes en un sitio web representa un porcentaje importante del total. Por ejemplo, considere esta publicación de blog: Devtips: cómo evitar que WordPress adivine URL. Esta es una publicación bastante corta, con menos de 400 palabras, que ofrece una solución rápida a un problema claro.

Gnome, por David Brooke Martin en Unsplash.
Según GTMetrix, la carga de esta publicación utiliza 850 kb de datos. Pero, ¿por qué una publicación tan corta usa tantos datos? Bueno, las imágenes son parcialmente responsables de este problema: solo la imagen presentada de la publicación pesa más de 200 kb, lo que representa el 25% del total. El tráfico móvil Según los datos encontrados en Statcounter, el 52% del tráfico web proviene de dispositivos móviles y del 45% del escritorio. Esta es la razón por la cual hoy se centra tanto en el uso de modelos receptivos que funcionan bien en pantallas pequeñas. Después de haber experimentado ciertamente, la conexión a Internet móvil no siempre es excelente (especialmente si hace el transporte o en el metro). Según la estadística, en 2019 la velocidad promedio es de aproximadamente 14 Mbps. Por lo tanto, si queremos apresurar nuestros sitios web en dispositivos móviles, necesitamos reducir su peso tanto como sea posible, incluido el de sus imágenes. El almacenamiento y la transferencia de datos cuestan otra razón por la que debería preocuparse por usar imágenes con las dimensiones apropiadas es el dinero. Los criterios después de los cuales los proveedores de alojamiento ofrecen sus planes incluyen la cantidad de espacio en disco utilizado por su sitio web y la cantidad de datos que envía a sus visitantes. Cuanto más espacio en disco se use y cuánto más datos se envían, más pagará.
¡Sea responsable y cuide su dinero!

Al reducir el tamaño de sus imágenes, ¿reducirá ambos factores y ahorrará algo de dinero cada mes? Acciones de optimización de imágenes Ahora que sabe por qué debería preocuparse por optimizar las imágenes, vea lo que puede hacer para acelerar su sitio de WordPress. #1 Subir imágenes a escala correcta El número de personas que cargan imágenes liberadas directamente de su nueva cámara DSLR es sorprendente. El problema es que cualquier foto tomada con una cámara DSLR probablemente sea demasiado grande y pesada para un sitio web. Lo primero que debe hacer es reducir las imágenes a un tamaño razonable antes de cargarlas en su sitio web. Por ejemplo, en nuestro sitio, las imágenes más grandes que solemos cargar son las imágenes presentadas de nuestras publicaciones. Decidimos limitar esas imágenes a solo 1200x800px. En esta otra publicación, expliqué una forma de escalar y comprimir las imágenes rápidamente antes de cargarlas. Estas miniaturas están definidas por su tema, porque su tema es el que sabe cuándo necesita una versión más grande o más pequeña de una imagen. Por ejemplo, nuestras imágenes presentadas tienen 1200x800px. Estas dimensiones funcionan muy bien al ver la publicación en sí:
Captura de pantalla de una publicación de blog. Lo cual está demasiado claro para algo como esto:
Captura de pantalla de una publicación de la lista de publicaciones de blog.

Por lo tanto, para este caso particular, nuestro tema registra una nueva dimensión en miniatura que es solo 480x320px y se usa en la pantalla posterior a la lista.


Si cree que su tema no genera miniaturas apropiadas, le recomiendo leer la documentación de WordPress para saber cómo definir el tamaño de una miniatura con set_post_thumbnail_size o incluso cómo definir miniaturas adicionales con add_image_size. Y, como siempre, si necesita ayuda con eso, dígame en la sección de comentarios a continuación y estaré encantado de ayudarlo (¿o incluso escribir una publicación al respecto?) # 3 Use inteligentemente las dimensiones de la imagen de WordPress generan más miniaturas de Imágenes que tiene en su biblioteca de medios para que su tema pueda usar la mejor imagen en cada escenario posible. Pero aquí viene la parte interesante: y puede usar las miniaturas cuando inserta imágenes en sus páginas y publicaciones. Cuando inserte una imagen en la publicación, eche un vistazo a la barra lateral y elija el tamaño que mejor se adapte a sus necesidades:
Configuración de imagen en Gutenberg.
Por ejemplo, si coloca una imagen estrecha y pequeña como esta, entonces una imagen pequeña (300x200px) podría ser perfecta:
Imagen pequeña a 300x200px.

Pero el uso de la misma miniatura para una imagen más grande da resultados terribles:
La misma imagen a 300x200px más grande se ve horrible. Mejor use una versión de más resolución:

Imagen con mayor resolución. #4 Use el formato de imagen apropiado Hay diferentes formatos de imagen, cada uno con sus fortalezas y debilidades para comprimir las imágenes. Los formatos más utilizados son:
Png. Excelente formato de imagen para compartir capturas de pantalla que no tienen imagen en ellas, como, por ejemplo, una captura de pantalla del editor de WordPress.

JPG. Una de las formas más extendidas del mundo. Funciona muy bien con casi cualquier tipo de foto, lo que permite informes de compresión muy grandes. Sin embargo, no es perfecto: si la foto tiene bordes muy afilados (por ejemplo, si hay texto o dibujos), deberá usar tasas de compresión más bajas o arriesgarse a que la imagen tenga artefactos feos. El rey de Internet (y las plataformas de redes sociales). Es un tipo de formato que permite animaciones. Para ser honesto, creo que todos los “gifs” que usamos ahora son en realidad videos (cortos), que ofrecen mejores informes de compresión y una mejor calidad …

# 5 Elimine las imágenes no utilizadas a medida que pasa el tiempo, es fácil mantener en su sitio web de WordPress muchas imágenes antiguas que nadie usa en ningún lado. Si quieres eliminarlos rápidamente, en esta publicación, Toni explica cómo.
# 6 Habilite la carga perezosa para que las imágenes ralenticen sus sitios, ¿verdad? ¿Por qué no decimos simplemente los sitios web para no subir fotos a menos que sea absolutamente necesario? Eso aceleraría las cosas, ¿no? Ingrese la carga perezosa. La carga perezosa es una idea bastante simple: no se cargará una imagen hasta que sea visible en el navegador del visitante. Por ejemplo, si nuestro sitio web tiene una determinada imagen en el sótano, ¿por qué tenemos que cansarnos de cargarlo antes de que el usuario llegue al final de nuestro sitio? Espere hasta que llegue allí, y una vez que me levante, cargue la imagen (y si no lo hago, ¡guarde la carga de la imagen!)