Hi, I’m putting the finishing touches to my first Source site and tweaking the speed. I’m already blown away with 0.660ms load times and 98 & 100 on pagespeed insights. I want to get the images as high res as poss and maintain that speed. I’ve a few quick questions:
Is it best to warehouse the images rather than house them locally? If so, is this to do with speed?
I read that its best to add a Custom Attribute for the dimensions of each image. If I’m loading 4 different versions of the same image, do I need a custom attribute for each size? If so, where do I place this in the Source Image stack? I can only see one space - or do I put them all there separated by commas?
I’m currently compressing jpegs in photoshop. Is it better to use a dedicated compression tool like Squoosh?
Is it worth switching to webp format instead? I’ve not used them before. I’m not sure if the extra work is going to be worth it, if I’m already getting good speeds + my site isn’t image heavy.
I don’t think the extra effort would be worth it though i know @Webdeersign would be pushing you to get 100s across the board ;)
i personally only think it really matters if you are re-using the same image in multiple places. if that is the case then warehousing will be better.
Is it the same image / same aspect ratio the same for all versions of the image? if so then just add the width and height values of for the size that it appears on a desktop. It doesn’t affect the display of the image it is just so that the browser knows how much space it will take up. If it’s not the same aspect ratio then i wouldn’t bother adding the values at all - i don’t think there is a way to state different ratios for different devices.
@Jamie Don’t even think about sleep or eating until you get 100.
Actually you are almost there which reinforces what I have been banging on about. You don’t need webP image in a Source site to get 100% but you can continue to speed the site up by using webP images. It all depends on the number and type of images, but using webP images can potentially save considerable download time.
You must provide a fallback image so use the Source Image Plus stack to enter a jpg/png and also a webP image.
Photoshop is not up to the job of optimising for web use IMHO. Yes, use Squoosh (don’t confuse with Squash) and optimise a jpg or png image and then also create a new webP version, with 1 more click. You can see the optimised Squoosh version using a slider but I have found that 75% is pretty good for most images.
Use width="500" height="300"for images above the fold and use width="500" height="300" loading="lazy"for images below the fold. FYI I never use multiple versions of images anymore and just load up 1single large image as the small image.
lol! : “don’t even think about sleep or eating until you get 100”.
Thanks a lot. Really helpful. I’m going to have a go with Squoosh + i didn’t know about Source Image plus stack. I’ve just seen it in the updates - so will get it now. Thank you