Knowledge Article 0201:
How do I get the best image quality in my project?
Applicability: SellFolio
4.0 Complete only
_________________________________________________
Background
There are two types of image files:
-
Raster-based: these types of images are
composed of pixels, or small dots. Examples of raster-based
images are .JPG, .BMP, .TIF, .PNG, .PSD, .GIF. These are used
for photos.
-
Vector-based: these types of images are
composed of mathematical calculations that draw lines and curves
when they are displayed. Examples of vector-based images are
.AI, .WMF, .CDR. It's important to note that when the lines
and curves are drawn, they are drawn as pixels, because that's the
only way a computer monitor can generate a display. These are
commonly used for logos, fonts, line-drawings, etc.
***NOTE: An exception to the above is the .SWF file (known as a
"Flash file"), because .SWF files have the ability to contain both
raster and vector images simultaneously. A .SWF file can be
thought of as a "hybrid" image, but it's also much more, being
capable of animation, application programming, video, and much more.
Photos are always raster-based.
Line-based images, such as logos and text, are almost always
vector-based.
The Big Tradeoff
A point you must always remember is that pixels cannot shrink or
stretch. A pixel is always a pixel. For this reason,
raster-based images do not scale very well.
This is why photos in a SellFolio project might appear distorted
when stretched/shrunken.
Vector-based images, on the other hand, scale
perfectly in all situations, but they can't display photographic
imagery. So, there's the problem—you need to show photographic
imagery in your SellFolio project, but the photos are not displaying
well. The reason is that the photos are being stretched or
shrunken, and all those pixels are either being "dropped-out" (when
the photo is sized too small), or pixels are having to be "added"
(when the photo is stretched larger than its native size).
This causes photographic images to be jagged or pixilated.
Again, can you get a photograph to exist in
vector form, so that it always scales perfectly?
No.
How SellFolio Displays Images
There are two modes of display in SellFolio,
which you establish in Step 2-F in SellFolio Builder:
-
Fill the available screen area: this
mode is good because it gives the largest viewing area for your
project. But, everyone has different monitor sizes and screen
resolutions. This means that your project will always
shrink or stretch to fit the viewer's available screen area.
Accordingly, all imagery in your project will also shrink or
stretch.
-
Fixed-size: this mode is good because
it has the capability of guaranteeing that your images
display perfectly, if you do things right. But, because
your project will always display in a fixed-size, some users may see
the project to be smaller than you'd like, while other users might
have to scroll around the screen to view the project. This is
because their available viewing area might be bigger or smaller than
the fixed-size that you've chosen.
When building your project, you need to take
these factors into consideration. Again, these are tradeoffs.
But, I'm using 3,200x2,400-sized images, in
300dpi. Shouldn't that display well?
Now, remember these points:
-
Large-dimension images (in pixels) are only
suitable for printed output. They are not suitable for display
on a monitor. That 3,200x2,400-sized image is way too large
for your SellFolio project.
-
The "dpi" parameter has nothing to do
with display on a computer monitor. This parameter only
relates to printed output. For the purposes of SellFolio,
completely forget about that "300 dpi" setting. For
monitor-based output, a 800x600 300-dpi image will display exactly
the same as a 800x600 75-dpi image.
-
Everyone's screen resolution is different.
For instance, one possible typical screen resolution is 1,280x1,024
pixels. Another would be 1,024x768 pixels. So, if you've
got that huge 3,200x2,400 pixel raster image, you can clearly
see that it's way too large for display on a typical monitor.
The only way to display that raster image is to "shrink it down."
Of course, though, it really can't be "shrunken down." Again,
pixels can't be stretched or shrunken. Instead, the software
must selectively drop-out pixels or add them, as appropriate.
This causes image distortion.
-
In addition to everyone having different
screen resolutions, you also have to keep in mind that everyone's
web browsers have differing amounts of available display area.
As users have more toolbars, status bars, etc., in view, that cuts
down on the available display area. The point here is that
you have no idea how many pixels your viewer really has available to
display.
So, what do I do?
OPTION 1: If you want your project to
fill whatever available display area the user has, then in Step 2-F,
use the "This project should fill the available window" option.
But, this also means that the SellFolio project will stretch or
shrink accordingly, to fit the user's display area.
Accordingly, all raster images (JPG photos, etc.) in the project
will have to resize, causing some degree of distortion. To
minimize this effect, you'll have to make your best guess as to what
dimensions of pixel display area your viewers will have. In
general, raster images that are 1,024x768 pixels will be a good
start. But, there will always be some shrinking or stretching
of the project, and hence the raster images within it, on all users
systems, with this display option in SellFolio. The advantage
is that the project fills the available display area.
OPTION 2: Use a fixed-size in Step 2-F,
such as "This project should display in 800x600 pixel size."
Your project will always display in that chosen size. If a
user views the project in their web browser, and the web browser has
1,098x879 pixels available for display, then your 800x600 project
will fit nicely within that area. They'll see a border area
around your project. If, on the other hand, the viewer has a
smaller screen resolution, and they've got lots of toolbars
displayed in their web browser, their available display area in the
browser might be something like 742x581 pixels. In this case,
your 800x600 project will be too large, and the user will have to
scroll around to see all parts.
If you use one of the fixed-size options in
SellFolio, import your images to these sizes:
-
If you're using the 640x480 size: Use a
photo-editing program to size your images no larger than 640x480
(for instance, a 500x470 size image will work). Import
them in Live Layout mode, and using the Scale % stepper at the
bottom of the screen, give your photos a percentage of 100.
-
If you're using the 800x600 size: Use a
photo-editing program to size your images no larger than 800x600
(for instance, a 730x570 size image will work). Import them in
Live Layout mode, and using the Scale % stepper at the bottom of the
screen, give your photos a percentage of 80.
-
If you're using the 1,024x768 size: Use
a photo-editing program to size your images no larger than 1,024x768
(for instance, a 900x733 size image will work). Import them in
Live Layout mode, and using the Scale % stepper at the bottom of the
screen, give your photos a percentage of 63.
|