Participant

Answered

Why are my Photoshop exported images too large for websites?

13 replies
207 views
Translate

I optimized my images, but the file sizes are still heavy and affecting page speed. What export settings or formats do you recommend for better web performance?

gary_scCorrect answer

Community Expert

Hi, @Ahmadsultan, if you go into Image (menu), and select “Image size,” you’ll see where you need to work with images for the web (and other needs).

If you set the fields to show pixels, you can see the width and height of the current state of the image.

Typically, and this varies all over the place depending on the needs of the website, the size may be between 600 pixels in width up to 1600. But the lower end is more common. Please note that the resolution on the web is irrelevant. If that little “chain” icon is dark as shown, any change you make in one field will respond in kind in the other.

The reason for all this is you are not printing, rather, you are placing each pixel of the image for each pixel on a monitor. Thus, a low resolution monitor will show the same image much larger than a higher resolution monitor—the pixels are smaller.

Once you determine the necessary resolution for the image, THAN you can set the compression for the image. Too high of compression and you start to get JPG degredation.

Myra Ferguson

Community Expert

If you’d like to keep the resolution of your original image (in case you’d like to print it), you can use Export As (File > Export > Export As) to change the exported size as opposed to changing the image size itself. In the Image Size section of the Export As dialog, you can adjust the scale or the width and height and see the estimated file size for the image (or images because you can export multiples at the same time) that you’re going to export.

Translate

gary_sc

Correct answer

Community Expert

Hi, @Ahmadsultan, if you go into Image (menu), and select “Image size,” you’ll see where you need to work with images for the web (and other needs).

If you set the fields to show pixels, you can see the width and height of the current state of the image.

Typically, and this varies all over the place depending on the needs of the website, the size may be between 600 pixels in width up to 1600. But the lower end is more common. Please note that the resolution on the web is irrelevant. If that little “chain” icon is dark as shown, any change you make in one field will respond in kind in the other.

The reason for all this is you are not printing, rather, you are placing each pixel of the image for each pixel on a monitor. Thus, a low resolution monitor will show the same image much larger than a higher resolution monitor—the pixels are smaller.

Once you determine the necessary resolution for the image, THAN you can set the compression for the image. Too high of compression and you start to get JPG degredation.

Translate

D Fosse

Community Expert

And crucially, how many pixels w x h?

Translate

MarekMularczyk

Community Expert

Exactly 😉

Translate

Adobe Community ExpertAdobe Certified Professional

MarekMularczyk

Community Expert

How do you optimise your images for the web? What are your settings?

Translate

Adobe Community ExpertAdobe Certified Professional

AhmadsultanAuthor

Participant

I faced the same issue while uploading images to my website. Even after optimization, the image sizes were still too large and affecting page speed. What worked for me was resizing the images in Photoshop first, then exporting them using compressed JPG/WebP settings with lower quality percentages. After reducing the dimensions and compression level, the file size became much smaller without losing too much image quality. It really helped improve my website loading speed.If you want to check the images look this
Thanks you.

Translate

MarekMularczyk

Community Expert

How big were they? Were they 72ppi? What dimensions were you exporting them as?

Translate

Adobe Community ExpertAdobe Certified Professional

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.