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

Explorer ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

I am trying to customize an image a little bit.  I started with a stock photo, and we are adding our own app image screenshot onto the phone in the image.  We also have a QR code with some text.  

 

This all looks great at the original stock photo resolution of 5000 x 3333.  So our screenshots are high res, and they look at that level.

 

However, 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.

 

I've tried using different resample options, but I can't get anything to work well.

 

Is there any way I can make this work better?  Here is a copy of the PSD we are working with for reference:  https://drive.google.com/file/d/1eu3ducL_aotM8h8dXTTAnE_bO8jy6FZH/view?usp=sharing

 

Any information on this would be greatly appreciated.  Thanks!

TOPICS
How to

Views

363

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

Thanks for your reply.

 

Some of the fonts on the image are typed directly onto the image using the PS type tool.  These are 48 pt and 26 pt.  Some of the other fonts are on a rasterized JPG copy of another image that was pasted into this image.

 

We basically started with the 5000x3333 image at 300 resolution.  Everything looks crystal clear at this res.  I'm simply trying to resize it down to 500x333 so that it will work well on the web in general.

 

Yes, we are working in the layered PSD (provided in the original post).  I am resizing it this way, and then using "Export As..." to try PNG or JPG versions.  Both are giving me the same problem.  I did try flattening the image before resizing, but that is also giving me the same result.

 

We aren't emailing an attached image.  We're smply using the image inside the body of the email.  Like a logo, for example, but this is a different image.  

 

So a PDF isn't the goal here.  We need a JPG/PNG that we can place in an email content or on an actual web page.

 

Any additional info on how we can accomplish this would be great!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

So are you trying to produce graphics specifically for web use?  That's probably a very specific skill set, so I am going to tag @Nancy OShea who is going be able to give you much better advice than most of us.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Most Valuable Participant ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

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

JJMack

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 15, 2021 Apr 15, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

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.

 

Source: https://en.wikipedia.org/wiki/Scalable_Vector_GraphicsSource: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

 

Hope that helps.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Most Valuable Participant ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

The part that confuses user is images are displayed on displays and printed with pixels they are not plotted with a pen.  They do not understand the scaling part properly. With Vector graphics the text characters are math computed paths they have a well defined mathematically defined shape. And can be drawn or plotted out well with square high resolution pixels any size. You need a sufficient number of pixels and a character size that will be readable. 

 

Raster Image do not have vector shapes they are have a rectangle  shape Canvas that contains a matrix of Pixels.  A Pixel has a color and luminosity they are just a square peg  in a square hole. When you change the size of the matrix there are fewer or more square holes that need a color. There are no shapes to plot. What color should each pixel in the new resized image be.  Beets me and its depends on the images content what will work best. The is why the are so many interpolation available to use.   With fewer pixels you need to discard details you had. With mot pixels you have to create details you do not have, There are no paths to plot out shape of grass, trees, text etc there is just the old matrix image the you can interpolate into a new different size matrix.   

JJMack

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

SVG QR Code Generator.

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

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 16, 2021 Apr 16, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied


@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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

Thanks for the detailed reply!  I think I'm just going to re-create our app screen in Illustrator and then either use it as a Smart Object in Photoshop or add the text and QR code after I've already gotten it to the size I need.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 20, 2021 Apr 20, 2021

Copy link to clipboard

Copied

LATEST

Every modern browser supports SVG images. 

https://caniuse.com/svg

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines