Hogar › Teléfono › CSS: inserta la imagen en el área. Formatear imágenes usando Canvas Cómo recortar una imagen en HTML

CSS: inserta la imagen en el área. Formatear imágenes usando Canvas Cómo recortar una imagen en HTML

En algunos casos, el contenido del bloque aparece fuera de los límites del elemento, superponiéndose a él. Para controlar el comportamiento de los elementos a nivel de bloque, utilice la propiedad overflow, que determina cómo se debe mostrar el contenido que se extiende fuera del bloque.

Usando la propiedad de clip, puede recortar un elemento a dimensiones específicas.

1. Propiedad de desbordamiento

El contenido de los elementos del bloque puede desbordar el bloque cuando el bloque tiene una altura y/o ancho explícitos. Sin especificar una altura, el bloque se estirará para acomodar el contenido a menos que el bloque esté ubicado en la posición: absoluta; o posición: fija; . El texto puede desbordar el bloque en altura, las imágenes en altura y ancho.


Valores:
visible	Valor predeterminado. Todo el contenido se vuelve visible independientemente del tamaño del bloque contenedor. Es posible superponer el contenido de bloques adyacentes.
voluta	Agrega barras de desplazamiento dentro del área de visualización del elemento que aparecen incluso cuando el contenido cabe dentro del bloque. Las dimensiones del contenedor no cambian.
auto	Agrega barras de desplazamiento solo cuando es necesario.
oculto	Oculta contenido que se extiende más allá de los límites del bloque. Puede ocultar algún contenido. Se utiliza para bloques de contenedores que contienen elementos flotantes. También evita que se muestren fondos o bordes debajo de elementos flotantes (que tienen la propiedad float: left / right; establecida. Esto no cambia el tamaño del contenedor.

Arroz. 1. Recorte el contenido del bloque usando la propiedad de desbordamiento Sintaxis: div (ancho: 200 px; alto: 150 px; desbordamiento: oculto;)

2. Propiedad de desbordamiento-x

La propiedad especifica cómo se cortará el borde derecho del contenido dentro del bloque si se desborda.

Sintaxis:

Div (desbordamiento-x: oculto;)

3. Propiedad de desbordamiento

La propiedad especifica cómo se recortará el borde inferior del contenido dentro del bloque si se desborda.

Sintaxis:

Div (desbordamiento-y: oculto;)

4. Propiedad del clip

La propiedad determina qué parte del elemento será visible. La parte del elemento que permanece visible después del recorte se denomina región de recorte. El recorte se aplica a un elemento que inicialmente es completamente visible. La propiedad se aplica a elementos que tienen su propiedad de posición establecida en absoluta o fija.

En este artículo, aprenderemos cómo cambiar el tamaño y recortar imágenes usando un elemento en HTML5 y, mientras estamos en ello, le daremos a los controles un diseño elegante como en los editores de fotos.

Hoy en día, muchos sitios web y aplicaciones web están equipados con tecnología de procesamiento de imágenes. Esto se puede hacer en el lado del servidor, lo que generará costos de tiempo para transportar una imagen potencialmente grande. Para evitar esto, puede procesar imágenes en la máquina cliente para acelerar el proceso.

Haremos esto a través del lienzo, dibujaremos las imágenes en el tamaño deseado y luego buscaremos nuevas imágenes. Muchos navegadores admiten este método, por lo que podemos comenzar de inmediato con limitaciones de rendimiento menores.

Formatear imágenes grandes puede ralentizar el navegador o hacer que se detenga por completo. Esto nos hace pensar en establecer límites a las imágenes subidas. Si la calidad de las imágenes resultantes es importante, entonces nos sorprenderá saber en qué las convierte el navegador. Puede encontrar varias tecnologías en Internet para mejorar la calidad del procesamiento de imágenes, pero no las consideraremos aquí.

¡Por eso empezamos a trabajar!

Calificación

En nuestra demostración trabajaremos con una imagen determinada:

¡Todo! No necesitamos ningún otro HTML.

CSS

El código CSS tampoco será muy grande. Definamos estilos para el contenedor de cambio de tamaño y la imagen misma.

Cambiar tamaño de contenedor ( posición: relativa; mostrar: bloque en línea; cursor: mover; margen: 0 automático; ) .resize-container img ( mostrar: bloque ) .resize-container:hover img, .resize-container:active img ( contorno: 2px rgba discontinuo(222,60,80,.9)

Ahora configuremos las posiciones y estilos para cada "controlador de cambio de tamaño". Se trata de pequeños cuadrados situados en las esquinas de las imágenes que arrastramos para cambiar el tamaño de la imagen.

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw (posición: absoluta; visualización: bloque; ancho: 10px; alto: 10px; fondo: rgba(222,60,80,.9); índice z: 999; .resize-handle-nw (arriba: -5px; izquierda: -5px; cursor: nw-resize; ) .resize-handle- sw (abajo: -5px; izquierda: -5px; cursor: sw-resize; ) .resize-handle-ne (arriba: -5px; derecha: -5px; cursor: ne-resize; ) .resize-handle-se (abajo : -5px; derecha: -5px; cursor: cambiar tamaño)

javascript

Comencemos creando una variable y un lienzo en Canvas.

Var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("lienzo" )); resizeableImage($(".resize-image"));

Ahora creemos una función de activación que se ejecutará inmediatamente. Esta función funciona con el contenedor en el que se encuentra la imagen, establece el tamaño y copia la imagen original para recortarla. También asignamos un objeto jQuery para poder hacer referencia a él más tarde y usamos operadores de movimiento del mouse para responder a los arrastres del mouse.

Var resizeableImage = function(image_target) ( // ... init = function())( // Crea una nueva imagen con una copia del src original // Al cambiar el tamaño, siempre usaremos esta copia original como base orig_src. src =image_target.src; // Agregar controladores de cambio de tamaño $(image_target).wrap("

").antes(" ").antes(" ").después(" ").después(" "); // Obtener una variable para el contenedor $container = $(image_target).parent(".resize-container"); // Agregar eventos $container.on("mousedown", ".resize-handle", startResize ); //... inicio();

Las funciones startResize y endResize le indican al navegador cuándo comenzar a prestar atención al movimiento del mouse y cuándo detenerse.

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", redimensionamiento); $(document).on("mouseup", endResize ); endResize = function(e)( e.preventDefault(); $(document).off("mouseup touchend", endResize); $(document).off("mousemove touchmove", redimensionamiento); );

Antes de comenzar el seguimiento del mouse, debe escanear la configuración actual del cliente al solicitar una página. los almacenamos en la variable event_state y los usamos más adelante en nuestro trabajo.

SaveEventState = function(e)( // Guarda los detalles del evento inicial y el estado del contenedor event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset(). izquierda; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop() // Esta es una solución para safari móvil // Por alguna razón no permite una copia directa de la propiedad de toques if(typeof e.originalEvent.touches !== "undefinido")( event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)( event_state.touches[i] = ( ); event_state.touches[i].clientX = 0+ob.clientX );

La función de cambio de tamaño es la más importante. Se activa cuando se estira la imagen. Cada vez calculamos nuevos tamaños de imagen dependiendo de la nueva posición de los cuadrados.

A continuación, agregaremos una opción para limitar el tamaño de la imagen usando la tecla Shift o una variable.

tenga en cuenta: Dado que en realidad estamos cambiando el tamaño de la imagen en lugar de simplemente darle una nueva longitud y altura, vale la pena pensar en cuánto podemos usar la función resizeImage para controlar el rendimiento del servidor.

Nuevos tamaños de imagen

Dibujar imágenes en Canvas es tan fácil como dibujarImagen. Establecemos la altura y la longitud de la imagen y luego proporcionamos el original. También usamos toDataURL para obtener una versión codificada en Base64 del resultado de la operación.

Se proporcionan explicaciones completas de las opciones disponibles para esta operación.

ResizeImage = function(ancho, alto)( resize_canvas.width = ancho; resize_canvas.height = alto; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, ancho, alto); $(image_target).attr( "src", resize_canvas.toDataURL("imagen/png"));

¿Demasiado fácil? Hay una advertencia: la imagen debe estar alojada en el mismo dominio que nuestra página, o el archivo . Si este no es el caso, tendrás problemas con el "lienzo contaminado".

Creciendo a través de otros vértices

Ahora debería tener una demostración funcional. Pero aún no ha terminado. Por el momento sólo podemos estirar la imagen en una esquina, pero queremos usar las cuatro. Para hacer esto, necesita entender cómo funciona.

Cuando estiramos la imagen, las esquinas adyacentes a la esquina retenida también deben moverse, pero el extremo opuesto de la imagen debe quedar fijo.

Podemos cambiar el código para que cuando la imagen se estire en cualquier ángulo, cambie. Actualicemos la función de cambio de tamaño:

Cambiar tamaño = función(e)( var mouse=(),ancho,alto,izquierda,arriba,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); de manera diferente dependiendo de la esquina arrastrada y las restricciones if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top ; izquierda = event_state.container_left; top = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( ancho = event_state.container_width - (mouse.x - event_state .container_left); altura = mouse.y - event_state.container_top; left = mouse.x; top = event_state.container_top; else if($(event_state.evnt.target).hasClass("resize-handle-nw")) ( ancho = event_state.container_width - (mouse.x - event_state.container_left); alto = event_state.container_height - (mouse.y - event_state.container_top);< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

izquierda = ratón.x;

arriba = mouse.y;

if(restringir || e.shiftKey)( top = mouse.y - ((ancho / orig_src.width * orig_src.height) - altura); ) ) else if($(event_state.evnt.target).hasClass("resize -handle-ne"))( ancho = mouse.x - event_state.container_left; altura = event_state.container_height - (mouse.y - event_state.container_top); izquierda = event_state.container_left; arriba = mouse.y; if(restringir | | e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) // Opcionalmente mantiene la relación de aspecto if(constrain || e.shiftKey)( height = width / orig_src.width * orig_src.height ) if(ancho > min_width && alto > min_height && ancho

Ahora comprobamos qué controlador de cambio de tamaño se utilizó y aplicamos los cambios necesarios.

Mover una imagen

StartMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", moviendo); $(document).on("mouseup", endMoving ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", moviendo); );

En la función de movimiento debemos calcular la posición del cuadrado superior izquierdo. Debe ser igual al inicial con un pequeño desplazamiento calculado a partir del movimiento de otros cuadrados.

Mover = función(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); mouse .y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(( "izquierda": mouse.x - (event_state.mouse_x - event_state.container_left), "arriba" : mouse.y - (event_state.mouse_y - event_state.container_top) ));

Recortar una imagen

Ahora que hemos aprendido a cambiar el tamaño, debemos agregar recortes de imágenes. En lugar de permitir que los usuarios tengan problemas con los tamaños de recorte, simplemente creemos un marco que debe colocarse en el lugar correcto y todo se recortará a su alrededor. Esto les dará la oportunidad de ajustar la imagen como quieran y, al mismo tiempo, hará que las imágenes resultantes tengan un tamaño uniforme.

Para hacer esto necesitas agregar el siguiente código HTML:

Es importante recordar que el marco siempre debe ser de un color diferente al fondo de la página, de lo contrario pueden surgir problemas.

Superposición ( posición: absoluta; izquierda: 50%; arriba: 50%; margen izquierdo: -100px; margen superior: -100px; índice z: 999; ancho: 200px; alto: 200px; borde: sólido 2px rgba( 222,60,80,.9); tamaño del cuadro: cuadro de contenido; eventos de puntero: ninguno; .overlay:después, .overlay:antes (contenido: ""; posición: absoluta; visualización: bloque; ancho: 204px ; altura: 40px; borde izquierdo: 2px rgba discontinuo (222,60,80,.9); borde derecho: 2px discontinuo rgba (222,60,80,.9); margen superior: -40px) .overlay:después (abajo: 0; margen izquierdo: -2px; margen inferior: -40px; ) .overlay-inner:después, .overlay -inner:before (contenido: ""; posición: absoluta; visualización: bloque; ancho: 40 px; alto: 204 px; borde superior: 2 px rgba (222,60,80, .9); .overlay-inner:antes (izquierda: 0; margen izquierdo: -40px; margen superior: -2px; ) .overlay-inner:después (derecha: 0; margen derecho: -40px; margen superior:); -2px) .btn-crop (posición: absoluta; alineación vertical: abajo;

derecha: 5px;

abajo: 5px;

relleno: 6px 10px;

índice z: 999;

color de fondo: rgb(222,60,80);

borde: ninguno;

radio del borde: 5px;

Agreguemos touchstart y touchend donde tengamos mousedown y mouseup junto con touchmove donde tengamos mousemove.

// En init()... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //En startResize() ... $(document).on("mousemove touchmove", moviendo); $(document).on("mouseup touchend", endMoving); //En endResize()... $(document).off("mouseup touchend", endMoving); $(documento).off("mousemove touchmove", moviendo); //En startMoving()... $(document).on("mousemove touchmove", moviendo); $(document).on("mouseup touchend", endMoving); //En endMoving()... $(document).off("mouseup touchend", endMoving); $(documento).off("mousemove touchmove", moviendo);

Dado que tenemos dispositivos móviles conectados, existe la posibilidad de que el usuario utilice el gesto de “apretar” la imagen con los dedos para hacerla más pequeña. Hay una biblioteca muy conveniente llamada Hammer, que le permite reconocer muchos gestos. Pero, como sólo necesitamos uno, lo escribiremos brevemente sin ningún script adicional.

Es posible que hayas notado que la función saveEventState ya está almacenada en la información táctil. Ahora lo necesitaremos.

Primero comprobamos la presencia de "dos toques" y la distancia entre ellos. También observamos si la distancia entre ellos disminuye a medida que nos movemos. Ahora actualicemos en movimiento:

Mover = función(e)( var mouse=(), toques; e.preventDefault(); e.stopPropagation(); toques = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset(( " left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // Esté atento al gesto de zoom de pellizco mientras se mueve if(event_state. toques && event_state.touches.length > 1 && touches.length > 1)( var ancho = event_state.container_width, alto = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a ; var b = event_state.touches.clientY - event_state.touches.clientY; var dist1 = Math.sqrt(a + b); a * b = e.originalEvent.touches.clientY - toques.clientY; b; var dist2 = Matemáticas.sqrt(a + b);

relación var = dist2 /dist1;

ancho = ancho * relación;

altura = altura * relación; // Para mejorar el rendimiento, puede limitar la frecuencia con la que se llama a resizeImage() resizeImage(width, height);) );

En base a estos datos, reducimos o ampliamos nuestra imagen y ajustamos su altura y longitud. Eso es todo. puedes abrir En este artículo te contamos sobre Eso es todo. puedes abrir 3 técnicas CSS rápidas y sencillas

, que puedes utilizar para mostrar solo una parte de la imagen en tu página.

Todos los métodos utilizados aquí en realidad sólo requieren un par de líneas. CSS)

código. Sin embargo, esto no es circuncisión en el verdadero sentido de la palabra ( №2 todavía no podemos hacer esto), simplemente ocultamos y mostramos sólo la parte de la imagen que queremos ver. Estas técnicas pueden resultar muy útiles si quieres llevar una imagen a un tamaño determinado, es decir, quieres crear, por ejemplo, una vista previa de la misma (una copia más pequeña de la imagen) en la sección de noticias o algo similar. Técnica 1: uso de márgenes negativos ( Márgenes negativos Si no te apetece utilizar márgenes negativos, te sugerimos utilizar la técnica . Incluye un padre (párrafo) que tiene un ancho y alto específicos. Este párrafo tiene la propiedad posicionamiento establecido en relativo. El ancho y el alto definen las dimensiones del campo mostrado. Y una imagen colocada dentro de un párrafo tiene la propiedad organizar la imagen como queramos, determinando en el proceso qué parte de la imagen mostrar y cuál no.

HTML idéntico al código de la técnica anterior:

< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p >

Cultivo (

flotador: izquierda;

margen: . 5em 10px. 5 em 0 ;

desbordamiento: oculto; /* esto es importante */

posición: relativa; /* esto también es importante */

borde: 1px sólido #ccc;

ancho: 200px;

altura: 120 píxeles;

Recortar imagen (

posición: absoluta;

arriba: - 40px;

izquierda: - 50px;

Técnica 3: uso de la propiedad de corte ( Propiedad de clip)

Esta técnica debería ser la más sencilla, ya que propiedad de clip define la parte del elemento que debe mostrarse. Esto suena como una solución perfecta, pero hay una captura: elemento recortado debe estar posicionado absolutamente. Para poder utilizar el elemento, tendremos que agregar un elemento adicional, calcular el tamaño del área visible de la imagen, agregar este tamaño al padre, usar el padre... Mucho trabajo, ¿bien?

Ah, un problema más: el tamaño del elemento recortado no se reduce al tamaño de recorte, sino que permanece en el tamaño original (la imagen fuera del recorte simplemente se oculta). Debemos usar el posicionamiento absoluto para mover el área visible a la esquina superior izquierda del padre.

Sin embargo, no se puede dejar de mencionar propiedad de corte. Y así el código de nuevo...

< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "plantilla css" / > < / a > < / div >

Descripción

La propiedad clip especifica el área del elemento posicionado en la que se mostrará su contenido. Todo lo que no quepa en esta área se recortará y se volverá invisible. Por el momento, la única forma de área disponible es un rectángulo. Todo lo demás queda sólo en los sueños. clip solo funciona para elementos absolutamente posicionados.

Sintaxis

clip: rect(Y1, X1, Y2, X2) | automático | heredar

Valores

Los valores utilizados son la distancia desde el borde del elemento hasta el área de recorte, que se establece en unidades CSS: píxeles (px), em, etc. Si es necesario dejar el borde del área sin cambios, debe configurar en auto, la posición de los valores restantes se muestra en la Fig. 1.

Arroz. 1. Recortar valores de propiedad

HTML5 CSS2.1 IE Cr Op Sa Fx

acortar

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

El resultado de este ejemplo se muestra en la Fig. 2.

Arroz. 2. Usando clip en el navegador Safari

document.getElementById("elementID ").estilo.clip

Navegadores

Internet Explorer hasta la versión 7.0 inclusive funciona con una forma diferente de notación, en la que los valores de las coordenadas están separados por un espacio en lugar de una coma: clip: rect(40px auto auto 40px). Además, Internet Explorer hasta la versión 7.0 incluida no admite el valor heredado.

Las imágenes mejoran significativamente el atractivo de las páginas web, lo que en última instancia tiene un efecto positivo en la conversión. Por lo tanto, los webmasters los utilizan no sólo dentro del contenido, sino también al publicar un anuncio de publicación. Después de todo, seguir un enlace con una imagen ocurre con mucha más frecuencia que seguir un enlace simple.

Anteriormente, al publicar un post en WordPress, preparaba varias versiones de la misma imagen con diferentes tamaños. Los grandes (tamaño original) se utilizaron para exhibir en la galería, los medianos en el cuerpo de la publicación y los pequeños como miniaturas.

Con el tiempo, me cansé de hacer esto por los costos de tiempo y los errores que no, no, sí surgían durante la conversión manual. Además, tuve dificultades a la hora de cambiar el diseño del sitio cuando se requerían diferentes tamaños de imágenes. Entonces comencé a convertir imágenes sobre la marcha usando el complemento Kama Thumbnail de WordPress. ¡Gracias al autor por este gran complemento!

En el mismo artículo, le diré cómo cambiar el tamaño de la imagen que se muestra en la pantalla usando solo CSS "desnudo" sin ningún código PHP o JavaScript extraño. De cara al futuro, diré que la imagen original en sí no cambia, al igual que no se crean un montón de archivos pequeños con diferentes proporciones de la imagen, y todas las acciones solo afectan lo que se mostrará en la pantalla del visitante del sitio. Bueno, es como ponerse unas gafas con lentes rojos, cuando a pesar de lo que ves, el cielo seguirá siendo azul y la hierba será verde.

Ajuste de objeto de propiedad CSS

Esta propiedad determina Cómo El contenido de un elemento redimensionable (como una imagen) debe llenar el contenedor cuando la altura y el ancho del contenedor difieren de las dimensiones del propio elemento redimensionable. La palabra clave aquí es Cómo.

La forma más sencilla de mostrar todo aquí es con ejemplos. Digamos que tenemos dos imágenes con dimensiones de 200x300 píxeles y 300x200 píxeles, y para las miniaturas de las publicaciones queremos usar una imagen de tamaño 200x200 píxeles. Es razonable que las imágenes primarias llenen completamente la miniatura manteniendo las proporciones, y las partes sobrantes (arriba/abajo o izquierda/derecha) se corten.

Para implementar su plan necesita utilizar un valor clave ajuste de objeto: cubierta;, al usarlo, el contenido sobrante de la imagen se recorta y la imagen final se alinea hacia el centro manteniendo las proporciones para llenar completamente el área del contenedor.

Cómo comprimir y recortar una imagen usando CSS

En mi caso, para convertir cualquier imagen con diferentes tamaños y relaciones de aspecto a un formato de miniatura de 200x200 píxeles, debes usar el siguiente código CSS:

Img.object-fit-cover (ancho: 200px; alto: 200px; object-fit: portada;)

La salida de la imagen en sí podría verse así:

Otros valores de ajuste de objetos para la conversión de imágenes

La propiedad CSS de ajuste de objetos no se limita al ejemplo anterior; le recomiendo que se familiarice con todas sus capacidades en la lista de fuentes utilizadas al final del artículo.

Pros y contras de convertir tamaños de imágenes usando solo CSS

La ventaja es que no necesitas complementos, códigos ni un montón de imágenes adicionales. La opción de conversión propuesta no depende del CMS y funciona en la gran mayoría de navegadores. Los tamaños de las imágenes resultantes se pueden cambiar dinámicamente, incluso dentro de una página, y esto no aumentará la cantidad de archivos de imágenes ni el espacio ocupado por el sitio.

Las desventajas incluyen el hecho de que todas las transformaciones las realiza el navegador del usuario. Y aquí, en teoría, puede obtener resultados ligeramente diferentes según el motor del navegador de Internet y el sistema operativo del visitante del sitio.

Además, si utiliza una imagen en formato FullHD 1920x1080 para una miniatura de 100x100 píxeles, primero se descargará completamente en la computadora del usuario y solo entonces el navegador la convertirá al formato 100x100. Como comprenderá, el tamaño de dichas imágenes (1920x1080 y 100x100) puede variar 10 veces, lo que puede ralentizar el sitio en computadoras débiles y ralentizar Internet (por ejemplo, en teléfonos y tabletas con redes 2G/3G).

En mi opinión, los pros superan a los contras.