Home>

i displayed the image in html, but the characters are blurry solution

The png image was displayed with the HTML img tag.
There is some text in the image, but due to the screen, it can only be displayed at around 400px.
If i zoom in, you can read the text without blurring, and if you use this font-size in HTML, you can output it clearly enough to read it normally. However, the image as it is is a little blurry.
Is there a solution?

Solution 1 that you can think of
-Crop to the edge of the image and enlarge it a little.
However, this is a last resort because it can be difficult because there are many images.

How to come up with yourself 2
・ Make the text characters a little larger
This is also a last resort.

html css
  • Answer # 1

    If it is the figure shown, I think that it should be output or recreated as a vector image (SVG) if possible. No matter how much you enlarge it, it will be displayed clearly and the file will be lighter. If possible.

  • Answer # 2

    Try to make the size of the image to be prepared exactly the same as the size actually displayed, or prepare it in a size that is twice the display size.

    Please take a look at the sites that came out around here.
    http://bit.ly/34nFfq1

    If the original image size is small, or if the image display size is responsive and fluctuates depending on the screen width, it may be difficult to avoid blurring.

Related articles