Images for Web

[ScarlettTrinity]

Hi there. This might be a silly question but I thought I'd throw it out to the forum for help... I'm working on some image for my website and I'm being told the images I've provided aren't large enough to be used on the website. These images were taken from a RAW file and then edited accordingly. They were not saved for web and devices, merely saved as a photoshop file and a jpeg with high quality. However, when I first started these images, it was a specific canvas size (I don't remember now) and with the image at 72ppi. I've been told by the web guy that I'm about 5 years behind and the new websites will automatically rescale an image to suit their needs. He's probably right, it's been awhile since I've done this stuff.

I'm wondering if there's a workaround to upscale/upsize the images so they will work for the new website or if I need to start completely from scratch again. If I do need to start from scratch again, what are some recommended settings? The only thing I'm getting from him is the resolution and an aspect ratio and when I do a web search, I still get the old 72ppi suggestion. This is what he told me, "especially for Home Page, we recommend going for high resolution images and for the specific Carousel we have designed for the Home Page, please see if you can get 1920 X 480 size image. This is a lot higher resolution that 72 PPI."

Help and thank you!

[davescm · Accepted solution]

Hi
Forget ppi - it is for printing.

Aim at an image pixel size. If his recommendation is 1920px x 480px then go back to your originals and crop to that. Don't try and size up from an already reduced image.

Dave

[Per Berntsen · Accepted solution]

PPI stands for Pixels Per Inch, and is metadata used to calculate the print size of an image.

For screen viewing, ppi is totally irrelevant, and not even required.

The only important numbers are the pixel dimensions. It seems that your web guy wants 1920 x 480 pixels, so give him that.

The image will display at 1920 x 480 (or whatever size it gets scaled to), whether the ppi value is 72, or 720, or 0.

If you use Save for Web or Export, the ppi number is stripped out, but most applications will assign a ppi value when opening it. (which makes no difference for screen viewing)

[ScarlettTrinity]

Thank you both!

[AnnaRz]

Hi, This post has helped me through one hurdle regarding sizing images for the web. Thanks for sharing that info. ...

However, I'm still having trouble prepping images for our new website, which uses responsive web design to display content across three viewing platforms: desktop, table and mobile. The only instructions I've received is an aspect ratio, but I am a bit old-school and am used to cropping images to fit a specific size, which means I understand how to work with pixels but not ratios. 

I'm starting with full size images, and crop to show the image content that I want. I crop, save for web, and upload, but when I check the page in the three versions, I find the template is cutting off some of the content, or pixelating the image. 

Can any of you share the proper way to prep images to work effectively with responsive design? I'd appreciate your help. 

[jane-e]

Hi @AnnaRz 

This is a different question from the original post. For responsive images, see this post from W3Schools for how to write the CSS code for your web page:

https://www.w3schools.com/howto/howto_css_image_responsive.asp

We don't know what your template does or what its code says, but if you have questions about that, the good folks in the Dreamweaver forum may be able to assist.

https://community.adobe.com/t5/dreamweaver/bd-p/dreamweaver

~ Jane