Resize (Resample)
A very common task when optimizing images is decreasing the image size in pixels.
Resizing is done using so called “resample filters” or “interpolation filters” which decide what pixels should be added in the case of enlarging or what pixels should be removed in the case of shrinking.
It has no point in using a bigger image if it is rendered on screen at a smaller size. It is even better to resize it to ensure the display quality is not modified.
When the source image is bigger than the rendered size a similar process is used (usually a plain resize, but if you are lucky, a fast interpolation filter like Bilinear, much inferior to the slower, higher quality filters present in RIOT). So to insure the program (a browser, a viewer, etc) or the device (like a digital photo frame or phone) will not resize the image using it’s own filter, you must make sure you resample the image using one of the good RIOT filters.
You will benefit then of:
- smaller filesize
- higher image quality
- faster response time from programs or devices
A common mistake amateur web-designers do is to use a big image and set a smaller size via HTML or CSS. This is wrong, for the reasons explained earlier.
To resample an image using RIOT, you must open first the image then use any of these methods:
- menu-> Edit->Resample
- shortcut: Ctrl + R
- bottom toolbar: the resample button
located in the left of “Compress to size”
The resample dialog will pop up like this:
Resampling filters present in RIOT:
1. Box filter(also known as Nearest Neighbor).
This method is the simplest and the fastest: it computes new pixels as the value of the nearest pixel in the source image. This produces a blocky result when upsampling and a grainy effect when downsampling.
‘Box’ filtering is only suitable for ‘binning’ images, that is, reduce images by integer multiples to ensure that every pixel in the result is an average of the same number of neighbouring pixels (the ‘bin’). The resulting image will thus remain clean looking.
The box filter works best with illustrations containing non-anti-aliased edges like rectangular shapes.
2. Bilinear (also known as Triangle)
This is a fast filter, with smooth results.
Bilinear interpolation considers the closest 2×2 neighborhood of known pixel values surrounding the unknown pixel. It then takes a weighted average of these 4 pixels to arrive at its final interpolated value. This results in much smoother looking images than nearest neighbor.
Bilinear filtering is rather accurate until the scaling of the image gets below half or above double the original size of the texture – that is, if the image was 256 pixels in each direction, scaling it to below 128 or above 512 pixels can make the image look bad, because of missing pixels or too much smoothness.
This algorithm reduces some of the visual distortion caused by resizing an image to a non-integral zoom factor, as opposed to nearest neighbor interpolation, which will make some pixels appear larger than others in the resized image.
The Bilinear filter is recommended as a fast alternative to the other filters when resizing artificial images such as textures or gradients.
3. Cubic family filters
Bicubic goes one step beyond bilinear by considering the closest 4×4 neighborhood of known pixels — for a total of 16 pixels. Since these are at various distances from the unknown pixel, closer pixels are given a higher weighting in the calculation. Bicubic produces noticeably sharper images than the previous two methods, and is perhaps the ideal combination of processing time and output quality. For this reason it is a standard in many image editing programs (including Adobe Photoshop), printer drivers and in-camera interpolation.
RIOT includes the following cubic filters:
- Mitchel – Netravali bicubic
Mitchell and Netravali’s bicubic filter is an advanced parameterized scaling filter. It produces very smooth output while maintaining dynamic range and sharpness. Bicubic scaling takes approximately twice the processing time as Bilinear.
- Catmull – Rom bicubic
This is a variation of the bicubic filter where the “B” parameter controlling blurring is set to 0, producing sharper images.
The Catmull-Rom filter is generally accepted as the best cubic interpolant filter. Some people preffer it over Lanczos3 because it has reduced ringing effects and a slightly smoother output.
Interesting thing to know is the fact this filter has an output almost identical to Lanczos2.
- B-Spline 4th order (cubic)
The B-spline filter produces the smoothest output, but tends to smooth over fine details. This function requires the same processing time as Mitchell and Netravali’s Bicubic filter.
B-spline filter is recommended for applications where the smoothest output is required.It has the advantage of dampening noise and JPEG artifacts.
4. Lanczos3
This is the most theoretically correct filter and produces the best output for photographic images that do not have sharp transitions in them. However, Lanczos will produce ripple artefacts especially for block text, due to aliasing. Lanczos also requires three times the processing time of Bilinear.
This is a slow method but it usually produces the sharpest images. Under certain conditions, it may introduce some ringing patterns and emphasize JPEG artifacts.
Lanczos uses a filter based on the sinc function
Appendix:
Common interpolation errors:
References:
http://www.cambridgeincolour.com/tutorials/image-interpolation.htm
