Si a principios de mes os explicaba una técnica para ahorrar peticiones HTTP con las imágenes y CSS mediante el uso de "sprites" (imágenes pegadas unas con otras y llamando a cada imagen de forma individual con CSS) ahora toca mencionar CSS Sprite Generator.
CSS Sprite Generator es una herramienta online en la que subimos un ZIP con todas las imágenes, le decimos por donde cortar y nos generará las imágenes y el código CSS.
Esto nos resulta inútil si tenemos que cortar imágenes distintas pero si se trata de imágenes muy parecidas (los famosos iconos) nos ahorrará mucho trabajo. La página también me ha servido para conocer la única incompatibilidad importante con esta técnica:
Opera (at least as far as version 9.0) won't recognise a background position greater than 2042px or smaller than -2042px using that boundary value instead.
Es decir, que no podemos usar imágenes de más de 2042 pixeles ya que el
background: ... -2042px no lo reconocerá. Aunque hay que ser basto
para hacer cargar una imagen de 2042px a los usuarios: el diseño
de la página no suele tener tantas imágenes :-P
Comentarios