Hello Community,
I am updating a very old artist’s website, originally created in GoLive in 1996, and have large JPEG files (up to 17 MB), I have read that it is good to have large files but I wonder if there is an optimal/maximum size so the images will not slow down the website to the extent that viewers get bored waiting and leave the site as I want to put multiple images on each page?
Any advice most welcome,
Helen
For most websites, it’s best to size images dimensionally first to make them suitable for use on websites. I usually set the dimensions to about 1500 px width. Once they are dimensionally sized, I run them all through an app called ImageOptim. This reduces the file size considerably without excessive degradation. Add the images into your Sparkle project and leave Sparkle to take care of any further optimisation that may be needed.
Won’t Sparkle look after any size image? You just throw it at Sparkle.
@34MAG It will, but 15 mb images could make your project a little large, especially if you have many images. I usually prefer to do the heavy lifting in an external app before putting them into a project file. Where Sparkle come into its own is creating all the image variants needed for different breakpoints as well as tweaking the optimisation on export.
@helen, This is a good question and all good answers! 
The one thing I will add is be aware that there are a lot of 5K Retinal screens out there and I come across a swag of pixelated images daily on my 27" 5K Retina. Also Sparkle does a really good job of optimising the image file size and then creating the versions needed for the devices you used to create your website.
I have learnt with Sparkle to keep the image dimensions at a good size like what @francbrowne mentioned and then I take those images and reduce their file size down to about 1.5Mb and then throw that into Sparkle. As I mentioned Sparkle will do a really good job of optimising them for the web.
Hello All,
Thanks for your feedback and suggestions. A lot of the images are ‘portrait’ style so a 1500 px width would make the height of some very big but I’ll try the app mentioned by francbrowne and see how I go.
Thanks again,
Helen
@helen Just a tip: the easiest way to use ImageOptim is to create copies of your image files and save them to a folder on your desktop (never use the originals) Resize the images dimensionally with whatever app you use. Once they are resized, select all the images in the folder and then right-click and choose open with ImageOptim This will automatically compress the images and write them back with their original file names (basically overwriting the original copies). If you process a large number of images, particularly if some of them are PNG’s, it may take a few minutes to complete. Just let the app do it’s job. Then check the size of the image folder - it will be considerably smaller.
Currently huge images can slow down some phases of Sparkle usage, for example switching pages or changing the front gallery image. Publishing is slower the first time, but Sparkle keeps a cache of resized images, so after the first publish there’s non impact. Your site visitors will never see any slow down, they always get an optimized image.
So yeah resizing the images is potentially going to speed up Sparkle a bit, but I wouldn’t make them super compressed or super tight, because jpeg compression artifacts compound, and sparkle’s recompression using an already compressed image as baseline might affect quality.
So from a numbers point of view, I’d stick with 95% quality and at least 2000 pixels wide, or more if the image is going to be a background for a full width box or gallery, say 4000 pixels wide.
This should result in significantly smaller files than 17MB, but still plenty quality for sparkle’s recompression.
DON’T compress your images, especially those older JPEGs. Sparkle is great at handling and optimizing high-resolution images, no matter the size. The web is sadly awash in tiny low-res, poorly compressed images.
iPhones and iPads don’t have big screens, but the retina screens allow for zooming in on details. Also, many people are viewing web photos on large screen web connected tv’s that need all the resolution they can get. Let those big beautiful old images show all the photographer intended!
Sparkle’s recompression is actually quite smart. I added a 3.5mb image to a sparkle page and output it and found the image file size had been reduced to about 360K and absolutely no perceivable loss of quality. I then added a pre-compressed image - same size dimensionally but about 360k in size, and guess what, sparkle didn’t recompress it by any significant degree (about 10k at most) - and there were no artefacts in the output image. However, the big difference for me is that the sparkle file size for the larger image was marginally over 3.5 mb, but the sparkle file size for the pre-compressed image was a much more acceptable 360k. Now, it may not make a lot of difference to app performance if there are only one or two images, but where you may have a photographer’s site with maybe 50 or a 100 images, pre-compression does make sense.
I’ve recently completed a site for a photographer that contained 82 images. Had they all been placed at their original file sizes, the Sparkle file would have been 582mb. But pre-compressing the images, the file size came in at 27.8mb, and yet there was no appreciable recompression in the output files.
So, if you want smaller project files, pre-compression is a good way to go - Sparkle is smart enough to know whether an image has already been optimised and does very little in the way of extra compression. Of course, if you don’t mind working with large project files, then Sparkle will do an equally good job at outputting the final web-ready images.
Hello again, From what you all say it sounds as if I can just go ahead with very large JPEG files straight into Sparkle. I’ll make a small experiment and compress a few with ImageOptim and compare. I’m not at the publishing stage yet - lots to be done before then and I’m sure I’ll have a few more questions along the way.
Thanks,
Helen
Helen. Just a different take. These are pictures of pictures correct. And if your building for an artist who wants to sell their wares, does image quality have to be perfect?
For example if one is selling posters it doesn’t have to be perfect.
Color has to be spot on, but you can still get a great representation with a much smaller file.
-Bill
Hello Bill,
Thanks for your message.
The artist isn’t making posters but detailed oil paintings so the image quality is important. The colour is also important but as this differs according to how people set their monitors, it is not possible to control perfectly, I just have to use the colour that the artist thinks is closest to the actual painting.
Take a look at the ‘old’ website that I am replacing with a sparkle one : www.paulcritchley.art.
Regards,
Helen
Helen I’ve been following your site with interest, dabbling in art from time to time. I especially like the way you’ve done your buttons as oil dabs. Like that!
I suspect you’re making the site for desktop/laptop only. The text is rather small on iPad and phone. Nice work. The onclick for paintings is very very good.
W