Optimal image size for site speed & quality

Joined
Jan 8, 2021
Messages
89
Likes
43
Degree
0
Do you have an image resolution & file size limit, to ensure the best compromise between image quality and site speed?

I had some issues with the speed of my site and reduced the size of the images to max. 100kB. The 100kB was an arbitrary size that I took. However, some images are a bit blurry.

Most of my images are screenshots that I take with Awesome screenshot and I reduced them with Mac Preview. Will another workflow result in better quality?
 
I used to go through the ordeal of trying to set up Photoshop quality at export. Then I started using TinyPng and Kraken.io (and still use the Kraken API), but when I discovered that ImageOptim (since you mentioned Mac) has just as good algorithms, I use it nearly exclusively now. I just saw they have an API now too. Kraken has a Wordpress plugin that makes it simple to use on the web, but ImageOptim doesn't.

When you take screenshots on the Mac they always save as .png files. You'll get some mileage out of converting them to .jpg files and making sure to resize them to the appropriate physical resolution too. These days I'll even go a little smaller and let them stretch on desktop views if needed, so that they aren't gigantic on mobile screens.

Of course if you care about 5k retina screens and all that on mobile you'll want double the resolution when shrunken down with responsive design, but I only care about that on the site's logo.
 
I use ImageMagic and MozJpeg on my PC. These packages contain multiple command line tools inside. I've written a simple script that processes all images in a folder - converts to jpg, renames, resizes, etc. Here's a couple of commands I use:

Resize all jpegs to 950px width (heigh - respectively):
Code:
mogrify -resize 10000x950> *.jpg

Make files smaller. You can control the quality and many other aspects.
Code:
cjpeg.exe -outfile $outputNameJPG $inputName

I've tested Tinypng and other tools, but I can achieve the same results, and the process is faster. At least it works fine for me.

Do you have an image resolution & file size limit

This is an interesting question, and I'm yet to find a proper solution. For now, I've just resizing everything to ~ 950px max. I don't see the need to put larger photos on my websites.
 
I setup and fund Shortpixel and don't worry about it
Just echoing this.

Pay attention to when they run Appsumo deals as it pays for itself just in time saved. All my sites are hooked via the same API key. Images auto-optimize on upload and are converted to WebP for free.

I believe their most recent app-sumo was $49/one-time payment for 15,000 image credits/month.
The one back in 2017 was $25/one-time payment for 5,000 image credits per month.
 
Back