Saving for web

[sreilly]

I've gotten to the point where I do most of my processing, actually 99%, in PI. What I've found that I do to post the images to my website is take the processed image into Photoshop and create the  JPG files of various sizes. I usually post images width sized in 3,000, 2,000 and 1,600 pixels sizes. I'm not sure how to accomplish this using PI. I know I can resample the image and save but how can I see how large the resulting file will be?

If I'm going about this the wrong way I'd appreciate some advice. The image in question is here: http://www.astral-imaging.com/M63-NGC5055-RC.html

Thanks,

[Juan Conejero]

how can I see how large the resulting file will be?

For a given image, file size is a function of JPEG quality. Unless you have really strict storage and/or bandwidth limits imposed by your web hosting provider (and in such case you should probably consider a different provider), file sizes aren't a big problem. Just use a JPEG quality above 90 to ensure minimal compression artifacts and make a couple tries to see the resulting file sizes.

[sreilly]

What is the proper process for saving these files? Do you re-sample the image to the needed size and then save as a JPG? I don't see an option for JPEG quality so I suspect I'm using the wrong process.

[oldwexi]

Hi Steve!
You can achieve all what you want without using PS.
There is a script in PI available for download which allows to define the filesize and quality when writing jpeg.
You can use it in case you really prefer smaller file size instead of better quality of the written jpeg
http://pixinsight.com/forum/index.php?topic=3613.msg25437#msg25437

I use it for webpages were filesize for upload is limited.

Gerald

[Juan Conejero]

Do you re-sample the image to the needed size and then save as a JPG?

Yes.

I don't see an option for JPEG quality

You can specify the JPEG quality when you save an image in the JPEG format. You can also set a default JPEG quality from the Format Explorer window (double click the JPEG item on the list to the left).

[jkmorse]

For what its worth, here is the technique that I use to get consistent results when converting an image to JPEG in PI:

Rotate as necessary using Fast Rotation (if increments of 90 degrees) or Rotation tool

Crop using DynamicCrop Tool, “paint” the image and for my F16M, best fit is long side set at 3894 pixels and short side at 3009 pixels.  Main point is you need to find Width and Height settings that are multiples of whatever image size you are trying to create (in my case 8.5 x 11).  Position as desired, then crop.

Open Resample tool
Select Image from View List
In Resolution Section, set:
Resolution units: Inches
   Enter: Horizontal = Vertical = 300
   Check: Force Resolution
In Dimensions Section, change width and height to 8.5 and 11 in the inches boxes
Select “Preserve Aspect Ratio” to allow resizing while preserving 8.5 x 11 size
Use Default settings unless issues arise
Apply Process to Image

Hope that helps,

Jim

[sreilly]

Hi Steve!
You can achieve all what you want without using PS.
There is a script in PI available for download which allows to define the filesize and quality when writing jpeg.
You can use it in case you really prefer smaller file size instead of better quality of the written jpeg
http://pixinsight.com/forum/index.php?topic=3613.msg25437#msg25437

I use it for webpages were filesize for upload is limited.

Gerald

Thanks Jim,

I downloaded the script and ran it several times last night. I'm a bit confused on the values. Seems there is a minimum and maximum value. If you are shooting for 90% I guess you use that as the maximum but what is the minimum used for? Why not just the desired value? How would you know the actual value used? I read through the entire thread you referenced and no one else seemed to have any question s about using the script so maybe I'm missing something obvious?

Steve

[IanL]

Why wouldn't you use PNG rather than JPG?  Unless you have severe file size/bandwidth constraints it would be better to avoid lossy compression in jpegs (especially pointless if you decide to turn the quality up to near maximum to minimise artefacts).  Personally I only use jpeg where the file size restriction is very small (e.g. forum postings on some sites), and even there the result is usually better by resampling down to a smaller size in PI and using PNG as the output format.

[sreilly]

While we may enjoy endless bandwidth and speed, there are still many who are not able to be so lucky. Where I live I was just a year ago able to get rid of satellite internet and get DSL. Satellite had both bandwidth and speed issues that made it both slow and down right uncomfortable to view large images. I personally haven't looked into PHN format and probably should. But for an example, the last image I did using PS "save for web and devices" gave me the following results:

3,000 x 2,000 pixels with;

JPEG at maximum quality: 3.188M   
@ 80% 1.594M
PNG-8 Selective and no dither: 3.08M
PNG-24 Selective and no dither: 6.41M

I can't say I know anything about what PNG settings should be used but this is a fast and dirty result using PSCS5.

What I've tried to do on my website is maintain a reasonably good quality image at all sizes and keep the file size about 1.5 to 1.75M. For those with slow connections there is the option to view 3,000, 2,000, and 1,600 pixel wide images but if you are one who looks closely at the larger images many times there will be the reward of seeing countless background galaxies. I found this especially true in my images of M44 and just recently M63, both of which caught me by surprise. http://www.astral-imaging.com/M63-NGC5055-RC-3000m.htm and http://www.astral-imaging.com/M44%20STL-Full.htm or http://www.astral-imaging.com/M44-Lum-3000.htm .

I guess I need to look more into the results. The bottom line is it isn't all about me and how fast I can view images, I'm finally at about 7MBs after many years way slower.

[jkmorse]

Steve,

Not sure from how you wrote your note, but my way of doing this does not use the script at all.  I do it all with Dynamic crop.  Its a bit more work since you need a calculator, but I get good, controllable, results.

