- guidelines
- methods
- format of the image source
- grid format tools
- comparisons
- first comparison
- table 01: resample size and factor
- second comparison
- table 02: resample of crop size and factor
- third comparison
- table 03: rational resample of size and factor
- fourth comparison
- table 04: description of downsample iterations
- table 05: downsamples with difference blends
- conclusion
- appenidix A: previous results
- appenidix B: standard of comparison
- appenidix C: additional details about comparisons
guidelines
one of the basic guidelines for using Photoshop is that resampling (downsampling, upsampling, photomerging, or transforming) an image can adversely affect image quality. this tutorial seeks to explain how resampling can affect an image, and to what extent.
in this tutorial i will cover some strategies for reducing the effects of resampling on the quality of an image. the guidelines section of this tutorial describes guidelines for reducing resampling effects. the methods section will describe some simple methods that can be used to preserve image quality when resampling. and the comparison section will describe certain comparisons that can show, to at least some extent, how simple strategies for reducing effects of resampling can produce images of better quality.
the following guidelines reflect material covered in later sections of this tutorial:
- don't resample more than is needed. resampling can occur whenever you change the size (in pixels) or resolution of an image (particularly when the resample checkbox is checked). resampling can also occur in the process of cropping an image (especially when a new resolution is specified), or when applying a transformation such as rotate image.
- because the 8, 16, and 32 bit image scales are binary (image information is scaled to a designated power of 2): consider resampling to designated dimension formats that can reduce the effect of resampling. consider formatting your images to dimensions that are factorable by large powers of 2 or 4. consider limiting resamples to sizes that are also factorable by large powers of 2 or 4.
- consider maintaining the highest level of resolution (detail) during the process of realizing your vision for the image. when you are satisfied that there are no more changes or adjustments, then you can save the image to a smaller particular output resolution (a resample also known as a downsample). once an image is resampled, if you want to make another change, then the resample won't have the original detail. some resamples can feature noticeable artifacts.
methods
this section of the tutorial describes some practical strategies that can be used to preserve the quality of images captured by a digital camera. an artist or technician who works with digital images can use the strategies to reduce the effects of pixel resampling on image quality.
for the purposes of this tutorial, 'practical' or 'simple' means easily or quickly implemented and not necessarily strictly controlled or specified. although such an approach can limit, in certain ways, efforts to compare the quality of a resampled image; readers can also further specify methods of comparison for a particular digital imaging workflow as they see fit. that being the case, there are many ways to control for comparisons of image quality for particular situations. for the most part, these approaches will not be covered in this tutorial so that we can focus on effects of pixel resampling. primarily, this tutorial will cover some typical resamples of a digital image in the process of creating a graphic for a web page.
format of the image source
when working with an image from a particular camera, it can be useful to know how the dimensions (in terms of pixels) of the image can be evenly factored. because the 8, 16, and 32 bit image formats are binary formats (image information is scaled to a designated power of 2); it may be that image information can be more evenly factored when the pixel size is also factorable by a larger power of 2 or 4. chances are that the dimensions of an image produced by a digital camera are factorable by 2 or by 4. it may also be that the dimensions are also factorable by a larger power of 2 (2,4,8,16,32,64,128,256) or 4 (4,16,64,256).
also keep in mind that the dimensions of a camera source image aren't necessarily the final dimensions that you will work with. if you merge different images from a camera source into one image (as in the case of a Photomerge or a Merge to HDR), an area common to the constituent photos can be smaller than the area of one of the source images. or you might decide that the outer edges of a photo can be trimmed, and selectively remove canvas to dimensions that are factorable by a larger power of 2 or 4.
in any case, consider that if an image possesses a dimension that is factorable by a larger power of 2 or 4, that the pixels in an image might have a capacity to be factored or resampled more evenly, that is with less rounding or remaindering than resamples that might not be as evenly factorable by a larger power of 2 or 4.
how large of a power of 2 or 4 would be practicable? this really depends on particular dimensions of the file size produced by the camera source, and with how important it is to you to work with an image that consists of dimensions that are factorable by a larger power of 2 or 4. depending on the particular image that you are working with, some resamples of images might not show any noticeable differences with those that were resampled with different methods.
however it may also be that methods for reducing the effects of resampling might typically produce smaller file sizes in comparison with methods that do not minimize resampling. the file size of a particular resample can also serve as a simple indication of image quality, to the extent that a resampling that consists of less rounding or remaindering of data can be a more appropriate reference of image quality, and especially if a minimal resample more closely reproduces or represents the detail of the original image. at the same time, a smaller file size might indicate less photographic detail.
that said, it may be that the resampling algorithms of current software work so well that it can be difficult to find a difference between different choices of resampling.
grid format tools
in [CS4 for Mac] Photoshop Preferences> Grid (Guides, Grid & Slices), you can set the number of pixels per gridline, and also set the number of subdivisions between gridlines. i have previously tried setting the grid to factors of 10, like a grid line every 100 pixels with 10 subdivisions, because i often find it easier to think in terms of base 10 than base 2. however for the purposes of preparing an image data file, i am now very often setting gridlines every 256 pixels with 4 subdivisions (every 64 pixels), so that a large format image can be viewed with reference to grid squares that are also factorable by larger powers of 2 and 4 (up to 256).
in such a way, the Grid feature can also facilitate an easier way to visualize the dimensions of an image in terms of larger powers of 2 or 4; rather than limiting a visualization to a base of 10.
depending on the dimensions of a particular data file produced by a digital camera, the height and or width might be factorable by powers of 2 or 4. some cameras might produce dimensions of which one can be factored by a higher number than the other (for example one dimension might be evenly factorable by 8 while the other dimension might only be evenly factorable by 4). regardless of how small or large of a power of 2 or 4 can be evenly factored from the dimensions of an image produced by a particular digital camera, you can decide whether you would like to adjust the format of the image to reduce the effect of resampling. and the same approach can also apply to adjusting the format of a cropped portion of an image.
this can be accomplished by selecting an area of the canvas that consists of dimensions that are evenly factorable by a particular power of 2 or 4. for example, if an area of an image from a particular camera source was already sized to a dimension of 2014 by 3021 pixels, then the following largest-area canvas selections are possible:
- multiple of 2: 2014 by 3020 pixels
- multiple of 4: 2012 by 3020
- multiple of 8: 2008 by 3016
- multiple of 16: 2000 by 3008
- multiple of 32: 1984 by 3008
- multiple of 64: 1984 by 3008
- multiple of 128: 1920 by 2944
- multiple of 256: 1792 by 2816
or if you wish to retain every pixel yet still maintain grid squares of 256 pixels, then you can also add canvas to work with dimensions 2048 by 3072.
when planning to modify an area of canvas for a digital image, a photoshop user needs to determine how much of the canvas to modify, and in what way. a decision to clip (or to add) canvas involves a decision about where to clip (or to add): left or right, top or bottom, or some combination. a decision to add canvas also involves a decision about the color (or the transparency) of the new canvas.
when planning how many pixels you might need to adjust, you can remember that the pixels needed to adjust a canvas to a nearest factorable value need not exceed the number of pixels corresponding to the numeric factor. for example, to obtain a dimension that is evenly factorable by 16, a dimension of a source area will always be within 16 pixels of a value that is evenly factorable by 16. likewise, for other numeric factors.
once you have set up a grid system, then the process of planning a particular size-format can be as simple as counting grid squares. and depending on how you set up a grid system, the squares of a grid can be factorable by larger powers of 2 and 4.
the next section of this tutorial will describe different methods of resampling images, and cover some simple methods for comparing image quality.
comparisons
if you are reading this far then you are probably really motivated to get the best of a last few percent of workflow issues. recent versions of Photoshop have better resampling algorithms, and it is more difficult to see the effects of resampling on image quality than with some prior versions (please see appendix A). although the benefits of reducing resampling were often difficult to discern in the comparison of samples, some of the guidelines introduced in part 1 can help to avoid the occurrence of unsightly resampling artifacts, and can help to improve workflows.
the guidelines might be more important in the case of a workflow that is scaled to a large number of different images, for better image quality and for smaller file sizes (at least typically). it is difficult to generalize the comparisons described here to other workflows or to other types of image without additional tests, however some of the guidelines might be generally applicable.
first comparison
for Comparison 01, the standard of comparison described in appendix B was resampled to new sizes iterated from 1264 px to 1279 px. then, each 8 Bits/Channel Photoshop document was downsampled to a JPG document similar to the standard of comparison. the following table lists the particular resamples with information about some key numeric factors:
table 01: resample size and factor
| size | (factors) |
|---|---|
| 1280 | (640, 320, 256, 160, 128, 80, 64, 40, 32, 20, 16, 10, 8, 5, 4, 2) standard of comparison |
| 1279 | |
| 1278 | (6, 3, 2) |
| 1277 | |
| 1276 | (8, 4, 2) |
| 1275 | (15, 5, 3) |
| 1274 | (2) |
| 1273 | |
| 1272 | (24, 8, 6, 4, 3, 2) |
| 1271 | |
| 1270 | (10, 5, 2) |
| 1269 | (3) |
| 1268 | (8, 4, 2) |
| 1267 | |
| 1266 | (6, 3, 2) |
| 1265 | (5) |
| 1264 | (16, 8, 4, 2) |
second comparison
for Comparison 02, the images from Comparison 01 were saved down to a scale of 50%, cropped manually to the area within the white border. and then saved to a scale of 480 pixels.
table 02: resample of crop size and factor
| size | image |
|---|---|
| 157750 | e-1264px.jpg |
| 157967 | e-1265px.jpg |
| 158111 | e-1266px.jpg |
| 158220 | e-1267px.jpg |
| 157917 | e-1268px.jpg |
| 158119 | e-1269px.jpg |
| 158302 | e-1270px.jpg |
| 158239 | e-1271px.jpg |
| 158203 | e-1272px.jpg |
| 158295 | e-1273px.jpg |
| 158340 | e-1274px.jpg |
| 157914 | e-1275px.jpg |
| 157720 | e-1276px.jpg |
| 158299 | e-1277px.jpg |
| 157783 | e-1278px.jpg |
| 157738 | e-1279px.jpg |
| 158367 | e-1280px.jpg |
in a comparison of e-1280 and e-1275 at a view of 300%, some small differences in the sampling could be noticed. it almost seemed possible that e-1275 appeared slightly more pixelated. however at a view of 100% no difference could be detected. (file sizes to the byte were obtained via Mac OS X)
third comparison
for Comparison 03, the images for Comparison 02 were saved down to a scale of 66.67%.
table 03: rational resample of size and factor
| size | image |
|---|---|
| 112153 | f-1264px.jpg |
| 112376 | f-1265px.jpg |
| 112331 | f-1266px.jpg |
| 110057 | f-1267px.jpg |
| 110967 | f-1268px.jpg |
| 111027 | f-1269px.jpg |
| 110866 | f-1270px.jpg |
| 110933 | f-1271px.jpg |
| 110324 | f-1272px.jpg |
| 109295 | f-1273px.jpg |
| 108890 | f-1274px.jpg |
| 108815 | f-1275px.jpg |
| 108394 | f-1276px.jpg |
| 108319 | f-1277px.jpg |
| 108811 | f-1278px.jpg |
| 107520 | f-1279px.jpg |
| 107929 | f-1280px.jpg |
a comparison of f-1280, f-1273, and f-1269 at a view of 300% had only revealed certain minor differences in image quality due to differences in resampling. these differences were only noticeable in some fine detail, and were not discernible at a view of 100%. one other slight difference due to cropping was also noted (f-1280 contained a little more of the white border area in comparison with f-1273). other images in the set are however not noted because no other differences seemed to be as noticeable.
fourth comparison
as Comparison 03 did not reveal any clear effects due to differences in the resampling of images, an additional Comparison 04 compared image quality after various different series of downsamples. the standard of comparison described in appendix B was downsampled to 10% via the following iterations:
table 04: description of downsample iterations
| size | document | note |
|---|---|---|
| 20070 | g-128px.jpg | 10 percent via Image Size to 128 pixels (is noted as 128px); featured some visible visual artifacts, selected as a secondary comparison image |
| 20085 | g-p10.jpg | 10 percent via Save for Web & Devices 0.10 (is noted as p10); selected as a primary comparison image |
| 20092 | g-f3xp3.jpg | 10 percent via series of Image Size to 1/3 followed by Save for Web & Devices to 0.3 (1/3 x 0.3 is noted as f3xp3) |
| 20159 | g-p5p2.jpg | 10 percent via series of Image Size to 0.5 followed by Save for Web & Devices to 0.2 (0.5 x 0.2 is noted as p5p2) |
| 20164 | g-p3xf3.jpg | 10 percent via series of Image Size to 0.3 followed by Save for Web & Devices to 1/3 (0.3 x 1/3 is noted as p3xf3) |
| 20164 | g-p2p5.jpg | 10 percent via series of Image Size to 0.2 followed by Save for Web & Devices to 0.5 (0.2 x 0.5 is noted as p2p5) |
at a view of 100% no difference in image quality was discerned. a comparison of file sizes reveals that the files that were downsampled only once had the smallest file sizes, but only by a very small amount. because an effect due to resampling was not clearly revealed by a ranking of file sizes, each image was also composited as a difference blend mode with the images that were regarded to be the least subject to resampling effect. both p10 and 128px were regarded to be the least subject to resampling effect because they were only downsampled once, and because they both possessed smaller file sizes than the images that were downsampled twice.
the following table shows each downsample with both a corresponding difference blend and an inverted difference blend.
table 05: downsamples with difference blends
| downsample | image | difference blend | inverse difference blend |
|---|---|---|---|
| 128px (compared with p10) |  |  |  |
| p10 (compared with p10) |  |  |  |
| f3xp3 (compared with p10) |  |  |  |
| p5p2 (compared with p10) |  |  |  |
| p3xf3 (compared with p10) |  |  |  |
| p2p5 (compared with p10) |  |  |  |
| downsample | image | difference blend | inverse difference blend |
| 128px (compared with 128px) | |  |  |
| p10 (compared with 128px) | |  |  |
| f3xp3 (compared with 128px) | |  |  |
| p5p2 (compared with 128px) | |  |  |
| p3xf3 (compared with 128px) | |  |  |
| p2p5 (compared with 128px) | |  |  |
it may be difficult to generalize the findings of this comparison to other downsamples, however this comparison included the following:
- a subjective assessment of image quality at a view of 100%
- a ranking of file sizes
- a subjective assessment of a difference blend with images regarded to be less subject to a resampling effect
the resamples that involved factors of 3 tended to show the most difference with the comparison standard image. however a downsample to 10% also revealed some noticeable resampling artifacts (white border did not show a consistent color).
conclusion
the methods and comparisons described in this tutorial helped to inform the development of the guidelines introduced at the beginning of this article. for those who would like to produce images with less of a resampling effect, the comparisons support limiting factors of resampling to larger powers of 2 or 4 (at least for binary format images such as 8, 16, or 32 Bits/Channel). regardless of how important a consideration of resampling effects is to your workflow, this tutorial also described some methods for using Photoshop to compare image quality.
appendix A: previous results
the general guideline to reduce resampling effects by using factors of more even factoring was developed over a number of years using different computer hardware, operating systems, and software. at the time of this writing i don't have access to the previous hardware, operating systems, or software. during preparation of this tutorial, i only used a current operating system and current version Photoshop software. while preparing this tutorial, i found that i usually didn't see a larger difference in image quality due to resampling. whatever the reasons (improved hardware, operating system, or software), i didn't find any really noticeable resampling artifacts, that earlier in this decade had for one project prompted me to limit downsampling of an image to an even 50 or 25 percent as opposed to 33.33 percent of the original size. for this tutorial, i only used the Bicubic method of sampling that is available in Photoshop CS4 at the time of this writing.
appendix B: standard of comparison
a standard of comparison was chosen on the basis of potential to show a clear difference in image quality due to resampling. a photo of a natural subject and background with a relatively large file size (in comparison with other similar types of image) was selected among several other similar types of images. an image of a flower (Yellow Larkspur, Delphineum luteum) featured some fine natural textures and detail that could be examined in a comparison of resampled images. the image was obtained in raw format and was opened in Photoshop as an 8 Bits/Channel document.
the following subjective observations were also made using various Views in Photoshop without much formal control of a viewing environment:
- at a view of 50% the resulting 1280 pixel image could be seen in its entirety on a display (a fit to screen value was 58.36%).
- at a view of 100% pixelation was not easily apparent (even upon a close scrutiny of the display screen). the image quality at this view was regarded to be excellent.
- at a view of 200%, some pixelation was apparent with a close look at the screen. the image quality at this view was regarded to be pretty good. from an arm's length to the display however, pixelation was not really discerned.
appendix C: additional details about comparisons
the purpose of this tutorial is to quickly identify differences in image quality due to differences in resampling (and not to consider so much the quality of a particular display or the perception of a particular user in a particular viewing environment).
Comparison 01:
the image described in Appendix B was subsequently cropped to a square of 1280 x 1280 pixels (which meant that the scaling of both the height and width would correspond to the same number of pixels, thus limiting this comparison to the effects of resample effects that are not due to a difference in the dimensions of height and width). a white border with a width of 4 pixels was drawn at a position of 64 pixels from each edge. an automatic levels adjustment was also applied. then the Save for Web & Devices function was used to downsample the image to a JPG at 100% quality from a legacy resolution that was provided by a camera source to a lower default resolution that was designated for a web graphic.
Comparison 02:
for Comparison 02, the images from Comparison 01 were saved down to a scale of 50%, cropped manually to the area within the white border. and then saved to a scale of 480 pixels.
some preliminary work on this tutorial was first described on a National Association of Photoshop Professionals community forum. Adobe and Photoshop are trademarks or registered trademarks of Adobe Systems Incorporated. Mac OS and Mac OS X are registered trademarks or trademarks of Apple Inc. all other trademarks are the property of their respective holders.
|
❄ content management and development services ❄ e books ❄ sci net ❄ puzzle ❄ privacy ❄ contact |
Ronald L Stone
web
|
Google+
Facebook
LinkedIn
Twitter @photonron
| enhanceability.com web page updated: |
| d3Z35 ✦ t115 |
| UCN 12013 Z35 yearend ✦ IDC UT t115 tt324 |
| 2013 day of year 365 |
| AD 2013 December 31 Tuesday ✦ SMH UT 02:46:04 |