Skip to main content
Participant
January 9, 2022
Question

which file size should I download

  • January 9, 2022
  • 4 replies
  • 386 views

Hello !!

I want to knowthat when i edit images in photoshop its files a havier for websites . can any boy tell me which file type shoul i save as in photoshop for websites for light wight ? 

Thanks 

 

This topic has been closed for replies.

4 replies

Participant
January 10, 2022

Thank you all it was very hellpfull now its better and light for website 

 

[website link removed by moderator]

 

 

Bojan Živković11378569
Community Expert
Community Expert
January 10, 2022

If you are using Wordpress or similar platform they are offering plugins to prepare images for different screen dimensions. In that case figure out dimensions, format and settings that are recommended. If you are creating all images for your site then beware that multiple dimensions of the same image is needed. For desktop version of your site large image is needed for cover image, for example, I mean large image dimensions, usually JPEG format or PNG format for graphics. For tablet and phone you must prepare smaller images and sometimes multiple dimensions. Quality settings will depend on many factors, just watch image while exporting. Do not overdo with images that do not need high quality settings because that will harm site speed what is very important factor. 

 

You can read online that some other image formats which are still not supported officialy in Photoshop can provide benefit but be careful because that format is not supported by all browsers and can be pain to manage all together.

 

D Fosse
Community Expert
Community Expert
January 9, 2022

You should consider pixel size first. Traditionally, 1080 pixels long side should be a comfortable size on a standard screen.

 

The new 4K/retina screens complicate that a bit, because images display much smaller on high resolution screens. The standard industry workaround that is used now, is that web browsers automatically scale up 2x when they detect such a screen. The net result is that the same material can be used whatever screen technology the user has. So 1080 pixels still works.

 

A more advanced solution that takes full advantage of high resolution screens, is to upload two versions of every image. One for standard screens and one twice linear dimensions for 4K, in this case that would be 2160 pixels long side.

 

However, that requires special coding of the website in question.

 

Having settled that, export to jpeg at the desired quality setting. Use the preview in Export/SFW to see how much compression you can apply before the visual quality suffers too much. That's your call.

Derek Cross
Community Expert
Community Expert
January 9, 2022

As always, a really useful and comprehensive answer from D Fosse.

D Fosse
Community Expert
Community Expert
January 10, 2022

Thank you, Derek, but of course it's not always as simple as that nowadays.

 

4K/retina is one thing, responsive web design with continuous scaling is another. Personally, I think responsive design is the devil's invention. Web designers love it, but to photographers it means their images are turned to soft mush. All you can do is provide an image which is "big enough" and hope it's not massacred too badly by the browser scaling.

 

Still, 1000-1200 pixels is usually a good starting point that normally works well.

Myra Ferguson
Community Expert
Community Expert
January 9, 2022

There are different settings that you can use for JPG, PNG, and GIF that will affect the final file size.

 

There are a few ways to export these formats. If you use File > Export > Save for Web (Legacy) or File > Export > Export > As, you can set different export options and see what the file size of that export should be before exporting.