I've been using Photoshop for years and have taken several advanced courses. One thing they never seem to teach you is file sizes and aspect ratio (n all that). Ugh.
I am now trying to set up a website in WordPress using Elementor – have even taken a short course in WordPress and holy freaking hell. I am not doing well at all.
So. I was following a tutorial that said to set up my featured image as 1200 X 627, and the file size would be 86KB. Just as an experiment I set up a new draft, 1200 X 627 at 72px/in, and my file size is 2.15M. I don't know why.
Also, why are the suggested dimensions for all images square? Won't that leave space above and below if the image is rectangular?
If y'all can help me understand these things, it might be a good start to finding my way.
The file size depends on the file type (jpeg, png, etc) and the compression rate. For example, if you are using a photo, you should use *jpeg* as the file type and perhaps *medium* as the compression rate. Via the “Expaort as…” dialog you get a preview of the file size depending on the settings.
This is pretty simple to resolve. First, after adjusting the photo to your liking, color, hues, brightness, whatever, save it as xxxxx-adjusted.jpg (or whatever extension).
Next, resize that to whatever size you want, let’s say 1024×768.
Now save for web and devices as 1024×768-xxxxx-adjusted.jpg.
Note; you have many choices of file type and resolution, e.g. .gif, .jpg, .png and options like 64-bit dither, 128, whatever.
Me? I continue liking .jpg low or medium and images may be 50KB to 60KB and I don’t complicate my life with .webp format.
Anyway, the trick in all this is use the tools within PS to save for web.