Normal image must be 50% of the Retina image size.

Required size is {{s.msg.invalidSize.requiredWidth}}px x {{s.msg.invalidSize.requiredHeight}}px.

Retina CSS Sprite Generator

Mode
  • Retina
  • Normal

Sprites reduce bandwidth used to request images from a server and help speed up your page load time by combining icons, logos, and other static images into a single file.

Retina and other double density pixel displays have to enlarge your images to display at the correct size. This causes the images to appear blurry.

This sprite generator creates sprites that look good on both Retina and normal screens. Using CSS, your website can easily use a normal size sprite for regular displays and a 2x large sprite for high density displays to prevent blurring.

Add your 2x large Retina images below to begin. If you need more info, each panel has its own help button in the upper right corner.

Images

?

Add Images

The Images panel is divided into two boxes. The first larger one is where you add and sort the images that go into the generated sprites. For most browsers, you can simply drag the images into the box. If your browser does not support dropping files, you can also click the box to open a file dialog.

The images you add should be 2x larger than the actual size of the image you want to display on your webpage. In other words, add only your Retina images and the normal size sprite will be generated automatically.

If there are already images in the box, do not drop new images onto them or click them to add new files. This action has a different function described next.

Add Pre-made Normal Images

Normal sized images are automatically generated for you. However, you can also choose to supply pre-made normal sized images per Retina image. This is useful if the built in image scaling is not satisfactory for a particular image.

To specify a normal sized image for a particular Retina image, click the Retina image and select its counterpart from the file dialog or simply drag the normal image onto the Retina image. The size of the image selected must be 50% of the Retina image size or the operation will not be allowed. To account for half pixels, the width and/or height of the image can be up to 1px smaller than 50% of the Retina image.

Arrange Images

You can arrange the order of the images in your sprite by dragging the images in the large image box. This is less effective when the sprite orientation is set to 'Packed' and the images are of different sizes.

Remove Image

If you need to remove an image, drag it to the second smaller box beneath the main image box.

Sprites

?
Spacing
  • 0px
  • 1px
  • 2px
  • 3px
  • 4px
  • 5px
  • 6px
  • 7px
  • 8px
  • 9px
  • 10px
Padding
  • 0px
  • 1px
  • 2px
  • 3px
  • 4px
  • 5px
  • 6px
  • 7px
  • 8px
  • 9px
  • 10px
Orientation
  • Vertical
  • Horizontal
  • Diagonal
  • Packed
  • Force the pixel width of the icons.
  • Force the pixel height of the icons.

Normal

  • Size: {{spriteData.w}}px x {{spriteData.h}} px
  • Volume: {{spriteData.w * spriteData.h | number:0}}
  • Compr: {{spriteData.compr | number:0}} (estimate)

Retina

  • Size: {{retinaSpriteData.w}}px x {{retinaSpriteData.h}} px
  • Volume: {{retinaSpriteData.w * retinaSpriteData.h | number:0}}
  • Compr: {{retinaSpriteData.compr | number:0}} (estimate)

Primary Controls

  • Spacing The number of pixels of empty space between each icon. The value applies to the normal size sprite. Retina sprite spacing is double the selected value.
  • Padding The number of pixels of empty space around each icon. This is different from spacing in that the added space is part of the icon. Retina sprite padding is double the selected value.
  • Orientation The orientation of the sprite. 'Vertical' places sprites vertically, 'Horizontal' places them horizontally, 'Diagonal' places icons diagonally starting from the top left and ending at the bottom right. 'Packed' attempts to arrange the icons in the smallest possible container.

Icon Size

The 'Icon Width' and 'Icon Height' text inputs allow you to force all icons to the same dimensions. Leave these blank to use the icons actual size. Both values apply to the normal size sprite. The Retina sprite values are doubled.

When size is forced, the icons aspect ratio is maintained. If the icon is smaller than the forced size, the icon is simply centered. If the image is larger than the new size, it is resized to fit the new dimensions.

Sprites

The sprites generated can be downloaded by right-clicking on them and choosing to save them.

Above each sprite, the size, volume and estimated compression are displayed:

  • Size The size of the corresponding sprite in pixels (width x height).
  • Volume The pixel volume of the sprite. The value is determined by multiplying width and height.
  • Compr The estimated compression. This value can be used to compare different sprite orientations to see which is most likely to yield a smaller file size after compression. Smaller values are better. The value is determined by the following: volume * (compressedJpegSize / uncompressedJpegSize)

Stylesheet

?
Type
  • CSS
  • SCSS
Indent
  • 2 spaces
  • 4 spaces
  • 6 spaces
  • 8 spaces
  • The name of the retina image file.
  • The name of the normal size image file.
  • The name of the image file.
  • The name of the sprite CSS class.
  • A prefix to attach to all icon class names.
  • A suffix to attach to all icon class names.
.{{g.styles.spriteName || 'icon'}} {
background: url('{{g.styles.imageName || 'icons'}}.png') no-repeat top left;
width: {{spriteData.cmw}}px;
height: {{spriteData.cmh}}px;
}
.{{g.styles.spriteName || 'icon'}}.{{g.styles.prefix}}{{item.name}}{{g.styles.suffix}} {
background-position: {{item.x !== 0 ? '-' : ''}}{{item.x}}{{item.x !== 0 ? 'px' : ''}} {{item.y !== 0 ? '-' : ''}}{{item.y}}{{item.y !== 0 ? 'px' : ''}};
width: {{item.w}}px;
height: {{item.h}}px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.{{g.styles.spriteName || 'icon'}} {
background: url('{{g.styles.retinaName || 'icons-retina'}}.png') no-repeat top left;
background-size: {{spriteData.w}}px {{spriteData.h}}px;
}
}

Primary Controls

  • Type The stylesheet output type. The default is 'CSS'. You can also select 'SCSS' if you would prefer Sass SCSS output.
  • Indent The indent spacing to use.

Copy to Clipboard

You can copy the stylesheet to your clipboard easily by pressing the button located just above the generated stylesheet. If your browser does not support copy operations, you can still manually copy the text by right-clicking the selected text and choose 'Copy'.

Advanced

  • Retina Image Name The name of the Retina sprite file. Leave blank for default. The default value is 'icons-retina'.
  • Normal Image Name The name of the normal sprite file. Leave blank for default. The default value is 'icons'.
  • Sprite Class Name The CSS class name of the sprite. Leave blank for default. The default value is 'icon'.
  • Class Prefix The prefix to attach to all icon class names. The icon class name is the name of the file.
  • Class Suffix The suffix to attach to all icon class names. The icon class name is the name of the file.

Preview

?
Background

Normal

Retina

About Preview

The Preview panel shows each icon as it would appear using the generated sprite and CSS styles. You can use this to verify that the sprites are correct.

Normal

These are sprites using the Normal screen sprite image. If you are viewing this page through a Retina screen, they may appear blurry.

Retina

These are sprites using the Retina screen sprite image. They should appear sharp on Retina screen displays and might appear slightly blurry on normal screens due to the browser resizing them.

Retina CSS Sprite Generator by JCThePants.
Icons by Designmodo.