Comenzando con el corte frontal:
Cortar imagen + código de código
Con Photoshop
, se generará una gran cantidad de cachés.
Primero cambie la ruta del disco de caché y modifique la unidad predeterminada de px
ajustes preestablecidos de ps:
herramientas, reglas, capas, información, personajes
utilizargobernantePuede recortar mejor la imagen, ni siquiera entre 1 píxel
La herramienta de corte puede generar rápidamente varias imágenes, pero no es muy adecuada
Corta la imagen para generar formato de imagen png, el nombre debe ser significativo
Dibuja color para obtener rgb
CSS Sprite es CSS Sprite , y algunas personas lo llaman CSS sprite. Es una tecnología de fusión de imágenes CSS. El método consiste en fusionar pequeños iconos e imágenes de fondo en una imagen, y luego usar la posición de fondo de CSS para mostrar la parte de la imagen que debe mostrarse. .
La imagen se renderiza utilizando propiedades CSS de fondo y posición de fondo,
Ventajas:
1. Reducir la cantidad de solicitudes al servidor cuando se cargan imágenes de la página web
2. Puede combinar la mayoría de las imágenes de fondo y los íconos pequeños, que son convenientes de usar en cualquier ubicación, de modo que las solicitudes de diferentes ubicaciones solo necesitan llamar a una imagen
3. Mejorar la velocidad de carga de la página
Desventajas:
El mayor problema con CSS Sprite es el uso de memoria.
A menos que la imagen de Sprite esté organizada con mucho cuidado, terminará usando muchos espacios en blanco inútiles.
Afecta la función de zoom del navegador, el navegador necesita hacer un trabajo adicional para corregir el comportamiento de los bordes de estas imágenes.
Se necesitan
3 segundos para optimizar el corte de la imagen , y los usuarios básicamente cerrarán la página antes de que se cargue durante 3 segundos, por lo que la cantidad de imágenes debe ser moderada.
Colores en lugar de imágenes
, la creación de imágenes de sprites,
el uso de iconos de fuentes
El uso de teclas de método abreviado:
eliminar capa eliminar
ctrl + e fusionar capa
v mover
c recortar
Ayuda de corte de imagen: automatización de front-end
MarkDown
TinyPNG
