Member Avatar for art_wired

Checked the images on this Nike site today http://www.nikebetterworld.com/ and found they were using multiple images at 1000 + kb per image and the site loaded lickety split!! How is this possible??!! I would love to be able to do this but am having trouble uncovering the info for how to. Any help?!

Thank-you =)

  • 3 Contributors
  • 7 Replies
  • 250 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by art_wired

Dani AI

Generated

observed a common illusion: very large image files can feel fast when delivery and rendering are engineered to hide latency. and pointed toward parts of the answer — infrastructure and image formats — but the complete approach pairs intelligent delivery (edge/CDN, caching, HTTP/2/3) with on-page rendering tricks (low-res placeholders, prioritized hero images, lazy loading) and an automated image pipeline that emits multiple sizes and modern codecs.

Practical, repeatable pipeline: keep the original master, generate several target widths, recompress with tuned encoders (modern JPEG encoders or WebP/AVIF where supported), let the CDN do format negotiation and edge resizing, set long cache lifetimes with fingerprinted filenames, and ensure the largest visible image is either preloaded or shown as a low-quality placeholder while the full file finishes. Example of responsive markup pattern:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="...">

Troubleshooting and measurement: use the browser network waterfall with throttling to see which request blocks LCP, check cache headers and content length with curl -I https://cdn.example.com/photo-800.jpg, and verify cache-hit ratios and TTFB at the edge. If the design truly requires multi-megabyte source images (photography for zoom), rely on progressive/streaming rendering and serve high-res only to devices with sufficient screen density and bandwidth.

Caution: fast delivery doesn’t erase user data costs or accessibility concerns. Prioritize mobile-first constraints, keep critical visuals as small as practical, and treat large images as an exception handled by a full optimization pipeline rather than a general rule. Credit to and for the original pointers; the techniques above bridge those ideas into a production workflow.

Recommended Answers

All 7 Replies

Member Avatar for Member #46692

Assuming all things being equal... The only difference I can see is server bandwidth.

The likes of Nike and other conglomerate organisations, probably have the requisite cash reserves to host their websites on server architectures you and I can only dream of.

Think of it like you ordering 1000 do-nuts. The websites hosting you and I would use consists of one guy behind the counter having to dish up 1000 do-nuts...It would take him a long time right? Now Nike/google probably have 10,000 guys behind the counter. It wouldn't take them any time at all to dish up 1000 do-nuts.

A way to achieve a similar effect would be to dramatically reduce the image quality resolution...and have a preloader which waits to load all the images before bringing up the page.

Edited by Member #46692 because: n/a
commented: very, helpful and easy to understan, thanks!! +1
Member Avatar for art_wired

Thanks God, that makes alot of sense... which sucks for my new web design idea =( lol

Member Avatar for art_wired

Hmmmmm, the link leads to a 403 forbidden page :(

Member Avatar for Member #46692

Yeah not quite sure why that is...but if you do a right click open link in new tab.

Or just go to the smashingmagazine home page.

You should be able to find it.

Edited by Member #46692 because: n/a
Member Avatar for almostbob
Edited by almostbob because: n/a
Member Avatar for art_wired

Yeah not quite sure why that is...but if you do a right click open link in new tab.

Or just go to the smashingmagazine home page.

You should be able to find it.

Ahhh!! Brilliant!!

Thanks again =)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.