How to properly save images for geektimes?

Question

Images

Preparing a draft post on geektimes. Graphs and tables look bad.

An example - a printscreen took a table from the screen from a Word, changed formats, image sizes - the letters in the post look dull. And on a huge picture, auto-reduced for viewing, and on a picture obviously smaller than the bandwidth. Both jpg and png.
How can I make the text in the table look as clear as the body text?

Answer 1

The difference is in anti- aliasing .
In Windows, the text is anti-aliased rather harshly - the algorithm allows distortion of the shape of the character to better fit into the pixel grid and the letter looks almost like a pixel art:

enlarged fragment

On a Mac, the situation is different - the text is smoothed while maintaining the font design, but looks softer.

screenshot of your question

Learn more about anti-aliasing differences on different platforms.
The Makovsky version is more like what you get with the illustration, and your picture does not seem to me incorrectly blurred.
In order for the picture to look as "crystal" clear as the text under Windows, it is necessary that in the publication its size be 1:1 from the screenshot taken. It is necessary to avoid recalculation of the image in the browser.
Understand what size the images in your publication become and prepare a 1:1 pixel-for-pixel illustration.
At the same time, readers on a Mac will see a “clearly Windows” screen with pixel text among harmonious soft text.

Answer 2

I deliberately made the picture a little narrower than the width of the tape, so that it would not be compressed or stretched, the result is the same.