Skip navigation
CBAU_123
Currently Being Moderated

Best way to insert a table into image with high resolution for web?

Apr 17, 2012 4:34 PM

Tags: #photoshop #image #jpeg #resolution #website #table #quality #excel #high #gif

I've tried inserting a table from Excel into Photoshop and making a jpeg and gif out of it, but when I upload it to the web the resolution is terrible.
Any ideas on how I can make get a table into an image? It's a bit too complex to create with HTML.

 
Replies
  • Currently Being Moderated
    Apr 17, 2012 5:38 PM   in reply to CBAU_123

    Try saving the excel document as a .pdf, then either place it into Photoshop or open the .pdf in Photoshop and drag it to your document. You can always change the resolution of the .pdf while opening it into Photoshop.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 6:17 AM   in reply to CBAU_123

    How complex is this table to prevent rendering in HTML?

     

    By turning it to an image, you dumb it down so far that search engines are blind to it.

     

    CBAU_123 wrote:

    ...but when I upload it to the web the resolution is terrible...

    It should be apparently terrible while you are working in Photoshop. If the poor resolution only appears after you upload, there is much more to the story that needs to be explained.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 5:46 PM   in reply to CBAU_123

    Well, you are leaving out a lot of info.

     

    a: how are you saving it in Photoshop? What file type/compression amount, etc.

    b: how are you uplaoding it - where are you uploading it - are you uploading JUST the image, or are you uploading the image within an .html document?

     

    One thought, if you are JUST uploading it as an image, then trying to view it in a browser, if the image is larger than the viewport of the browser, some browsers will automatically rezie the image to fit visually into the viewport. More than likely, this resizing could be causing image distortion. Imagine it like when you zoom in/out in Photoshop - (unless you are using the accelerated graphic gui option in PS preferences), any zoom level outside of 25%, 50%, or 100% will cause visual distortion.

     

    Give a link to where you have uploaded the image (or whatever you are talking about). Like I said, there are other things to consider as to why this is happening.

     
    |
    Mark as:
  • Trevor Dennis
    5,844 posts
    May 24, 2010
    Currently Being Moderated
    Apr 18, 2012 5:53 PM   in reply to Marian Driscoll

    Marian Driscoll wrote:

     

    How complex is this table to prevent rendering in HTML?

     

    By turning it to an image, you dumb it down so far that search engines are blind to it.

     

    Amen to that.   It is just a plain bad idea to insert table and text as a bitmap.  What are you using to create the webpage?

     

    http://www.tips-tricks.com/table.asp

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 6:36 PM   in reply to Trevor Dennis

    By turning it to an image, you dumb it down so far that search engines are blind to it.

    That's really relative to the actual content inside the table. If the table content is arbitrary to the design and used more as a visual element, then it wouldn't matter if search engines can index it.

     

    It is just a plain bad idea to insert table and text as a bitmap.

    That's not necessarily true either. Again, it just depends on what the actual table content is. I've used Excel to visually format text, export as .pdf, then placed into Photoshop many times (but that's when I was just creating a graphic).

     

    I'm sure we all agree if the table content is valuable data, it needs to be editable text, but depending on the end result desired, rastered text can be a reasonable solution.

     
    |
    Mark as:
  • Trevor Dennis
    5,844 posts
    May 24, 2010
    Currently Being Moderated
    Apr 18, 2012 7:16 PM   in reply to CBAU_123

    You'll note that I said bitmap.  That is not the same a pdf.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 7:24 PM   in reply to CBAU_123

    <p>
    <img alt="" src="https://lh4.googleusercontent.com/-tfmo1w9zygo/T3OmA9lNbmI/AAAAAAAAJWY /cJ7xLaZn-jk/s640/rubies.jpg" style="width: 600px">
    </p>

     

    One thing I noticed is you are putting an inline style in with the img tag. You have a width of 600, but the image properties show the image is 542px × 640px - without looking any further, that's probably the issue. You have competing dimensions. Plus, if you are physically inserting an image, you really should include its width and height values within the img tag.

     

     

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 7:33 PM   in reply to CBAU_123

    If you compare the image from the web link you provided to the actual link of the image itself, you can tell a difference in quality (although the characters are still a little fuzzy. There must be some other parameters you have that are conflicting. Check your CSS too. Try inserting the image into a blank html document, upload that, and see what your results are. Like I said, I think the answer is what I mentioned above.

     

    https://lh4.googleusercontent.com/-tfmo1w9zygo/T3OmA9lNbmI/AAAAAAAAJWY /cJ7xLaZn-jk/s640/rubies.jpg

     

    You'll note that I said bitmap.  That is not the same a pdf.

    I don't think I said anything about bitmap compared to .pdf. I didn't think anyone would still be using a bitmap to begin with.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 7:37 PM   in reply to CBAU_123

    You never said what html editor you use, but Dreamweaver lets you import table data. If you don't have DW, I think other editors should allow you to do the same. You can always export Excel into a comma delimited data sheet and import into html editor (again, all depends on your editor).

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points