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.
-
Answer # 1
-
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/34nFfq1If 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
- html - image cannot be displayed with relative path
- no characters are displayed below this where did the written html go?
- [html/css] i want to display characters on the image
- html - how to match the image displayed by css sprite to the enlargement/reduction of the screen?
- html - no background image is displayed how can i display it?
- html - image characters i want to line up side by side
- ruby - the image is displayed as strange characters in rails
- html - only when sharing fb, the ogp image will be displayed different from the specified url
- html - [bootstrap] jumbotron image is not displayed
- html - the background image is not displayed
- html - rails image is not displayed
- html - the image becomes blurry when it is made smaller
- html - i want to change the position of the image with a responsive design
- jquery plugin - image is not displayed in jquerybgswitcher
- javascript - html js image switching
- html - i want to display an image with background-image
- php - png image is not displayed
- html - coding of variable size characters
- jquery - i want to know how to specify the image to be displayed with the slick slider
- javascript : Block scrolling by clicking on the arrows
- html : The syntax in scss is partially not highlighted for some reason, '{' is lit in red, although there are no errors and ther
- The height of the html element is actually higher than indicated
- javascript : Slick slider not adapting
- html : The top panel conflicts with the picture
- html : How to make such a list?
- javascript : How to implement the promotion of text from the block?
- html : How to lay out a block with text and a separate element
- html : Why is the block not center aligned?
- html : When adding img, unnecessary occupied space is created around
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.