Resizing to a smaller image size is making text quality very bad..??

---

@Angell EYE wrote:

I am trying to customize an image a little bit...looks great at the original stock photo resolution of 5000 x 3333...when I resize down to 500x333 for an email, for example, it looks very bad.  You can't read any of the text, and the QR code gets all pixelated.  Basically, everything we added gets messed up when we resize.

---

Working with vector SVG graphics may help, but might not completely solve the problem. The main problem is that it’s being composed at pixel dimensions that are roughly 10x the dimensions needed in the email (5000px long vs 500px long). The reason none of the resampling methods is working is because of that large reduction factor. No matter which resampling method you use, the software must decide which 90% of the pixels to throw out, and when you throw out 90% it is very difficult to maintain the integrity of details like type and QR codes.

For the text, traditionally small font sizes are designed differently than large font sizes. Small font size include slight design variations called “hints” that enhance readability at small sizes. That means the best way to have small type in a 500 x 333 px image is to add it after the base image has been resized to 500 x 333 px. If you set the type at 5000 x 3333 px and then scale it down by 90%, you are actually scaling down type designed for large sizes, instead of using type designed for readability at small sizes.

If the QR code is being added at 1:1 size at 5000 x 3333 px and then downsized 90%, the sheer number of pixels thrown out means that the QR code is probably not going to work afterwards. The QR code should be added at 1:1 after the base image is downsized to 500 x 333 px.

If you want to try SVG, first check if SVG will be supported on all your targeted email clients. If it turns out that using SVG doesn’t help much, abandon that and go back to Photoshop: First resize the base image to 500 x 333 px and then add the type and QR code. It’s definitely more work than just resizing the big version, but you get the results you want. It’s how it’s always done — if you look at an ad campaign across print, web, TV, and mobile, the ads are always manually designed for the size, resolution, and shape of each medium. They are not the same image that’s simply resized, because that doesn’t work.

I could swear I've done this in the past, but obviously I'm mistaken.

I appreciate all the feedback I've gotten here.  I guess I'll just have to re-create this particular graphic in Illustrator and leave it vector.

We were just taking a screenshot from our phone, and again, it looks great at high res, but not when we resize lower.

Thanks again!

You would need to re-create the elements that you wish to be more ledgible at the final size, and even then there are going to be limitations.

SVG QR Code Generator.

https://qrd.by/qr-code-generator-svg

Hi @Angell EYE,

Text in pixel-based raster images, especially low res ones, always looks bad.   Never use raster images as a replacement for real HTML text because raster images cannot be indexed, translated or resized by visually impaired users.  You can make real text prettier with custom web fonts (Adobe Fonts, Google Fonts) and CSS styles if you wish.

For special use cases, Scalable Vector Graphics are math based, not pixel based.  So SVGs are an excellent option for web logos, icons, comics, drawings, brand names, infographics and other non-photographic images. I prefer to use Illustrator to make vector graphics and export to SVG.  The resulting code can be further edited in Dreamweaver or other code editors if needed.

Hope that helps.

Do you have problem with text on layer: Screenshot_20210415-221917_Chrome?

That is normal, you have small text on raster based layer. When you heavily downsample image, pixels which represents text on that layer becomes too small. Nothing that you or Photoshop (read today technology) can do about that.

Most of the text in your image is raster text which will not interpolate well it is not vector text layers. How small are you resizing to. Text needs  pixels and size to be readable

What is the font size in the downsized image?  Some fonts are designed for small sizes, like the system and app fonts on your computer.

Are you downsizing a layerd document, or have you rasterised before downsizing?  i.e. are you downsizing a JPG?

How much bandwidth do you have available for emailing the downsized document?  What file size would be acceptable?  Try downsizing the fully layered document with intact type layers, and saving as a PDF file.  The text would remain scalable in a PDF file, even if the raster layers are small.