Un artículo sobre la renovación de apartamentos , sobre el uso eficiente de los recursos gráficos de los dispositivos modernos. Desde relojes inteligentes hasta televisores hasta la pared.
La historia de cómo insertar imágenes de fondo que se repiten en la página, para que todos estén bien.
Bueno, ¿estás listo para jugar? Luego condujo
Introductorio
Hubo una tarea para crear una página del sitio con una imagen repetida.
¿Cómo vamos a decidir?
Nivel 1 primitivo trillado
La forma más fácil de utilizarlo para una gran cantidad de tipos de letra es tomar la imagen de fondo de una vez (con frecuencia el formato png, ya que está configurado de forma predeterminada en Figma y Avocode) y colocarlo en el bloque mediante background-image;
(* bueno, ¿no eres así, mi joven lector?)
body { background: url('bg.png') 50% 50% no-repeat; background-size:contain; }
Si el desarrollador tiene un poco más de experiencia y sabe que jpg está comprimido, como regla, mejor que png, entonces el fondo estará en formato jpg.
Nivel 2 no me importa el rendimiento
Si el diseñador de diseño no se preocupa por el rendimiento de la página desarrollada, y sabe que en este lugar puede ahorrar significativamente el tráfico de usuarios, puede aislar el patrón (la parte repetitiva del fondo) de esta imagen si tiene suerte.
Si el diseño se implementó en PhotoShop, entonces debe recortar. Porque el fondo está establecido por un elemento inseparable allí.
Ejemplo de tomar un fondo repetitivo de Avocode
En Figma, esto se implementa un poco más fácil. Aunque dependerá de cómo el diseñador creó este fondo para usted.
* Quien quiera jugar, dejaré mi ejemplo para descargar.
En el ejemplo, hay dos opciones con patrones png y svg, que se discutirán más adelante.
Ok, ahora en lugar de una imagen de fondo grande, tenemos un elemento de mosaico repetitivo (mosaico CSS).
body { background: url("bg.jpg"); }
Bien hecho, bien hecho. Ahora, en lugar de (586kB), el usuario toma todo del servidor (~ 24kB); Beneficio!
Nivel 3 te exprimiré al máximo
Pensemos, ¿es posible mejorar la situación de alguna manera? Hmm, pero la imagen no es complicada, ¿tal vez puedas adelantarla en un vector?
Y luego el demonio de la tentación se escondió.
Con el objetivo de lo mejor, a menudo estropeamos al buen William Shakespeare
Cuando esto no se hace racionalmente, o no se hace nada:
- Tienes un patrón repetitivo complejo. Tomará n horas volver a dibujarlo, y si también está estresando al diseñador por esta tarea, entonces su karma definitivamente disminuirá.
- Hay sombras o elementos con desenfoque en la imagen, y no acepta rechazarlos.
* Aquí es necesario explicar
Si exporta gráficos SVG, suponga que desde Figma o Illustrator, pero no lo codifique usted mismo en el editor, lo más probable es que los elementos de desenfoque o sombra se inserten en SVG en formato base64 y esto de ninguna manera mejorará su rendimiento, ya que tal archivo, de hecho, puede pesar más que el formato jpg analógico.
Siempre verifique lo que le ofrecen. Por supuesto, algunos de estos elementos también se pueden crear con código usando el filtro de etiquetas, uso, objeto ... pero para trabajar con ellos necesitas una habilidad bombeada, lo cual es raro.
Ok, creemos un SVG y veamos qué sucede.
* En aras de la pureza del experimento, las imágenes mostradas no fueron comprimidas por utilidades de terceros ni guardadas en un 100% de calidad usando PhotoShop, Illustrator y Avocode.
Ok, nuestro svg es menor que jpg / png de la versión original.
Esto no es sorprendente, ya que en él dejamos solo los colores básicos que vimos, y no los que aparecen en la unión de los objetos con desenfoque.
La diferencia entre los tamaños de los archivos png / jpg no parece muy significativa, y comienza a desempeñar un papel solo si la imagen es grande.
* Prefiero png y establezco el color de fondo en la propiedad de color de fondo, pero esto es de la tarea.
Estaba algo confundido de que el png / jpg resultante creado a partir de svg era más pequeño que el tamaño SVG (incluso despejado de la basura del sistema (pattern-bg_cleared.svg) usando SVGO )
Pero luego, me di cuenta de que si quería reducir / aumentar el tamaño del mosaico de fondo para dispositivos móviles o televisores, esto requeriría conectar nuevos patrones (pattern-bg_min) y SVG seguirá siendo el mismo (15kB - siempre), y no hay desenfoque observado
Esta es una ventaja importante, especialmente si el usuario ve la página desde un teléfono costoso con una buena resolución, y el diseñador de diseño, a favor de Google Page Speed, picó todos los gráficos antes de que aparecieran los chacales. Aquí está ahorrando =)
body { background-image: url(picture.svg); }
Se ve bastante familiar.
Ok, complicate. Suponga los estilos que el cuerpo incluirá en CSS crítico, luego rendericemos el vector directamente en los estilos. * Para no ensuciar la página, tomaré un patrón diferente, uno más pequeño.
body { background: url:(' <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-2A6 6 0 108 2a6 6 0 000 12zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="#000" fill-rule="evenodd"/></svg>'); }
Había mucho CSS y dejó de funcionar.
Entonces, ahora es necesario codificar correctamente todo esto. La inserción de SVG sin cifrar solo es compatible con los navegadores Webkit. Gracias, Julia Bukhvalova, por un útil recurso de codificación que nos ayudará con esto.
body { background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E"); }
Ejemplos de ilustración, Cómo SVG puede empaquetarse en CSS.
El cursor es SVG
Todo parece estar bien, pero ¿estoy seguro de que usaré este patrón en todas las páginas de mi sitio? ¿Seguramente debe introducirse en CSS crítico, o tal vez sería más correcto usar CSS conectado a CSS normal y esperar que el navegador lo almacene en caché? Tal vez de todos modos, ¿puede conectarlo solo para ciertas páginas? Alguien inteligente dijo que el código colocado en HTML es recopilado por el navegador más rápido y tiene una mayor prioridad en términos de velocidad de representación. Tantas preguntas ... tienes que intentarlo.
Nivel 4 te exprimiré todos los jugos
Primero, crearemos un elemento svg que tendrá una altura y un ancho del 100% de la unidad exterior para que ocupe cualquier contenedor en el que lo coloquemos.
<svg width="100%" height="100%"> </svg>
Para crear un patrón, tenemos que ponerlo en la etiqueta svg defs (definición), por ejemplo así:
<svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg>
Ya no está mal, entonces debe agregar atributos con la ayuda de los cuales podemos interactuar con el patrón y de alguna manera llamarlo.
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> </pattern> </defs> </svg>
Le daremos un identificador para que pueda ser referenciado más tarde, también le indicaremos las coordenadas iniciales de la referencia X e Y, el ancho y la altura que configuramos en el editor de gráficos, establezca el alcance de ViewBox (puede tomarlo desde el svg terminado)
... y establezca el atributo patternUnits en userSpaceOnUse (esto define un sistema de coordenadas, del que puede obtener más información sobre MDN )
En resumen, con patternUnits = "userSpaceOnUse", la forma en el lienzo SVG está completamente llena de mosaicos de patrones. Si el último mosaico no cabe completamente en longitud o ancho, entonces se recorta.
Ahora tenemos que decidir la imagen que se repetirá.
<svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"> </circle> </pattern> </defs> </svg>
Todo está casi listo, queda por llamar a nuestro patrón en un determinado objeto, bueno, por ejemplo, crear un área rectangular para el relleno.
<svg width="100%" height="100%"> <defs> < pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg>
Puede ver que el atributo de relleno (que generalmente contiene el color de relleno ahora apunta a una URL que contiene el identificador de nuestro patrón recién definido: fill = "url (# pattern-bg)".
Nuestro patrón repetido ocupa todo el espacio en ancho, pero también me gustaría que en altura todo ocupara. Para hacer esto, envuelva nuestro svg con una altura de altura: 100vh;
<div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>
ahora está bien Por supuesto, en la etiqueta debes intentar insertar tus imágenes más serias, pero te señalé en la dirección correcta.
Este método de inserción, a diferencia del método a través del fondo, le permite controlar el detalle de los elementos SVG. Hay una cierta libertad de qué dar al usuario y qué no. Y si hay un deseo de experimentar y agregar un poco de JS, entonces también puede lograr la transformación (cambio de formas).
De los problemas de este método para insertar un mosaico repetitivo, descubrí que no hay forma (bueno, o no pude encontrarlo, y aquellos que saben escribirán en los comentarios) cómo cambiar el tamaño del mosaico al cambiar el tamaño de la pantalla del navegador. De hecho, los atributos de ancho / alto de la etiqueta del patrón son responsables de esto, pero no pude alcanzarlos a través de CSS y medios. Bueno, siempre hay JS si realmente necesita
Trucos No conozco los gráficos, pero quiero tocar los hermosos
Si por alguna razón no sabe cómo dibujar un elemento repetitivo de un patrón en un editor gráfico, o no tiene tiempo para esto. Aquí hay sitios con soluciones listas para usar en las que las buenas personas comparten cosas buenas con el mundo.
* un pequeño suplemento (¿dónde está sin porno hoy en día?)
https://svgporn.com/
Soporte de equipo ¿Qué pasa con el soporte?
Al comienzo del artículo escribí que todo el mundo estará bien, lo confieso, fue un engaño.
Los usuarios de IE de sus esfuerzos no verán el soporte de esta etiqueta para IE y no vinieron, y no vendrán, pero de lo contrario con SVG no todo es tan malo, incluso hasta 9 IE caniuse.com
También recomendaría verificar el trabajo terminado en Firefox, a veces hay incidentes.
Para que los fanáticos lean la documentación, también dejen un par de enlaces
https://developer.mozilla.org/en/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/patternhttps://developer.mozilla.org/en/docs/Web/SVG/Tutorial/PatternsPara aquellos que hojean hasta el final, les dejo mi ejemplo de cómo divertirse con el SVG incorporado, desde el principio del artículo.
Hagamos que la web sea mejor.PD: Un agradecimiento especial a Alexandr_TT y su sitio https://svg-art.ru/ por promover SVG en la gran Internet de habla rusa.