Resizing Raster "Logo" Artwork

When a bitmap/raster image needs to be resized, a lot of things can go wrong. I have become a go-to person for careful downscaling. I generally dislike using generators for this purpose as these are often "identity" or "promotional" graphics and they should be handled carefully. I've discovered and re-discovered this process in Photoshop several times. While using SVG is possible, often brands don't want to serve an SVG version of their logo to prevent abuse/misuse.

Problems to look out for

• Blurry pixels, especially around details and letters
• Artifacts generated by the scaling algorithm (usually a halo)
• Clipping/hard-edge pixels generated by the scaling algorithm — pixels along the edge that downsampled into hard edges instead of smooth curves
• Thin lines that render poorly — in the case of outer outlines, this may be "fixable"

Resizing algorithms

Algorithm	Summary	Pros	Cons
Bilinear	Uses values of only the 4 nearest pixels. Takes a weighted average of these 4 pixels to arrive at its final, interpolated value. Source	Fewer artifacts, no overshoot (haloing) — Good for solid shapes	Lost detail
Bicubic	Uses values of 16 pixels to determine final, interpolated value.	Increases acutance (apparent sharpness) — Good for small text, photographs, gradients	Causes overshoot (haloing) and clipping (see also ringing artifacts) Source

Note there are many other image scaling algorithms, but these are the most commonly available.

Does it matter anymore?

This need comes up less in an age of high-density pixel displays and contexts where images are automatically scaled proportionally and cleanly if served from a large source file. Generally the downscaling is decent. However, there are cases where it's not perfect, or the latest browser release downscales in a poor way (several times, Chrome). It may also be necessary to salvage every pixel for performance reasons, and serve exact sizes.

Photoshop downscaling

1. Create a large square transparent canvas, something like 1000px x 1000px.
2. Create a second canvas that matches the target size exactly (in pixels) — this should be the same ratio as the target artwork to be resized.
3. Fill the target canvas with black pixels.
4. Copy the target canvas black pixels over to the first canvas. Leave the second canvas for later.
5. Center the target canvas black pixels with the background.
6. Paste from a vector file "as pixels" into the large canvas and overscale it to something like 500px (will depend on target size).
7. Center the pasted artwork.
8. Select the brush tool and place a dot on each edge of the canvas on the artwork layer (there should be enough transparent pixels to not touch the artwork). You want the dots to overlap with each edge. The dots reinforce the square ratio while scaling, and will take the brunt of edge artifacts/clipping from scaling.
9. Make a copy of the artwork with edge dots so there are two layers. Hide one.
10. Transform the artwork layer while holding the alt key to maintain centering. Downsize and align within the target black pixels canvas (or change colors if necessary). This is a bit of an art. You want the artwork to fit inside the canvas enough that no hard edges will exist. If you have a think outline around the art, try to choose a little extra room. Choose the "bilinear" algorithm for this layer, and take note of the final size in pixels before finalizing the transform.
11. Unhide the artwork copy and move it above the transformed/downscaled layer. Repeat the step above, except this time use the "bicubic automatic" algorithm, and instead of manually resizing, resize to the same size as the previous layer.
12. Mask out the entire bicubic layer.
13. Paint details back into the artwork — the bicubic layer will likely have a bit of a halo effect that reinforces details and text — this is more art than science.
14. Adjust the opacity of the bicubic layer if necessary — you are going for clean colors with subtle "sharpening."
15. If necessary, erase text such as ™️ or R and create a new text layer at actual pixel scale for it. I'll often choose the "Strong" (not bold) setting because these are so small.
16. If the artwork has an outer thin line that doesn't downscale well, post-resizing you may be able to add a stroke to smoothen the effect. Go to Layer > Layer Style > Stroke, and set the effect to 1-2px, center, and adjust opacity. This is more art that science, and you might have to break your artwork apart depending on the context. This will be more important for an image that will be viewed on 1x (96 ppi) devices. Higher resolution devices will serve larger artwork and render the thin lines more smoothly. Where this strategy doesn't work well, I have advocated for removing thin outer lines for screen display. They are often weak elements to begin with.
17. Turn off the black target canvas layer so only transparent pixels exist behind the artwork layers.
18. Select around the artwork, excluding the black reference dots.
19. Copy all (ctrl + shift + c) into the secondary canvas.
20. Delete or hide the black pixels and export as a transparent PNG.