Jump to content

 
Photo

.GIF, .TIF other image formats for the internet.

- - - - -

  • Please log in to reply
16 replies to this topic

#1
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography & Bouldering!
  • United States

I have read many opinions off of the internet saying that .GIF, .PNG and .JPEG were the standards for images displayed on webpages. While creating my website I have the option to preview what the page will look like in the browser(internet explorer), so I tried my image which was a .PNG format and it looked horrible. The legend couldn't be read as well as other things. I tried .JPEG and .GIF and they all looked about the same. As a last resort I tried .TIF and the image looks great. When I look at other websites, especially viewing maps, they are using .GIF. So, my question is why did the .TIF only work for my maps? Has this happened with anyone else?
By the way, this is my first time placing images on a website.
Thanks

#2
GISRox

GISRox

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 104 posts
  • Gender:Male
  • Interests:Outdoors, maps, travel.
  • United States

Did you resize the image before placing it in some HTML code? I would highly recommend you resize the graphic, prior to placing into a web page. Keep the initial image small, say 800x600. This helps for speedy page display and download time. If this doesn't provide the resolution necessary, I would use a thumbnail - full view approach. Basically you resize the graphic down to a smaller size(240x240) and allow the user to click on a link to a larger image or better yet, a PDF file.



#3
benbakelaar

benbakelaar

    Ultimate Contributor

  • Associate Admin
  • PipPipPipPipPipPip
  • 658 posts
  • Gender:Male
  • Location:North Brunswick, NJ
  • Interests:maps, information, technology, scripting, computers
  • United States

I tried my image which was a .PNG format and it looked horrible.  The legend couldn't be read as well as other things.  I tried .JPEG and .GIF and they all looked about the same.  As a last resort I tried .TIF and the image looks great. 

<{POST_SNAPBACK}>


Honestly I'm surprised your browser displayed a TIF file, I did not know they had that capability. The reason your JPEG, GIF and PNG looked bad is because most current browsers have an "auto-fit" function, so if you are viewing just an image, it will "size to screen". In Firefox, under "Tools -> Options -> Advanced -> General" you will see "Resize large images to fit in the browser window" as an option. There will be a similar option in Internet Explorer. Most people will not have changed this default option. So that explains why it looked that way... if you hover the mouse over the image you should see a magnifying glass (in Firefox). In IE, you have to hover over the lower-left corner (or maybe it's any corner?) and you will see a box with 4 arrows pointing outwards to expand the image.

To fix this issue, PaulM's advice is correct.

#4
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography &amp; Bouldering!
  • United States

PaulM:
I have a small version of the image(map) which the user clicks on and this brings up a new page in my browser with the image. All of the images are originally 1056x816. So I didn't resize it at all, I just selected it to be displayed in a new window. PDF looks great, but on some computers distorts symbols, north arrow, etc.
benbakelaar:
I am trying to set this up for people to view who aren't going to know how or either not bother with trying to reset anything within their browser, etc. They will just close it and assume it is the map.

#5
benbakelaar

benbakelaar

    Ultimate Contributor

  • Associate Admin
  • PipPipPipPipPipPip
  • 658 posts
  • Gender:Male
  • Location:North Brunswick, NJ
  • Interests:maps, information, technology, scripting, computers
  • United States

PaulM:
I have a small version of the image(map) which the user clicks on and this brings up a new page in my browser with the image.  All of the images are originally 1056x816.  So I didn't resize it at all, I just selected it to be displayed in a new window.  PDF looks great, but on some computers distorts symbols, north arrow, etc. 
benbakelaar:
I am trying to set this up for people to view who aren't going to know how or either not bother with trying to reset anything within their browser, etc.  They will just close it and assume it is the map.

<{POST_SNAPBACK}>


Any distortion is the result of auto-shrinking, whether it is inside an Adobe Acrobat PDF or the browser window. If you want to ensure to the best of your ability that your customers/clients always see a 1:1 image, there are several options:
1) You can use a Flash app like Zoomify
2) You can display the map in an AJAX/WMS interface (i.e. Google Maps, OpenLayers, WMS)
3) You can do some CSS hard-coding, which could look something like below:
<div style="width:1056px;height:816px;position:absolute;top:0px;left:0px;">
<img src="image.jpg">
</div>
4) You can provide mutiple sized images that fit inside standard display settings (640x480,800x600,1024x768).

Even so, depending on users settings, it may be possible that some of them do not see a 1:1 image.

#6
peanut

