Erste Schritte mit dem Front-End-Schneiden:
Bild + Code ausschneiden
Mit Photoshop
wird eine große Anzahl von Caches generiert.
Ändern Sie zuerst den Pfad der Cache-Festplatte und ändern Sie die Standardeinheit von px
ps-Voreinstellungen:
Werkzeuge, Lineale, Ebenen, Informationen, Zeichen
verwendenHerrscherKann das Bild besser zuschneiden, auch nicht zwischen 1 Pixel
Das Schneidewerkzeug kann schnell mehrere Bilder erzeugen, ist jedoch nicht sehr geeignet
Schneiden Sie das Bild aus, um ein PNG-Bildformat zu generieren. Der Name sollte aussagekräftig sein
Zeichne Farbe, um RGB zu erhalten
CSS Sprite ist CSS Sprite , und einige Leute nennen es CSS Sprite. Es handelt sich um eine Technologie zum Zusammenführen von CSS-Bildern. Die Methode besteht darin, kleine Symbole und Hintergrundbilder zu einem Bild zusammenzuführen und dann die Hintergrundpositionierung von CSS zu verwenden, um den Teil des Bildes anzuzeigen, der angezeigt werden soll. .
Das Bild wird mit den Eigenschaften CSS-Hintergrund und Hintergrundposition gerendert.
Vorteile:
1. Reduzieren Sie die Anzahl der Anfragen an den Server beim Laden von Webseitenbildern.
2. Kann die meisten Hintergrundbilder und kleinen Symbole zusammenführen, die an jedem Ort bequem zu verwenden sind, sodass Anfragen von verschiedenen Orten nur ein Bild aufrufen müssen.
3. Verbessern Sie die Geschwindigkeit beim Laden von Seiten
Nachteile:
Das größte Problem bei CSS Sprite ist die Speichernutzung.
Wenn das Sprite-Image nicht sehr sorgfältig organisiert ist, werden Sie am Ende viele nutzlose Leerzeichen verwenden.
Beeinflusst die Zoomfunktion des Browsers, muss der Browser einige zusätzliche Arbeiten ausführen, um das Verhalten der Kanten dieser Bilder zu korrigieren
Es dauert
3 Sekunden , um den Bildausschnitt zu optimieren , und Benutzer schließen die Seite grundsätzlich, bevor sie 3 Sekunden lang geladen wird. Daher sollte die Anzahl der Bilder moderat sein
Farben statt Bilder
, Erstellung von Sprite-Bildern,
Verwendung von Schriftsymbolen
Verwendung von Tastenkombinationen:
Ebene löschen Löschen
Strg + E Ebene zusammenführen
v
Zuschneiden verschieben
Bildausschnitthilfe : MarkDown
TinyPNG
Front-End-Automatisierung