For what its worth,

Best,

Jim

[sreilly]

Jim,

The only time I crop an image is to remove the edges that aren't uniform from one master to the other as in combining the red, green, and blue master frames for the RGB image. I do that right after color combine and then continue with background neutralizing and color correction and DBE when needed.

The idea of different sized images on the website is to offer a choice of sizes to fit monitors or desires. The full or larger 3,000 pixel wide, (75%) of full, usually gives a large enough view to pan around and see the finer details otherwise missed in the small views. It's all depending on what you are looking for. Admittedly the smaller images usually look better and don't show the image defects so badly. I may crop to display a full size area of interest in an image but that's the only other reason other than noted. Otherwise the images are all the same view at different scales.

Steve

[sreilly]

Color issues still plaguing me but I wanted to try something different using PI to see if there would be any visual difference without using PS to create the JPEGs. Going through this exercise I came up on something I was not sure how to handle, as always. Lest say I open the native image and it's dimensions are 4008 x 2672 pixels. (STL-11002M CCD Camera binned 1x1). I resample the processed image to say 3,000 pixels and have maintain aspect ratio so the height is adjusted accordingly. Now I save the image as a JPEG and use a quality setting of say 90%. I still have other sizes I need for the website such as 2,000, 1,600, 500, and 300 pixel wide. Is there any difference resampling the current image each time or should I be resampling the newest resampled image? Hope this makes sense. Or does the image first picked, the 4008 x 2672, stay static in the reference image slot? From what I see, doing multiple image resampling for the needed sizes is using the last size done. Not sure if that makes any difference at all as the image is the same. As it seems to have been done, the first used the 4008 pixel image opened, resampled to 3,000 and saved a s 90% JPEG. Everything left as is and resampled again now using what seems to be the 3,000 pixel resampled image to do the 2,000 and so on.

What I'm getting at is that it seems I am getting way different file sizes using PI rather than PS, smaller in PI using a constant 90% value and I'm unclear what is causing this. The 3,000 pixel image in PS at 90% is 3.929M and in PI at 90% 1,043K while the PNG is 10,772 K. It seems that for whatever reason I'm getting much better file sizes using PI. I just did the above on a reprocessed image of the LGRB data @90% and the file sizes are:

3,000   1,449K
2,000      637K
1,600      273K
   500       33K
   300       19K

The file sizes seem small in comparison to what I use to do in PS. In PS I had to adjust down the % to keep the images at a reasonable, < 2M (my limit), on the largest images.

One thing to note is that I am not saving the resampled image in the TIFF format I brought it in with and just generating the JPEG from the resampled current TIFF image and saving that JPEG image for posting.

[sreilly]

What I did this afternoon was take the original RGB image and add the luminance data I had taken. I was never happy with the combined result until this afternoons result. I used the practice making the JPEGs as this topic is about. The issue I still seem to have is getting consistent results with the image showing darker on my monitor and then being lighter on others. I took this new LRGB image and posted 3 versions of the same image. The only difference between the versions is the amount of curves applied to darken the background. The direct link for these images is http://www.astral-imaging.com/M63-RGB-RC.html Now I know everyone has a prefernce for image processing but I wouldn't mind some feedback on the background levels and what appears to be most appropriate.

[Juan Conejero]

The issue I still seem to have is getting consistent results with the image showing darker on my monitor and then being lighter on others.

Typically this is a color management issue. When saving images for web deployment, this is the correct procedure:

1. Resize the image as needed with Resample.

2. Open the ICCProfileTransformation tool and select the image in the Source Profile section.

3. If the image already has the sRGB IEC61966-2.1 profile assigned (either explicitly or implicitly, that is, also if you see "<* None *> (sRGB IEC61966-2.1)"), close the ICCProfileTransformation tool and go to step 7.

4. Check the Convert to the specified profile option.

5. Select the sRGB IEC61966-2.1 profile from the list of available ICC profiles. On some platforms the standard sRGB profile may have a slightly different name (for example, just "sRGB" on Mac OS X).

6. Apply the tool to the image.

7. Select File > Save As and select the JPEG format.

8. On the JPEG Options dialog, select the desired JPEG quality. Normally you should always avoid qualities below 90. I routinely save JPEGs with qualities between 95 and 100, except in very special cases such as large web page backgrounds. This guarantees a minimal generation of compression artifacts.

9. For safety, make sure the ICC Profile option is checked. Actually, if your leave your image untagged (i.e. with no profile assigned) ***and*** it is represented in the sRGB color space, it will be rendered correctly by all browsers. This is because all web browsers assume the sRGB color space by default. However, if you assign an ICC profile your image will be correctly represented on any color managed system, not just browsers.

10. Click OK to save the image.

Theoretically you could select any valid ICC profile in steps 3 and 5, not just the profile describing the sRGB color space. However, unfortunately some web  browsers won't render your image correctly unless it has the sRGB profile assigned. Contrarily to what it may seem, web browsers are still far from providing robust color management implementations.

[Phil Leigh]

Aside from the browser rendering and colour space issues that Juan mentions, you also need to use a well-calibrated monitor to create your image in the first place. A colorimeter is required (e.g. one of the Spyder devices).

Of course you have no control over other peoples monitors... but at least the image will look good on any monitors that are correctly calibrated.