: How can I optimize my graph images for my website? The graphs are terribly detailed and include text for identification. These graphs are created in Visio by engineers then passed to me for

@Shakeerah625

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

Vote Up Vote Down

@Marchetta832

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.

Vote Up Vote Down

@Michele215

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 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.

Vote Up Vote Down