Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Imaging resizing for web

Community Beginner ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

Hello,

I am editing alot of images for a website so want to make sure i get it right before I waste time doing it wrong.

 

I am working on  a Mac.

1. In image finder the Images size says  it is 500kb but when i open in Photoshop it is actually 9 MB... what is the actual size...?   I dont want to cause long loading times for websites.

 

2. Also some images are below 500KB but are 300 DPI... which is better is 300DPI or 72 DPI  is better for website...? the 300DPI seems to be sharper but  will it cause issues when loading?

 

3. Any advise for best formate size, DPI for images for website. ( i am using square space Avenue Template, Gallery pages so about 8- 20  images per page . I want fast loading on phones and Screen.)

 

4. I have read i should set to RGB yet they says sRGB is better... most of my images  in photoshop are RGB .8 channel... is that correct? Yet sometime when i save  as RGB image,  below ,  in the saving menu, it says below,  that sRGB is embedded in File.... is that correct or do i need to select different setting?

 

 

 

thanks so much!! 

 

MAny thanks

 

TOPICS
FAQ, How to, Mac

Views

512

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

Ppi (pixels per inch, often incorrectly called dpi) is a print parameter that is absolutely irrelevant for web/screen. Doesn't matter one way or the other. An image can be 10000 ppi or 1 ppi, and they will display absolutely identically on a web page, and on screen in general.

 

On screen/ web, all that matters is the pixel size, so many pixels wide by so many pixels high. Each image pixel will then align to one screen pixel. The "resolution" is in fact the screen resolution of the display you're actually viewing on.

 

Traditionally, 1000 to 1500 pixels long side has been considered a comfortable web size. Retina displays is a complication, because everything will be smaller on a high resolution display. So to be able to use the same images on all types of display, the generally accepted workaround is that the web browser scales up to 200% when it detects a high-resolution (retina) display. This way one image pixel is represented by four screen pixels. Effectively, your retina screen is turned into a standard one. As I said, it's a workaround.

 

---

 

File size on disk is also not what it appears to be. The jpeg file format specification uses very aggressive data compression to reduce storage space on disk. When the file is reopened, it is decompressed back to its original size.

 

Again, all that matters is the pixel dimensions.

 

Jpeg compression is extremely effective, and it can reduce storage space down to 2-5% of original size with little immediate quality loss. But there will be some. Jpeg compression is irreversible and cumulative. Every time you resave a jpeg, it deteriorates a bit. And because of compression artifacts, the size actually tends to increase a bit with every new save.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

Thank you so very much that is really helpful! Really appreciate your time and assistance!! thank you 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

1. The Finder shows you the compressed size on disk. When you open the image, it is decompressed, and Photoshop shows you the uncompressed file size.

 

2. PPI (not DPI) stands for Pixels Per Inch, and is metadata used to calculate print size. 

Pixel dimensions divided by PPI value = Print size in inches.

For on screen viewing, PPI is irrelevant. The image will display according to its pixel dimensions, regardless of the PPI value.

 

3. Squarespace probably has some recommendations about pixel dimensions.

Do not use full resolution images from your camera, reduce the pixel dimensions to for instance 1500 to 2000 pixels on the long side. You can change the pixel dimensions when using Export and Save for Web.

 

4. RGB is a color mode. CMYK and Greyscale are examples of other color modes.

sRGB is a color space, also referred to as a color profile. It is considered the safest color space for web images.

Always embed the profile. When using Export or Save for Web, make sure to check both Convert to sRGB and Embed profile.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

Yes, and I didn't even get to embedding the sRGB profile...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

Thank you soo Very much , that is soo helpful. Really appreciate your time!  One of query which you may or may not know the answer to... you mentioned the below

3. ............You can change the pixel dimensions when using Export and Save for Web.

 

When using the export ,  save for web , in the settings there are a few options ....

 

For website should i save as " Image Only"  or "HTML and Images" see below attachment ? I cant seem to find what the difference is or what is better for websites.....Any advise would be great.

 

Also , any tip about if it is better to use the Low, Medium, High etc quality.... will it make much of a difference on my web images? many thanks again! 🙂 I would like the quality of images to look good but also make sure website content loads easily. Many thanks

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

The low/medium etc rolldown is just a quick setting. If you look to the right there's a Quality slider from 0-100. It actually works in discrete steps too, but a few more.

 

Much of the point here is to balance quality and file size, to find the optimal compromise. Check the file sizes bottom left as you move the slider. Make sure SFW/Export displays at 100%, and see how low you can go before quality suffers too much. It's your call.

 

Save as Image if that's what it is.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2021 Apr 20, 2021

Copy link to clipboard

Copied

Thank you very much! that is really helpful!! 🙂

Just so i am clear, about weather to save as image or HTML and images , you mentioned;

Save as " Image " if that's what it is.

 

 when saving as "HTML and Images" .... what is HTML for , in what instance would i choose that instead?

many thanks 🙂

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 20, 2021 Apr 20, 2021

Copy link to clipboard

Copied

Save for web was introduced with Photoshop 5.5 in 1999, and included an option to save an HTML page with the image.

The code it creates is outdated, and I don't think anyone is creating web pages this way 22 years later.

Just save as "Images only".

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2021 Apr 20, 2021

Copy link to clipboard

Copied

LATEST

thank you thank you , I really appreciate you taking the time to share your knowledge  !! 🙂 have a good day 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines