Cómo utilizar imágenes dinámicas con diferentes resoluciones [ESP-ENG]

En la programación web un problema muy común que siempre se presenta es la utilización de imágenes y sus diseños adaptativos ya sea en calidad en tamaño y tiempo de respuesta para el lado de cliente.

In web programming, a very common problem that always arises is the use of images and their adaptive designs, whether in quality, size, or response time on the client side.

![clon1.jpg]() Con estos problemas me refiero a que el primero es más común que suele ocurrir es la adaptación de la imagen a los diferentes tamaños de los dispositivos, con el segundo hablando de calidad la mayoría suponemos que no queremos perder calidad pero si utilizamos imágenes de mucho peso implica que la página sea muy lenta así que esto es muy fácil solucionar pero el siguiente problema suele ser el más importante que es el tiempo de respuesta que desea recibir el usuario final al momento de cargar una imagen.

With these problems I mean that the first is the most common that usually occurs is the adaptation of the image to the different sizes of the devices, with the second speaking of quality most of us assume that we do not want to lose quality but if we use very large images it implies that the page is very slow so this is very easy to solve but the next problem is usually the most important which is the response time that the end user wants to receive when loading an image.

![clon2.jpg]() Gracias a que html ha estado avanzando muchísimo en los últimos años existe una etiqueta llamada picture y la misma permite almacenar diferentes direcciones de imágenes con diferentes resoluciones basados en el ancho de pantalla.

Thanks to the fact that HTML has been advancing a lot in recent years, there is a tag called picture that allows you to store different image addresses with different resolutions based on the screen width.

![clon3.jpg]() Suena un poco raro de entender el principio pero permite hacer algo similar a css pero con html y altamente rápido y eficaz en casi todos los navegadores.

It sounds a little strange to understand the principle, but it allows you to do something similar to CSS but with HTML and is highly fast and efficient in almost all browsers.