Skip navigation
Currently Being Moderated

Pretty basic question about exporting a simple Illy image for use on a website.

Apr 8, 2012 6:30 PM

I'm using CS4 on a Mac.

 

I've made the attached illustration in Illustrator. It is "actual size" of the product being described.

 

How can I export this to a format compatible with use on a website, preserving the size as best as possible without it being a ginormous file?

 

The "save for web and devices" option in Illy gives me a very small image (meaning physically small, left to right).

 

And yes, I am one of those people who struggle with the concept of dpi - I suspect that is my problem here. 

 

Is there any way to have this image display at approximately the width I intended on most screens and browsers?

 

Thanks in advance for your help.Screen shot 2012-04-08 at 7.29.43 PM.png

 
Replies
  • Currently Being Moderated
    Apr 8, 2012 6:56 PM   in reply to MarieMeyer

    Inches (and DPI) don't mean anything to a web browser. All you are concerned with is the number of pixels. "The width you intend on most screens and browsers" needs to be defined as a count of pixels. Nowadays, most desktop monitors are 1920 x 1080 pixels. But  the "live area" of web pages is often considerably less than that in width. So look at the target web page, take a screen capture of it, determine how many pixels it measures, and decide how many of those pixels you want your image to occupy.

     

    That web page will be viewed on everything from a desktop to a cell phone. So forget inches.

     

    JET

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 3:14 AM   in reply to MarieMeyer

    Marie, long time no see.

     

    I've made the attached illustration in Illustrator. It is "actual size" of the product being described.

     

    Does the 2.85" correspond to 2.85 inches (or 202.5 points) as shown in the Transform palette/panel when you select the coloured rectangle(s)?

     

    If not, the whole question becomes rather woolly.

     

    PPI = Pixels per inch, which is relevant here. You do not want to know how it is related to DPI.

     

    You may set the image size, corresponding to the Crop Marks/Area, in the Image Size window in the Save for Web & Devices dialogue box. The (old) standard is 72 PPI, which is what you get if you leave the size unchanged, but many monitors show things at higher resolutions such as 96 PPI and therefore smaller. If your monitor is among those, you may find the image rather small.

     

    PPI = Pixels per inch, which is relevant here. You do not want to know how it is related to DPI.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 6:04 AM   in reply to MarieMeyer

    The (old) standard is 72 PPI, which is what you get if you leave the size unchanged...

    When the image is displayed in a web browser, you don't "get" 72 PPI unless the particular monitor you are using happens to have physical, hardware pixels which actually measure 1/72 inch. If, using that monitor, you launch a program (e.g.; Illustrator), which is designed for real-world, physical output, and which uses 72 pixels to render a real-world's inch-worth of data in that program's interface and at 100% zoom, then the image displayed will measure 1".

     

    ... but many monitors show things at higher resolutions such as 96 PPI and therefore smaller.

     

    But if you open that same image on the same computer, with the same monitor in a different program which is also designed for real-world, physical output, but which uses 96 pixels to render an inch-worth of data in that program's interface and at 100% zoom, then the image displayed will be larger (133%), not smaller.

     

    But none of that has anything at all to do with physical image size in a web browser, and just confuses the issue. The old 72PPI vs. 96PPI thing is about software, not about monitors.  (Beginners would find the whole issue of web-centric raster resolution much less confusing if their advisors would stop trotting out this archaic reference to the 72 vs. 96 MacOS vs. WIndows spec.).

     

    The references to 72PPI and 96PPI are not about the size of pixels on a screen. It refers to the number of pixels (regardless of their size) which a particular OS or application uses to display one inch of linear measure—in a program to which an inch means something. Again, in a browser, an inch doesn't mean anything. A web browser isn't counting how many pixels to display across an inch. It just displays the number of pixels in the image.

     

    Go to the local computer store. Look at how many different sizes you can buy LCD monitors and TVs. 19", 21", 23", 24"....54", 60". Yet regardless of physical size, most of them have the same resolution: 1920 x 1080.

     

    So assume someone has convinced you that your OS renders everything at 96 PPI.  Create a 96 x 96 pixels image, put it in an HTML document. Plug up the 19" monitor to your computer. Open the HTML document in a web browser. Physically measure the image.

    Now plug up the 60" TV. Physically measure the image. Obviously, it will not measure the same.

     

    Now post the HTML page on a server. Pick up your smart phone and go to the page....

     

    Actual, physical, monitor pixels come is all kinds of sizes. By default, a web browser simply maps a data pixel to a monitor pixel. So there is no PPI setting you can use which will ensure that your image displays "at actual size" on all monitors.

     

    JET

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 7:59 AM   in reply to JETalmage

    James,

     

    The (old) standard is 72 PPI, which is what you get if you leave the size unchanged

     

    refers to the Image Size window mentioned in the previous sentence, hence the initial question to Marie.

     

    Right now, the monitor in front of me is set to a resolution expressed in pixel by pixel which corresponds to 90 PPI (90px cover one inch of the monitor), and at 100% zoom in Illy 1 inch/whatever has a size of 0.8 inch/whatever as measured on the monitor.

     

    This is beginning to remind me of Farewell to Shady Glade, only with two old raccoons trying to explain, thus causing even more befuddlement (fifth spread, including the one with the first page).

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 4:21 PM   in reply to JETalmage

    JETalmage wrote:

     

    The (old) standard is 72 PPI, which is what you get if you leave the size unchanged...

    When the image is displayed in a web browser, you don't "get" 72 PPI unless the particular monitor you are using happens to have physical, hardware pixels which actually measure 1/72 inch. If, using that monitor, you launch a program (e.g.; Illustrator), which is designed for real-world, physical output, and which uses 72 pixels to render a real-world's inch-worth of data in that program's interface and at 100% zoom, then the image displayed will measure 1"....

    Until 1994 when Apple introduced the first multiple resolution monitor on the market, all monitors were with 72 ppi or more technically speaking 72 dpi because the smallest element was produced similar to printing with pointing three color guns at a point. The 72 number in Illustrator was established at that time and then it actually gave 1 physical inch on every monitor. So, I think it is fair to refer to this as an old standard.

     

    Now after the CRT monitors died, the LCD monitors are in effect again having one usable resolution but each monitor and device uses monitor pixels with different size. I'm using a 27" monitor with 110 monitor pixels per inch. Some i-phones use 360 pixels per inch.

     


    JETalmage wrote:

     

    ...

    ... but many monitors show things at higher resolutions such as 96 PPI and therefore smaller.

     

    But if you open that same image on the same computer, with the same monitor in a different program which is also designed for real-world, physical output, but which uses 96 pixels to render an inch-worth of data in that program's interface and at 100% zoom, then the image displayed will be larger (133%), not smaller....

    To handle real-world physical output, in its preferences Photoshop uses a user defined number of the monitor's pixels per inch. Having this information Photoshop can show the actual physical size of an image when choosing View > Print Size - one inch on the ruler in Photoshop will equal one inch of a real life ruler. This also creates by default my new documents using the web preset with the resolution of my monitor (110 ppi) which is also indicated in the Image Size window.

    I whish Illustrator has the same feature that will display one inch on its ruler equal the size of a real ruler. However the current confusion (difficulties to understand) will remain because they still have to use an arbitrary number of pixels assumed per inch which must be the same for all users using different computers (monitors) in order for the same document to be with the same spatial size and number of pixels when shared. Otherwise in order for the number of the assumed pixels per inch to be equal to the monitor's pixels per inch of each user will cause different size in inches of the same document and this will make a very big mess.

     

    Just my 2 cents for this discussion

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 4:37 PM   in reply to MarieMeyer

    MarieMeyer wrote:

     

    ... I want to display as 2.85" long....

    You can't display your image as 2.58" long on other user's monitors because each monitor's pixels are different size and this will give different size image with the same number of pixels. The physical size is beyond your control. Unless you are sending to particular person/s and you know the size of their monitor's pixels. And even then if they are like me, preferring to zoom the web pages changing the default display, you are out of luck.

     
    |
    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