格 千格 KiloCell

CSS Shelbitus Generator

Merge small icons, reduce HTTP requests, and speed up web loading

Picture Management
📁

Click or drag pictures here

Support for PNG, JPG, WebP, SVG (multi-optional)

PreviewResult

The resulting Shelbitus will be shown here

GenerateOptions
2px

What's CSS Shelby? Why use it?

In the history of Web performance optimization, the government has been able to provide the best possible information to the public. CSS Schretes It is a landmark technology. In short, it merges multiple small icons or background maps into a large chart, then through CSS background-image and background-position attribute to locate the particular part of the display.

Specific issues addressed: HTTP request bottlenecks

In the HTTP/1.1 age, browsers limit the number of simultaneous requests for the same domain name (usually 6-8). If there's a page there's a page Fifty small icons, which require multiple batches of requests, will result in significant network costs and delays.

  • Reduction in number of connections: 50 requests were converted into 1 request, significantly reducing server pressure.
  • Increase response speed: Eliminate time consumption of multiple handshakes.
  • Volume optimization: Individually merged images are usually smaller than the total size of 50 separate images, as duplicate header information is reduced.

2. How can it be used in modern development?

Although HTTP/2 Multi-routing has been introduced, reducing the penalty for multiple requests, but the Schablito still has an irreplaceable advantage in some contexts:

  • Preloading advantage: Loads all UI icons at once to avoid seeing images flashing or blanks while interactive (e.g. Hover).
  • Manage easy: For decorative UI elements that are not frequently replaced, uniform management is easier to maintain than scattered.
  • Compatibility: Even in a very poor web environment, the UI is guaranteed by the UI.

3. Use of advice and techniques

After using this tool to generate codes, it is recommended to set a common base class for all elements using the Schaipogram:

.icon {
  display: inline-block;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
}

Then use the given class name generated (e.g. .icon-home ) To control the position. In addition, for the retina retina screen, it is recommended that a two-fold schizophrenia map be generated and used background-size Zoom.