peanut

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 138 posts
  • Location:Austin, TX
  • United States

You can take the PDF into Adobe Illustrator and select all of the fonts and convert them to outlines. This will get rid of your distortion problem for the symbols.

If you are going to go the image route I would make them much smaller than 1056 x 816. Most users have their monitors set to 1024 x 768 and many have their monitors set to 800 x 600.

I would also pick a specific size for the image and then make a web page wrapper for it where you explicity set the width and height of the image in the IMG tag to the width and height of your image. If you do this the browser won't resize the image on you.

Rich

#7
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography &amp; Bouldering!
  • United States

In response to benbakelaar, I don't have Flash, I am not using those interfaces and I don't know how to code that.

peanut: unfortunately I don't have Illustrator(yet!), but I will try to resize them smaller as you suggested. Though when I preview them in the browser window they aren't that large anyway. I don't know how to make a wrapper. I am doing this from Yahoo's SiteBuilder webpage creation software.

#8
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography &amp; Bouldering!
  • United States

I just went adjust the size of my images and I realized that when I saved them previoiusly(jpeg, gif, png) that they were set to 72dpi which was 792x612. That was what I had tried earlier and that was what displayed so badly. Now I am really confused.

#9
benbakelaar

benbakelaar

    Ultimate Contributor

  • Associate Admin
  • PipPipPipPipPipPip
  • 658 posts
  • Gender:Male
  • Location:North Brunswick, NJ
  • Interests:maps, information, technology, scripting, computers
  • United States

The wrapper peanut talks about is the CSS code that I wrote in my post. I don't know if you will be able to solve your problem using Yahoo SiteBuilder. If you have a paid account, maybe you can call their technical support, or post to a community support board there.

#10
benbakelaar

benbakelaar

    Ultimate Contributor

  • Associate Admin
  • PipPipPipPipPipPip
  • 658 posts
  • Gender:Male
  • Location:North Brunswick, NJ
  • Interests:maps, information, technology, scripting, computers
  • United States

I just went adjust the size of my images and I realized that when I saved them previoiusly(jpeg, gif, png) that they were set to 72dpi which was 792x612.  That was what I had tried earlier and that was what displayed so badly.  Now I am really confused.

<{POST_SNAPBACK}>


What software are you using to generate your map images?

#11
peanut

peanut

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 138 posts
  • Location:Austin, TX
  • United States

peanut: unfortunately I don't have Illustrator(yet!), but I will try to resize them smaller as you suggested.  Though when I preview them in the browser window they aren't that large anyway.  I don't know how to make a wrapper.  I am doing this from Yahoo's SiteBuilder webpage creation software.

<{POST_SNAPBACK}>


As others have stated, the reason your image doesn't look large in the browser is because you are linking directly to the image and the browser is sizing the image to fit within your browser window. This is why you are seeing the image distortion.

Instead of linking to your image you should link to a page that contains your image(thats what I meant by wrapper.)
I don't know how Yahoo's site builder software works but you should be able adjust the width and height attributes of your IMG tag on the HTML page you use to contain your image.

Rich

#12
GISRox

GISRox

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 104 posts
  • Gender:Male
  • Interests:Outdoors, maps, travel.
  • United States

I think everone is providing some great advice. Keep the image size down and use a CSS or HTML wrapper.

Here is a link to an HTML img tag.

http://www.w3schools...ags/tag_img.asp

Set the height and width properties to the size of your resized image.



#13
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography &amp; Bouldering!
  • United States

I do have my image on a page in my site. The user clicks on a small version of it on another page and it opens this page with my map image.

#14
peanut

peanut

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 138 posts
  • Location:Austin, TX
  • United States

I do have my image on a page in my site.  The user clicks on a small version of it on another page and it opens this page with my map image.

<{POST_SNAPBACK}>


Is your site external? Do you have a link to it?

Rich

#15
benbakelaar

benbakelaar

    Ultimate Contributor

  • Associate Admin
  • PipPipPipPipPipPip
  • 658 posts
  • Gender:Male
  • Location:North Brunswick, NJ
  • Interests:maps, information, technology, scripting, computers
  • United States

peanut was right, I tried both of these tags:

<img src="t1.jpg">
<img src="t1.jpg" width="1200">

and as long as the image is inside an HTML page, it displays at 1:1 ratio.

So it is unnecessary to set the height and width in the <img> tag, or to use a CSS wrapper.

Therefore, it sounds like the problem you are experiencing with your image looking bad is related to the way you are exporting/saving it.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

-->