What is the optimal size for full-width nectar slides? I'd like the highest quality images possible without sacrificing too much on the performance side.
I currently have some portfolio categories with 30+ images and it's a little slow to load.
For some reason I can't access your URL right now to take a look (server seems down) but I'll try and answer off what you wrote:
If you're talking about a Nectar Slider taking too long to load because you have a lot of images - that shouldn't be the case. A Nectar Slider will load in as soon as the first image is done loading regardless if you have 2 more or 30 more. You should always supply images at least 1800px wide when using the full width option for the slider, but I would also compress the images to a web ready size (no greater than 400kb).
Sorry, HostGator was having issues. It should be fine now if you want to take a look at it.
I originally sized my images at 1500px wide and saved it as the highest quality (12) in Photoshop, which resulted in most of my images being between 700Kb and 1 Mb.
In order to produce 1500px wide images that are less than 400Kb it looks like I'd need to save at a quality of 9 or 10 within Photoshop. Is that what you would recommend? I am also compressing with EWWW Image Optimizer, which uses jpegtran (the compression method Google recommends).
I have a related question that pertains to the slider. Instead of a black screen when loading one of the subsequent images is it possible to have a status loading bar or a spinning icon or something? When viewing on an iPad it seems to take quite a while to load so when flipping through the images you come across a few that are completely black because they haven't loaded. Just wondering if there's a different way to handle that. Also, on the iPad/iPhone is there a way to improve the sensitivity when trying to slide to new slides? It seems you almost need to slide your finger from one side of the screen to the other in order to make the slideshow advance.
1. If your images have a lot of detail in them then it's understandable that they can't compress that small - just aim to compress as low as you see fit where you have a balance of quality and size.
2. If you want to set a loading icon on the slider's background itself you can do so through this:
Hey Ryan,
For some reason I can't access your URL right now to take a look (server seems down) but I'll try and answer off what you wrote:
If you're talking about a Nectar Slider taking too long to load because you have a lot of images - that shouldn't be the case. A Nectar Slider will load in as soon as the first image is done loading regardless if you have 2 more or 30 more. You should always supply images at least 1800px wide when using the full width option for the slider, but I would also compress the images to a web ready size (no greater than 400kb).
Hopefully this helps a little :)
Sorry, HostGator was having issues. It should be fine now if you want to take a look at it.
I originally sized my images at 1500px wide and saved it as the highest quality (12) in Photoshop, which resulted in most of my images being between 700Kb and 1 Mb.
In order to produce 1500px wide images that are less than 400Kb it looks like I'd need to save at a quality of 9 or 10 within Photoshop. Is that what you would recommend? I am also compressing with EWWW Image Optimizer, which uses jpegtran (the compression method Google recommends).
I have a related question that pertains to the slider. Instead of a black screen when loading one of the subsequent images is it possible to have a status loading bar or a spinning icon or something? When viewing on an iPad it seems to take quite a while to load so when flipping through the images you come across a few that are completely black because they haven't loaded. Just wondering if there's a different way to handle that. Also, on the iPad/iPhone is there a way to improve the sensitivity when trying to slide to new slides? It seems you almost need to slide your finger from one side of the screen to the other in order to make the slideshow advance.
Thanks again for your help!
Hey! No problem :)
1. If your images have a lot of detail in them then it's understandable that they can't compress that small - just aim to compress as low as you see fit where you have a balance of quality and size.
2. If you want to set a loading icon on the slider's background itself you can do so through this:
.swiper-container { background-image: url('your-loading-img.gif'); }Cheers :)