How can I optimize my graph images for my website?

Question

The graphs are terribly detailed and include text for identification. These graphs are created in Visio by engineers then passed to me for website article creation. I normally take the graph file, open in Photoshop and Save As a PNG-8. However, they are so unreadable that they are almost useless. :( Thanks in advance for any recommendations! (Long time reader, First time question!)

Answer 1

Do you have a clear idea of the objetive of this images?

You probably do but you are not making good choices.

1) Use SVG. This are scalable, zoomable. They maintain the original detail if you zoom them.

2) Export the original ones at higher resolution. If you need them to fit somehow in your webpage, you use theese as a thumbnail and on click you show the high res pictures. Any lightbox gallery can do that.

3) If you need them to be printed, atach a pdf file at high resolution or in vector format.

4) If this are the only thing you have, use png 24 and apply some sharpening. You can try increasing a bit the contrast playing with the levels, mainly on the dark side.

5) If this is all you got but you still need hi res files... Make the graphs again.

It is important to be clear on something. If your client needs some degree of quality he needs to provide the resources to achive that. Either he provide the source files or pay you more to make this aditional graphic material.

---

Acording to your coment let me add some options.

6) I am not familiar with the Visio program, but there is a chance to have some kind of export settings, so try modify them to have a better resolution.

7) If there are not such settings you can make a screen capture. Use a high resolution monitor. At the end the images are to see them on screen so you will have the same resolution as the one needed to show.

8) Another option is to print them into a file. try to use a virtual printer like Pdf creator www.pdfforge.org. Just be carefull on the instalations, becouse as it is a free software sometimes it try to install some browser bars or other kind of advertisement software.

You can choose the print output and configure he resolution. If you choose a bitmap file like png it will generate a non aliased image. Simply export at double the size you need and rescale in Photowhatever at half resolution with an interpolation method like bicubic.

Answer 2

The biggest problem you have is with your text, which is aliased and way too small to render correctly. If it's a live text in Photoshop - turn off text aliasing for specific text layers, increase font size, then re-export.

If it comes to Photoshop flattened from Visio, increase font size in Visio. Graphs scaling can be adjusted to accommodate increased font size.

Answer 3

Recomendations for optimizations:

1.- Image PNG to SVG format

2 .- html : <img src='image.svg'>

2.- css (keep ratio): img {max-width: 100%;max-height: 100%;}

3.- Use meta tag for mobile devices: <meta content='width=device-width, initial-scale=1' name='viewport'/> in html head tag for avoid distortion image