Louis Lazaris tweete einen netten Trick für alle Chrome-Nutzer. Man kann mit wenigen Klicks an die data-URI eines Bildes gelangen, ohne dieses umständlich in ein Tool eingeben zu müssen. Als Sass-Nutzer entlockt mir das ein leichtes Gähnen, weil ich Compass die Arbeit erledigen lasse.
Aber nicht immer kann man mit einem Präprozessor arbeiten (wenn man dies überhaupt will) und manchmal möchte man evtl. zu Demozwecken ein Bild aus dem Netz als data-URI einbinden. Louis‘ Trick ist da sehr hilfreich.
Folgende Schritte muss man in Chrome (oder dem neuen Opera) unternehmen:
- Mit der rechten Maustaste das gewünschte Bild in einem neuen Fenster öffnen.
- Die Developer-Tools öffnen (z.B. mit der rechten Maustaste).
- Auf den Link zum Bild klicken.
Voilà, in den Developer-Tools wird die data-URI angezeigt. Diese muss dann nach einem festgelegten Schema notiert werden, das Chris Coyier sehr schön in einem knappen Artikel beschreibt.
In Chrome:
Open any image in a new tab.
Right-click image, inspect element.
Click image link…. Voilà, there's the image's Data URI.
— Louis Lazaris (@ImpressiveWebs) 21. Januar 2014
0 Kommentare
2 Pingbacks