I have just published my site using the deluxe web hosting option from go daddy, but the load times for the images is painfully slow. I’ve compressed them as much as possible but for about 10 seconds the website displays blank space where the images would be. is there a way to optimise this within RapidWeaver and set it up so the image is low res whilst it loads, rather than being blank. is there optimisation I need to do with uikit and RapidWeaver to improve load speeds, or do I need to switch to business hosting.
Srcerer is definitely a good approach to make sure appropriately sized images are shown on each device size.
If you have a url though we can take a look to see if there is something glaring that might be an easy fix.
In conjunction with Srcerer try this site to optimise your images (don’t know what you have used so far) https://squoosh.app/editor
The MozJPEG option is smaller than standard JPEG.
Have you a URL?
All those images are still too big. This one alone is 3.1mb and 4032x2268px. Does it really need to be that big?
If I resize that image to 2500x1460 and run it through an image optimizer it comes out at 786kb which is still quite large, but better than 3.1mb.
Here it is, can you tell the difference?
Do that with all your images and it will speed up the page considerably.
1 Like
Yes, sort out your images before changing anything else. I don’t think any of them need to be wider than 2000px and you could drastically reduce the size by reducing the JPEG quality on export from your image editor or using image optimisation software.
I don’t believe any of these needs to be over 500kB.
After that you can then get into the fine detail of what image loads for what device and optionally even convert them to a more efficient format such as WebP but get the sizes down first and see the difference.
1 Like
I’ve got them all down to 500kb, roughly how large should the overall project size be as a general rule of thumb?
Hi @guypuggers123 and welcome to the forum.
As noticed above your images are way too large for web usage, the one I picked was over 4.6MB. It is very important that we prepare our images prior to uploading in order to optimize the page loading times. The images may be around 100 kilobytes and no heavier than (about) 200 kilobytes each.
I see you are using UIkit-3 Framework so I’ll also add some guides regarding images and the Image stack used in the Slideshow and other instances on your page:
Support for srcset in Image stack
This is an important tool regarding the usage of images and image qualities in different devices. The Image stack in UIkit already supports this attribute, you just have to prepare the images / sizes and enable the srcset option on the Image stack. There are examples of this approach on the Tests project included in the UIkit-3 package and some docs can be found on the UIkit for RapidWeaver site as well as at the official UIkit-3 pages:
https://uikitstacks.com/documentation/image/
https://getuikit.com/docs/image
Cheers,
Lucas
The images in the slide are all over 2000px wide but scaled to a max width of 1200, so reporcess them to 1200px wide and export at about 70%. That’ll reduce the average size from 500kb to about 150 max.
The header image is set to a max height of around 450px but the actual photo is 1046, so crop it and again export at about 70%. That’ll knock it down from c.500kb to 250ish.
I have put the originals into squoosh again to try and get them down to about 100kb but I loose a very noticeable amount of quality compared to the 500k files. Is there something I’m missing?
Did you resize the images as covered above?
I set the width to 1200, quality to 70% compressed as MozJPEG which gets me to 160 kb, but the quality of the image is noticeably poor
Ya, OK, I just reprocessed one using Affinity Photo. I had to drop the quality right down to 30% to get the image size down. It’s because the present image is extremely sharp, and the way images work, the sharper they are the bigger the file size will be.
is is 1200px wide and 135kb. How does it compare to the one you’ve compressed?
1 Like
I would go with Tav’s suggestion to resize the original images in the gallery to 2000px. That will allow the images to look good when opened in the gallery lightbox.
100k or 200k is certainly a good size to aim for but depends on how many of these images you have, I would say. For the 3 images in the Gallery a resize to 2000px and then optimes them with a proper grown up’s tool like jpegMini (free) will get you to where you need to be.
I have never heard of squash but there is a lot of junk optmizers out there. Go with jpegMini for jpg’s and ImageOptim for pngs.
Yep 2000px is a good suggestion, try to keep the quality at 80% and you are good to go.
Note that you can still use even smaller sizes with the scrset option included in the Image stack, so smaller devices will get smaller / lighter images. In fact if you are serious about images you can use 3 sizes on the Image stack: the default will go for small devices and the other two for medium and large. You define the breakpoints.
@Webdeersign I guess he is talking about this one: Squash 2 for Mac — Compress Images For The Web Without Losing Quality
Am I missing something… Gallery? Lightbox?
That looks a lot better than the one I compressed
My guess would be then that you need to use a better tool for resizing and compressing. Affinity Photo is very good.
1 Like