Like most website designers, I frequently use a lot of high-resolution jpgs in my website designs. Here’s the workflow I normally go through to process my images for website use.
Import high-rez image into Photoshop (image is usually 300 pixels/inch and 5000 pixels wide)
Reduce image resolution to 72 pixels/inch with Constrain Proportions and Resample Image checked
Scale image to fit design template
Use Save for Web & Devices and Select JPEG High Quality 60 (Optimized and Convert to sRGB checked)
Select Bicubic Sharper Quality
Export image
Does this seem like a good workflow or is there anything I should change?
command-e select photoshop image into an image box. (select which output files type in the inspector palette to suit the image.)
OK I cheated making two processes into one to highlight the point of simplicity. There are times when you need to re-size down in photoshop first to get a better quality but not that often with general photography.
David Owen { Freeway Friendly Web hosting VPS, Servers and Domains }
On 8 Jun 2013, at 07:27, “RavenManiac” email@hidden wrote:
Like most website designers, I frequently use a lot of high-resolution jpgs in my website designs. Here’s the workflow I normally go through to process my images for website use.
Import high-rez image into Photoshop (image is usually 300 pixels/inch and 5000 pixels wide)
Reduce image resolution to 72 pixels/inch with Constrain Proportions and Resample Image checked
Scale image to fit design template
Use Save for Web & Devices and Select JPEG High Quality 60 (Optimized and Convert to sRGB checked)
Select Bicubic Sharper Quality
Export image
Does this seem like a good workflow or is there anything I should change?
Through trial and error, I’ve found that this workflow yields the highest quality images at the smallest file size, but I’d love to find out if there’s a better technique.
…I’d love to find out if there’s a better technique.
“better” is subjective, and so the issue - I think - boils down to whose
eyes do you trust more?
There is another factor - time to results. Whatever workflow you choose,
unless you have all the time in the world it must also meet some standard
of production.
I use Photoshop to make pass-thru images. First I make any color, contrast,
cropping or other adjustments. Then I resize the image to however many
pixels (usually width) that I need (dpi or ppi doesn’t matter so I ignore
it). Then I use ‘Save for Web and Devices’ to adjust my compression and
file type, and preview the results. This is the workflow that satisfies my
visual standards.
I work totally different, no graphics can be seen from the editing view in Freeway.
I do everything via CSS, preparing the images (outputting almost only png-files) in photoshop, and assign them as non-repeating background image to DIV’s.
On 8 Jun 2013, 5:54 pm, The Big Erns wrote:
it). Then I use ‘Save for Web and Devices’ to adjust my compression and
file type, and preview the results.
You bring up an interesting question. If I leave the image at 300 pixels/inch and use “Save for Web & Devices,” does PS down sample said image to 72 pixels/inch?
I usually follow Ernie’s workflow, but as a second pass – after the layout is figured out, and I have given the result a critical review. While Freeway’s bilinear interpolation is visibly inferior to Photoshop’s bicubic interpolation in many cases, in common practice, it is definitely “good enough” for many image types. Freeway uses it for its speed, not its absolute perfection. So in that spirit, what I do is work out the layout in Freeway, using my raw high-res images to begin with as the source, and no pass-through. This gives me the most flexibility and speed while working out the layout. Once that is done (and hopefully approved), then I look carefully on a great monitor with clean glasses and not too much ambient light. Many images will be just fine as is. Those that need additional sweetening I will export from Freeway (to get a base crop and dimensions, then place that as a semi-transparent layer in Photoshop over the original, and use PS’s superior resizing tools to make the final cut. Export that (hide the guide layer, first!) and import back into Freeway as a pass-through. The benefit for me to working this way is that I don’t discount a possible change to the layout just because it’s a lot of work to re-crop and re-compress in PS.
Walter
On Jun 8, 2013, at 1:54 PM, Ernie Simpson wrote:
…I’d love to find out if there’s a better technique.
“better” is subjective, and so the issue - I think - boils down to whose
eyes do you trust more?
There is another factor - time to results. Whatever workflow you choose,
unless you have all the time in the world it must also meet some standard
of production.
I use Photoshop to make pass-thru images. First I make any color, contrast,
cropping or other adjustments. Then I resize the image to however many
pixels (usually width) that I need (dpi or ppi doesn’t matter so I ignore
it). Then I use ‘Save for Web and Devices’ to adjust my compression and
file type, and preview the results. This is the workflow that satisfies my
visual standards.
On 8 Jun 2013, 5:56 pm, Richard van Heukelum wrote:
I work totally different, no graphics can be seen from the editing view in Freeway.
I do everything via CSS, preparing the images (outputting almost only png-files) in photoshop, and assign them as non-repeating background image to DIV’s.
Interesting. As far as using background images, I’ve done that on occasion to address certain design requirements, but as a rule of thumb I usually try to use graphic divs.
I’ve also found that jpgs are much more efficient for photographs, in terms of file size, than pngs—although jpgs lack the ability to be transparent.
May I ask why you chose the methodology you employ?
The benefit for me to working this way is that I don’t discount a possible change to the layout just because it’s a lot of work to re-crop and re-compress in PS.
This is a very good point and something I should consider doing as well.
Of all the settings in PS, I’ve found the “Bicubic Sharper Quality” provides the best results, in terms of image clarity. After I started using that setting my images became very crisp, without looking artificial.
Save for Web in Photoshop does not alter the pixel dimensions of the image. It may set the ppi to 72, but that alone is meaningless in terms of dimensions. Only the pixels total in either axis matters at all.
Walter
On Jun 8, 2013, at 2:00 PM, Richard van Heukelum wrote:
On 8 Jun 2013, 5:56 pm, Richard van Heukelum wrote:
I work totally different, no graphics can be seen from the editing view in Freeway.
I do everything via CSS, preparing the images (outputting almost only png-files) in photoshop, and assign them as non-repeating background image to DIV’s.
On 8 Jun 2013, 6:04 pm, RavenManiac wrote:
May I ask why you chose the methodology you employ?
To be honest … I don’t recall something ‘valid’.
I prefer using Photoshop’s output, but - I know - that can also be accomplished by importing these graphics pass-through.
Getting these images in via CSS happens to make me able to fiddle with positioning and ‘whatever’ via CSS, you name it. It’s not everyone who really needs that control, but that’s just me I guess.
Getting the (references to the used) images out of the source code.
Let’s say you start out with a 300ppi image that is 3000 pixels wide. That’s 10 inches wide at 300ppi. If you resample the image to 72ppi, and keep the 10 inch width in the process, you will have an image that is 720 pixels wide, and 10 inches wide at 72ppi. This is precisely what Freeway will give you in a non-pass-through image box if you import that high-resolution original and show it at 100% size on your page.
If you take that original 3000 pixel wide image in Photoshop and use Save For Web to export it in a Web-friendly format, you will have an image that is 3000 pixels wide, 72 ppi, and approximately 41.666 inches wide.
The point here is that Save for Web never resamples images, it only optimizes them and exports them at 72ppi. But if you were expecting that image to still be 10 inches wide, I’m just pointing out here that it won’t be.
Walter
On Jun 8, 2013, at 2:45 PM, RavenManiac wrote:
Walter, I’m not sure I’m following you. Would you please explain?
Nope. You have to do that in the original photo (as opened in PS), not the SFW dialog. There’s no rule that you have to save the PSD when you’ve resized it, so you can obviously revert. Or you could save a smaller version with a different filename. But this is one of the reasons that I work in Freeway first, and PS last – you end up managing a whole pile of variations on an original image, just to get the design variations you need.
Walter
On Jun 10, 2013, at 11:45 AM, Robert B wrote:
I suppose you can always change the image size (dimensions) in Save for Web if you wanted.
What’s the Image Size inputs for then on Save for Web? It will always be 72 ppi coming out of Save for Web, but can’t you change the dimensions in that input area?
I am an idiot. You are correct. I was looking at the top of that screen, in the colors and compression, and didn’t look way below that for the image size.
Walter
On Jun 10, 2013, at 11:59 AM, Robert B wrote:
What’s the Image Size inputs for then on Save for Web? It will always be 72 ppi coming out of Save for Web, but can’t you change the dimensions in that input area?
Hey, There is an interesting article on the following page online that tries
to explain this while thing a bit better. You all might like to read it
it is not a lengthy article.
The title of the article is:
“Understanding the PPI, DPI and Resolution Dilemma!”
by Shiv Verma