拥有相同尺寸的图像来创建精灵是否很重要？

Question

我一直致力于一个拥有大约1000张图像的大项目，甚至可能会增加。因此，为了减少HTTP请求的数量，我创建了一些精灵，每个精灵大约有100个图像。但是当我在项目中使用这些sprite时，生成的scss类属性不能正常工作。

假设我有精灵的以下生成的css：

.svg-main{
    background: url("sprites/main.sprite.svg") no-repeat;
}

.svg-icon{
    background-position: 0 0;
}

.svg-icon-dims {
    width: 30px;
    height: 33px;
}
.svg-home {
    background-position: 0 7.741935483870968%;
}

.svg-home-dims {
    width: 33px;
    height: 33px;
}

.svg-info-gray {
    background-position: 0 15.483870967741936%;
}

.svg-info-gray-dims {
    width: 36px;
    height: 36px;
}

当我参考图像时，家的顶部被切断，信息灰色图标的顶部显示出来。因此，显而易见的解决方案是明确更正填充和宽度和高度属性。而且我知道这是因为精灵中使用的图像尺寸不均匀。即使我们在一个精灵中拥有相同尺寸的所有图标，也会出现此问题。

那么，如何解决这样的问题呢？那么，在创建精灵时，拥有相同尺寸的图像是否重要？有没有其他方法来简化这样的过程。

任何建议都会非常感激。

注意：我使用svg-sprite作为svg图像，spritesmith作为png / jpeg图像。任务选手 - Gulp

谢谢。