Has anyone an idea what bright idea may lie behind placing 1px image inside different html blocks? They are used in Shoper webstore (SaaS) themes in many different places like those below. I need to reduce nodes count for SEO sake and I'm tempted to remove them (they are in hundreds or thousands on single page).

Default CSS is:

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

and I haven't analyzed it against JS code modification, only with RWD (nothing is changing).

HTML examples:

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

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

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