{"id":973,"date":"2014-09-26T21:22:26","date_gmt":"2014-09-26T19:22:26","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=973"},"modified":"2016-01-20T13:01:04","modified_gmt":"2016-01-20T12:01:04","slug":"retina-sprites","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/retina-sprites\/","title":{"rendered":"Retina Sprites"},"content":{"rendered":"

Updated June 3 2015<\/strong><\/p>\n

1. Make sure you have all png images in both the normal and the retina version.<\/p>\n

2. Make sure the retina versions are exactly 2x bigger than the normal versions<\/p>\n

3. Create 2 zip files. 1 for the normal images and 1 for the retina versions<\/del><\/p>\n

4. Got to\u00a0http:\/\/spritegen.website-performance.org\/<\/a><\/p>\n

5. Upload the normal zip file. Choose offset of 25px.\u00a0Copy the css and download the file<\/del>
\n Update: because of some Safari bug it may be better to use 50px for the normal and 100px for the @2x sprite<\/del><\/p>\n

Drag the images to the generator. Choose padding of 5px. Choose a vertical layout. Click downloads and save the sprite and the stylesheet.<\/p>\n

6. Upload the retina zip file. Choose offset of 50px.<\/del>\u00a0Do the same for the retina images, but choose a padding of 10px. Copy the css and download the file<\/p>\n

Note 1:<\/strong><\/p>\n

Safari has a problem with repeating background images<\/a>. Fortunately this can be easily solved by specifying a large enough horizontal offset value (configurable).<\/p>\n

Note 2:<\/strong>
\n<\/strong>If the @2x sprite is larger than 2000px the generator creates a new column, which we do not want<\/span>.<\/p>\n

From the website: “Opera 9.0 and below have a bug which affects CSS background offsets less than -2042px. All values less than this are treated as -2042px exactly. With this option is selected CSS Sprite Generator creates a new column each time the vertical offset reaches -2000px.”<\/p>\n

So it is best to uncheck the option ‘wrap columns for Opera bug’ (who uses Opera anyway? Let alone < 9.0).<\/p>\n

7. You may want to optimize the downloaded sprites.<\/p>\n

8. Add the css rules to _sprites.less (or something).<\/p>\n

9. Change the stitches rule:<\/p>\n

.stitches-sprite(@x: 0, @y: 0, @width: '', @height: '') {\r\n  background-position: @x @y;\r\n  width: @width;\r\n  height: @height;\r\n}\r\n<\/pre>\n
Also add an extra rule:<\/p>\n
.sprite-backgroundsize(@img-w, @new-w, @sprite-width, @sprite-height){\r\n background-size: (@new-w\/@img-w)*@sprite-width (@new-w\/@img-w)*@sprite-height;\r\n}<\/pre>\n
And this rule<\/p>\n
.sprite-2x {\r\n  background-image: url(..\/img\/spritesheet_2x.png);\r\n  background-repeat: no-repeat;\r\n  display: block;\r\n}\r\n<\/pre>\n
And remove the background sizes form the icon rules:
\nSo this:<\/p>\n
.sprite-icon-1 {\r\n  .stitches-sprite(-5px, -175px, 24px, 24px);\r\n}\r\n<\/pre>\n
becomes:<\/p>\n
.sprite-icon-1 {\r\n  .stitches-sprite(-5px, -175px);\r\n}\r\n<\/pre>\n
 <\/p>\n
10. Now you can add a background image like this:<\/p>\n
General rule:<\/p>\n
.icon {\r\n  .sprite();\r\n  @media\r\n  (-webkit-min-device-pixel-ratio: 2),\r\n  (min-resolution: 192dpi) {\r\n    .sprite-2x();\r\n  }\r\n  background-size: \/\/USE SIZE OF SPRITE HERE!\r\n  height: 24px;\r\n  width: 24px;\r\n}\r\n<\/pre>\n
Specific icon:<\/p>\n
icon-1 {\r\n  .sprite-icon-1()\r\n}\r\n<\/pre>\n
 <\/p>\n
Done. If you ever need to change or add images to the sprites, you will only need to change the css rules in _sprites.less<\/p>\n","protected":false},"excerpt":{"rendered":"
Updated June 3 2015 1. Make sure you have all png images in both the normal and the retina version. 2. Make sure the retina versions are exactly 2x bigger than the normal versions 3. Create 2 zip files. 1 for the normal images and 1 for the retina versions 4. Got to\u00a0http:\/\/spritegen.website-performance.org\/ 5. Upload […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[20],"tags":[47,77,78],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/973"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=973"}],"version-history":[{"count":12,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/973\/revisions"}],"predecessor-version":[{"id":1413,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/973\/revisions\/1413"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}