How to Slash Front‑End Image Requests by 80% with Iconfont, Sprites, and Lazy Loading

Retina Image Optimization

Retina (2x) images are used for high‑resolution displays. For content images the srcset attribute is used, and for background images the image-set property is applied.

<img src="images/[email protected]" srcset="images/[email protected] 1x, images/[email protected] 2x" alt="">

.chain_item_icon {
    background-image: -webkit-image-set(url("images/[email protected]") 1x, url("images/[email protected]") 2x);
    background-image: image-set(url("images/[email protected]") 1x, url("images/[email protected]") 2x);
}

Pure‑Color Icons and Iconfont

Decorative single‑color icons (e.g., navigation titles) are converted to iconfont glyphs. Iconfont provides vector graphics that can be styled via CSS for size and color, eliminating raster images and reducing HTTP requests.

Non‑Pure‑Color Image Strategies

For multi‑color images the project adopts srcset for content images and image-set for background images. Media queries are avoided because >95% of the user base uses Windows with standard‑definition screens, while high‑resolution screens are mainly on macOS browsers that already support these attributes.

Font Optimization with Fontmin

Design‑type fonts are delivered via @font-face. To reduce the large original size (≈2 MB) and mitigate rendering differences, the Fontmin tool extracts only the required glyphs, producing a font file of about 11 KB (≈99% reduction).

Image Resource Optimization

The legacy homepage made 40 HTTP requests, 31 of which were images (77% of total). Many images could have been merged, resulting in at least 11 unnecessary requests (≈27% extra).

Reducing Extra Requests

Image merging – compatible and cacheable but maintenance‑heavy.

Iconfont – vector, cacheable, suitable for pure‑color icons; modest file size.

Base64 – eliminates requests but cannot be cached and adds CPU/memory overhead.

In the new homepage 70 image assets were reduced to 14 requests: 49 pure‑color icons handled by Iconfont, 13 low‑color images merged, and the rest omitted, achieving an 80% reduction in request count.

On‑Demand Loading

Only 8 of the 14 total images are needed for the first screen. By applying lazy loading to off‑screen assets, first‑screen image utilization rises from 35% to 60%, a 70% improvement.

Placeholder Images for Better Loading Experience

Low‑weight placeholder graphics are displayed while the real image loads, preventing blank areas and default error icons and giving users a visual cue that content is forthcoming.

Progressive Enhancement for Animations

Animations are first implemented with a basic JavaScript (jQuery) fallback. When the browser supports CSS3 transforms, the script switches to CSS3 transitions for smoother effects.

function imgChange(opt) {
    if (supports('transform')) {
        $imgList.eq(opt).addClass('active').css('opacity', '1')
               .siblings().removeClass('active').css('opacity', '0');
    } else {
        $imgList.eq(opt).stop().animate({opacity: '1'}, 800)
               .addClass('active')
               .siblings().stop().animate({opacity: '0'}, 800)
               .removeClass('active');
    }
}

Tab‑Focus Optimization

Removing the default outline on links breaks keyboard navigation. Instead, a :focus style is added to preserve visual feedback while keeping the outline removed for aesthetics.

.mod_hd_nav_sub_col a {
    color: #fff;
    text-decoration: none;
    outline: none;
    &:hover, &:focus {
        color: #ffe400;
    }
}

Event handlers are also bound to focus and blur to emulate mouse interactions for keyboard users.

Static Resource Publishing

The legacy site used overwrite‑based deployment, causing cache‑stale issues. The new site adopts MD5‑hashed filenames for non‑overwriting releases, ensuring reliable cache busting.

<script src="//labs.qiang.it/pc/jcloud/gb/js/lib.min_2f4dab0c.js"></script>
<script src="//labs.qiang.it/pc/jcloud/gb/js/gb.min_b599b860.js"></script>
<script src="//labs.qiang.it/pc/jcloud/home/js/index.min_9d957a15.js"></script>

These optimizations—retina image handling, iconfont conversion, font subsetting with Fontmin, request reduction, lazy loading, placeholder usage, progressive animation enhancement, keyboard‑focus styling, and MD5‑based static asset publishing—demonstrate a systematic front‑end engineering approach that dramatically improves page performance and user experience.