Wanting to keep quality images I am not making them smaller.(Maybe I’m being lazy)I am using the built-in banner on Aspen. I have also selected the automatically resize larger images in the preference(1900). However, my results are slow or incomplete loading of images.
Any tips on how to keep quality but get decent speeds and loading?
Try ImageOptim
1 Like
@joshandrewbrown There are a bunch of compromises one needs to make. There’s no easy way with this. As a general guideline you want your images to be no larger than 300k (notice I’m not talking about pixel dimensions). I suppose if you want really high quality then limit to 600k. But it also all depends on how many images you have on a page.
Give us a link and we can provide some feedback on loading speed. No use having a great image if it takes f-o-r-e-v-e-r to load. People will leave and never appreciate the image.
In the end you are being lazy if you don’t take a close look at how images are being handled. It’s an art of compromise and there aren’t simple rules: but it’s very easy to tell when a page loads way to slow.
1 Like
Using it now, thanks
The site is pretty slow to load. Not crazy slow but could use improvement.
The images you use as “background” (underneath the banner) could probably be greatly reduced in overall size (as a guess). Check the sizes of all of them.
For some reason it seems the video loads particularly slowly. It’s a YouTube embed so I don’t know why it takes so long to load.
Other than banner images that stretch from edge to edge, making images smaller doesn’t reduce the quality.
Most areas images are displayed in have a maximum width set by the themes or stacks used. Sometimes the maximum width can happen on smaller mobile screens.
For example, If you load an image that’s 1900px in width and there’s only enough room to display 1200px then the browser is going to “resize” the image anyway. The browser still has to wait for the much larger 1900px image to load and then chop it down to fit into the space it has to display.
Resizing images to be no wider than the space provided to display them should always be the first step as it’s a form of lossless compression. It can greatly reduce the image size and have no impact on display quality.
The second step would be to use one of many image compression products available to compress the image size. Most all allow you to turn up or down the amount of compression. It’s always a balancing act the more compression applied the smaller the file size but the image quality goes down.
1 Like
I’m not sure what this is? I’m kind of a noob on the back end.
1 Like
As has been pointed out, you should resize and optimize your images. Some of them are way too big. Here’s the size of the ones that should be worked on. You should be able to get each of those to 0.5 MB or less.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.