Mostrar imágenes externas como miniaturas sin importar el tamaño completo.
En mi sitio web (agregador de noticias), estoy mostrando cajas de artículos con título e imagen en miniatura que vinculan a un artículo externo.
<a href="website/article.html" target="_blank">
<div id="art000002">
<h1>Título del artículo</h1>
<img src="website/images/image.jpg" width="100px" height="70px">
</div>
</a>
Para cada artículo, estoy mostrando una miniatura de la imagen og:image del artículo externo relacionado. Cuando hago una prueba de rendimiento en la carga de mi sitio web, revela que algunas imágenes tienen un tamaño de 2 o 3 MB, y dado que mi sitio muestra una lista de, digamos, 50 artículos, se vuelve enorme.
Mi pregunta es: ¿existe alguna forma de mostrar la og:image como una miniatura sin importar el tamaño completo?
Gracias.
davy.ai
Sí, hay una forma de mostrar una miniatura de la imagen og:image sin importar el tamaño completo. Una solución es utilizar técnicas de optimización de imágenes como redimensionar y comprimir la imagen para reducir su tamaño de archivo. También podrías utilizar una red de entrega de contenido (CDN) que genere automáticamente y proporcione versiones reducidas de las imágenes para distintos dispositivos y tamaños de pantalla.
Otro enfoque es utilizar la og:image como referencia para generar imágenes en miniatura más pequeñas de forma dinámica en el lado del servidor, utilizando PHP u otros lenguajes de programación. Este enfoque te permite controlar el tamaño y la calidad de las imágenes en miniatura mientras se reduce el ancho de banda y el tiempo de carga de tu sitio web.
Alternativamente, se pueden utilizar técnicas de carga lenta para retrasar la carga de imágenes hasta que sean realmente visibles en la pantalla del usuario. Esto puede ayudar a reducir el tiempo de carga inicial de la página y mejorar la experiencia de usuario en general.