Maybe I’m just alone in being impressed with what Apple has done here in compressing these images. Having emptied my cache and reloaded the site, that main hero image appears almost instantaneously, and as I scroll I can’t see another load. Looking at the ‘Sources’ with Safari’s inspector, they are all 2x — Retina resolution. And they have to be, because of the fine detail on the screens, which is perfectly crisp. Getting a full screen Retina-resolution jpg to 197Kb without any artefacts or loss of detail is nothing short of f**king amazing! I mean, I was impressed with what RealMac did with the Squash 3, but I don’t think I could get that quality with that compression from it. And who in their right mind puts 39 big high-res images on a page without being very, very confident that’s not going to affect the user experience?
And 3008x798 sounds a bit odd — those dimensions are describing an image four times as long as it is high. What I’m seeing is an image of a MacBook Pro which pretty much fills the screen of my MacBook Pro, which is 2560 x 1600 pixels. (But that’s on the ‘original’ link Stuart gave — on the Source version I see a swirly pink and purple thing, like his screenshot).
I don’t think Apple are doing anything special with the images.
A quick PageSpeed shows they are loading lots of big stuff (see below) and significant gains could be used by adopting an image format that many in the market for Monteray would not be able to view unless they used Chrome or Firefox.
Also I suspect Realmac are only using the same compression as others have for years. Jpg and PNG compression has been around for decades. The clever bit is giving users the choice to view the results side by side, and many I would say don’t know what to look for or wouldn’t recognise an over optimized image. You could use a program such as JpgSnoop to find out what compression they are using.
Apple have their own HEIF (High Efficiency Image File Format) for photos built into the OSs, so are they serving HEIF images to Mac/Safari users? I don’t have the time to investigate now, but I would be curious to know. Basically this page, like so much else on the Apple website, is doing something I wouldn’t dare to do myself, showing a large number of detailed images. (And I’m assuming Stuart used Apple’s images in his replication).
As far as Squash is concerned, I’ve found Realmac’s tool much better at preserving quality than the TinyGIFs and other services I’ve used before, and excellent at squeezing down file sizes. Being desktop based, it’s much easier to play around with the settings and tweak the results than a cloud based service, so this may have something to do with it. It also supports WebP and AVIF formats which, although they’ve been around for some considerable time (like variable fonts!) are ‘new’ to the RW world! (Unfortunately supporting WebP and AVIF is still more than Safari can manage…)
look at the image links - they link to the apple site and the same images which are just JPGs
<img src="https://www.apple.com/v/macos/monterey/c/images/overview/facetime__gaawyqmbyxqy_large.jpg" alt="image" class="" title="">
Yep - i just hot linked to the same images (and video) that apple used. the only exception was the banner image as it had the toolbar visible and didn’t look good in my use of it so cropped that one and included it locally.
The project though was really intended to showcase recreating the layout and functions as opposed to performance etc.
Yes, I understand what Stuart was doing, but what I was interested in is what Apple are doing. Because I can make a page with 39 large, detailed jpegs — with Source, or whatever — but I can’t make it perform like Apple’s page. And Google will crucify me for it.
This is what I’m seeing for the hero image on Apple’s site, and it doesn’t look anything like a link to ‘just a JPG’.
I don’t want to derail this thread with an analysis of Apples site but their hero image is a background image loaded on the parent div. The figure elements are used as part of the animation and lazy loading routine. Apple have been doing exactly this since the launch site for the iMac 5K. (I even made a crude copy of it back in the day OverAni | Duck )
The image they load is actually a png and not a jpg in the hero background
The actual image loaded is decided by JS (the old fashioned manual way of doing it before srcset), the other sized images are then lazy loaded after page render and so are not detrimental to the page speed nonsense analysis
Apple undoubtedly have extremely fast servers, I suspect which is the biggest part of the success.
Have you ever tried moving a site from a normal shared hosting to a dedicated machine VPS and seen what happens to the page speed results? - It costs big money but it makes a huge difference.
This is not usually an option for RW as most sites made with it are budget sites, amateur or hobbyist sites.
Just a note to say that all Source Lifetime Projects Bundle customers should now have access to this latest Monteray project file via the new Projects page on our Academy site. I’ve just migrated all the Source projects over to that site meaning that all projects are readily available for you to download at any time.
Enjoy!
Thanks,
Stuart