Ein Image-Sprite fasst kombinierte Bilder in einer einzigen Bilddatei zusammen. Der Vorteil der Verwendung eines Bild-Sprites besteht darin, dass es die Anzahl der erforderlichen HTTP-Anfragen reduziert, was die Leistung einer Webseite verbessern kann.
Bei der Verwendung eines Bild-Sprites werden die einzelnen Bilder in einer einzigen Datei zusammengefasst und dann mit CSS auf einer Webseite angezeigt. Der CSS-Code teilt dem Browser mit, wo die einzelnen Bilder innerhalb der Datei angezeigt werden sollen. Image-Sprites können für jedes Bild verwendet werden, auch für Symbole, Schaltflächen und Hintergründe.
Wie erstellt man ein Bild-Sprite?
Um ein Bild-Sprite zu erstellen, benötigen Sie zwei Bilder, die Sie zu einem kombinieren möchten. Sie können dies mit einem Bildbearbeitungsprogramm tun, aber wir empfehlen Photoshop.
Sobald Sie Ihre beiden Bilder haben, öffnen Sie sie beide in Photoshop. Wählen Sie dann das Menü "Ebene" und klicken Sie auf "Neu". Dadurch wird eine neue Ebene erstellt, die Sie nach Belieben benennen können. Wir werden sie "Sprite" nennen.
Ziehen Sie nun eines der Bilder auf die Ebene "Sprite". Positionieren Sie das Bild mit dem Verschiebewerkzeug so, dass es das andere Bild vollständig überdeckt. Wählen Sie dann das Werkzeug "Radiergummi" und löschen Sie alle Teile des ersten Bildes, die überstehen.
Wählen Sie schließlich das Menü "Datei" und klicken Sie auf "Speichern unter". Wählen Sie einen Dateinamen und ein Format für Ihr neues Sprite-Bild!
Vorteile der Verwendung eines Image-Sprites
Bild-Sprites sind eine gute Möglichkeit, die Leistung Ihrer Website zu verbessern. Sie können dazu beitragen, die Anzahl der HTTP-Anfragen zu verringern, die Größe Ihrer Seiten zu reduzieren und die Gesamtgeschwindigkeit Ihrer Website zu verbessern.
Image-Sprites haben viele Vorteile, aber diese drei gehören zu den wichtigsten. Wenn Sie die Leistung Ihrer Website verbessern wollen, ist die Verwendung von Bild-Sprites ein guter Anfang.
Schlussfolgerung
Ein Image-Sprite ist eine Sammlung von Bildern, die in einer einzigen Datei zusammengefasst sind. Sie werden häufig im Webdesign verwendet, um die Seitenleistung zu verbessern, indem die Anzahl der zum Laden einer Seite erforderlichen HTTP-Anfragen verringert wird. Eine weitere gute Möglichkeit, Sprites zu verwenden, ist die Erstellung eines responsiven Layouts. Das bedeutet, dass Sie alle Ihre Bilder als ein einziges Bild erstellen und dann die Größe und Positionierung an ein bestimmtes Gerät anpassen.
