¿Cuál es el propósito de la etiqueta 1px ?

¿Alguien tiene idea de qué brillante idea se encuentra detrás de colocar una imagen de 1px dentro de diferentes bloques html? Se utilizan en temas de la tienda web Shoper (SaaS) en muchos lugares diferentes como los siguientes. Necesito reducir el número de nodos por razones de SEO y estoy tentado a eliminarlos (hay cientos o miles en una sola página).

El CSS predeterminado es:

.px1 {
    display: none;
    width: 0;
    height: 0;
    display: inline-block;
    border-width: 0;
    vertical-align: middle;
}

y no lo he analizado en relación con la modificación del código de JS, solo con RWD (nada está cambiando).

Ejemplos de HTML:

<button class="addtobasket btn btn-red" type="submit">
    <img src="/libraries/images/1px.gif" alt="" class="px1">
    <span>Comprar</span>
</button>

<div class="boxhead">
    <span>
        <img src="/libraries/images/1px.gif" alt="" class="px1">
        Venta
    </span>
</div>

<li class="parent" id="hcategory_126">
    <h3>
        <a href="/pl/c/bikes/126" title="Bicicletas" id="headercategory126" class="spanhover">
            <span>Bicicletas</span>
            <img src="/libraries/images/1px.gif" alt="" class="px1">
        </a>
    </h3>
    <div class="submenu level2">...</div>
</li>