Cómo hacer que las imágenes se carguen más rápido en mi sitio web

1. Elija el formato correcto según la imagen de origen
2. Comprima la imagen si puede usar herramientas como ImageOptim o Guetlzi
3. Sirva la imagen correcta en función de la resolución de la vista utilizando el atributo srcset y tamaños para permitir que el navegador elija (este paso es difícil porque también necesita herramientas para crear sus variaciones de imágenes. Cloudinary, un servicio de imágenes SaaS, puede ayudar con eso).
4. Si puede generar una alternativa WebP para sus gráficos de trama (JPG, PNG …), use el elemento de imagen para mostrar la imagen correcta según el navegador
5. Suelta GIF animados, usa el elemento de video en su lugar
6. Siempre recursos del servidor usando compresión (gzip) y caché

Algunos enlaces:

Esta increíble guía de Addy Osmani sobre optimización de imágenes

Dareboost, un servicio en línea que puede realizar una auditoría perspicaz de la calidad de su sitio web para obtener mejores rendimientos y darle consejos sobre cómo arreglar su sitio web.

Cloudinary, un servicio de fondo de imágenes para optimizar las imágenes por usted

En primer lugar … debe rediseñar totalmente ese sitio web … no solo no responde, sino que también se ve mal en el escritorio. Con respecto a las imágenes, acabo de descargar una de sus imágenes y tiene un tamaño de 1.5 mb y 4000x3000px, lo que definitivamente ralentizará el sitio, al mismo tiempo que las imágenes están en la galería, las imágenes deben tener un tamaño diferente, las imágenes cambian de tamaño por html o css que hace que se cargue lentamente.
Usaría una herramienta como Photoshop o una alternativa gratuita para cambiar el tamaño de las imágenes y TinyJPG, comprimir imágenes JPEG de manera inteligente, para comprimir más las imágenes antes de cargarlas en su servidor. Integra CDN de cloudfare: el gratuito funcionará a menos que tengas una buena cantidad de tráfico en tu sitio web.
Definitivamente, te recomendaría que reconstruyeras tu sitio web. Puedes echarle un vistazo aquí. Butterfly Design | Carlow Web Design and Development – y envíe un mensaje – tenemos precios realmente competitivos

Use el formato WebP , es un formato de imagen más nuevo que actualmente está desarrollado por Google.

Las imágenes sin pérdida de WebP son un 26% más pequeñas en tamaño que las PNG. Las imágenes con pérdida de WebP son un 25-34% más pequeñas que las imágenes JPEG comparables.

Simplemente verifique su compatibilidad en diferentes navegadores y clientes.

Aquí hay un enlace que ayudaría Un nuevo formato de imagen para la Web | WebP | Desarrolladores de Google

Hay algunas cosas básicas que puede hacer para ayudar a que su sitio web funcione bien en el navegador.

• Utilice los tamaños de imagen exactos recomendados para su tema. Asegúrese de que el ancho y la altura sean precisos. De esta manera no estás llamando innecesariamente a una imagen más grande.
• Comprima sus imágenes para reducir el tamaño de sus archivos. Es sorprendente lo pesada que puede llegar a ser la imagen. Al ver imágenes en un sitio web, las imágenes a menudo tienen mucha información que se agrega a su tamaño de archivo. Esto se puede manejar a través de un complemento como WP Smush o mediante herramientas como TinyJpg, JpegMini, ImageOptim o photoshop.
• Use un complemento de caché para no estresar a su servidor.
• Si es posible, envíe sus imágenes desde una ubicación diferente, es decir, un cdn o un subdominio para que pueda reducir las solicitudes http.
• Utilice el formato de imagen JPEG en lugar de PNG. Los archivos JPEG son más ligeros.

Esos son los conceptos básicos.

Tengo una lista de reproducción de YouTube dedicada al rendimiento y la optimización de WordPress – YouTube

Echale un vistazo. Definitivamente encontrarás información útil en los videos.

Buena suerte con tu sitio web.

Hazlos más pequeños, ya sea reduciendo sus dimensiones o comprimiéndolos más. No puede reducir efectivamente las dimensiones en HTML, debe hacerlo en la imagen misma.

Sus imágenes en miniatura son cada una de varios megabytes de tamaño. Reduzca sus dimensiones de píxeles en Photoshop o el equivalente para que coincida con el tamaño que está mostrando en la pantalla y aumente la compresión de la imagen. Deben ser aproximadamente 100 veces más rápidos para cargar de esa manera.

Hay dos cosas principales que debes hacer si quieres que tu página se cargue más rápido.

1. Haga que el tamaño de las imágenes se minimice al mínimo posible. Hay muchos sitios que reducen el tamaño de la imagen.
2. Si tiene una cantidad moderada de tráfico, puede optar por un servicio premium de CDN, o para empezar, también use Cloudflare CDN Service.

Existen algunos métodos más para cargar eficientemente su página más rápido, pero estos deberían ser suficientes.

Los tamaños de archivo en miniatura deben ser <50 kb y los tamaños de archivo de imagen más grandes deben ser <100 kb. Use cualquier herramienta de edición de fotos. En Photoshop, use "guardar para web y dispositivos" y baje la calidad a alta. Aunque si los dimensiona correctamente, generalmente puede usar "muy alto".

Si el ancho de su imagen es mayor que el ancho de su sitio, cambie el tamaño de la imagen. Nunca coloque una imagen más grande de la que necesita, o simplemente está desperdiciando las velocidades de carga y los planes de datos de las personas.

Si sus imágenes están en el rango de megabytes, es probable que sean de alta calidad y grandes en términos de dimensiones (como 4000 x 2800, por ejemplo) como 10 megapíxeles más imágenes de una cámara.

Debes hacerlos más pequeños, en los 10 o cientos de kilobytes. Use un redimensionador de imágenes en línea o una herramienta de tipo photoshop para reducir tanto el tamaño de la imagen como la calidad de la imagen.

Entonces serán rápidos

1. Almacenamiento en caché de su sitio web.
2. Comprimir el tamaño de las imágenes usando PHP.