0

I’m working on a project where I need to overlay some charts (scatter plots and bar charts) onto a laptop screen in an image. While trying to get this done in Photopea, I'm facing a challenge. The biggest issue is resolution—I have to downsize the charts significantly to fit them onto the laptop screen, which makes them lose a lot of quality and become almost unreadable. The charts end up being pretty non-legible after resizing.

Has anyone dealt with similar resolution issues when downsizing images? If so, could you share some advice on how to preserve quality? Is there a better tool or method I should be using?

I’ve attached a couple of examples of what I’m working with here:

  • The image of the laptop screen where the chart should go.
  • The chart images that need to fit inside the screen.
  • Example of what I got after my attempt.

Thanks in advance for any help! 🙏

Improve this question
1
  • 1
    The problem is the image of the laptop screen is too low resolution (too small in pixel dimensions). Find a higher resolution (larger) image. Then when you scale the images inside the screen you won't have to rescale them so small, giving you a higher resolution image in the end. Also the text doesn't have enough contrast compared to the background. You have quite dark grey text over a dark blue background, making it difficult to read.
    – Billy Kerr
    Commented Oct 15 at 11:53

1 Answer 1

Reset to default
0

The "correct" way to do this is to change the parameters from the program that generates the chart, MS Excel, LibreOffice Calc, or whatever.

Especially 3 things.

  • Font family and size
  • Line/bars width
  • Spacing of elements.

The "hard" way would be exporting or copying the vector chart to a vector-based program. Corel, Affinity Designer, Illustrator, or Inkscape, and edit it there, to adjust... font family and size, line/bars width, and spacing.

It is not really hard, you just need to know the software.

If you export the chart as raster and change the resolution, you by definition, are loosing resolution.

Improve this answer
2
  • The charts are from the website that I'm developing, users are generating it based on data from API. So I can only take a screenshot of the charts generated, I don't know another way. What's the easiest way to fix it, using something like Photopea or AI generators?
    – Bishop_1
    Commented Oct 15 at 7:32
  • @Bishop_1 there are only 2 solutions: redo / trace over your screenshot in a vector program (and redo the text) or increase the resolution of your laptop screen image, so that you can use a larger screenshot. A tiny image can't hold more pixels.
    – Luciano
    Commented Nov 14 at 8:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.