Pictures with IRFAN - optimize for PUB

[kirk]

I have read through many posts regarding compressing - resizing pictures for
quick uploads of website. I have downloaded IRFAN and have played with a
few pictures: Basic questions before saving and inserting my pics into my
..pub
1- It was suggest that 80kb or at least less than 100 kb. What is this and
where can I find this? I can see the pixels 765x512, etc but the kb total???
2- When I open a photo or pic what is the suggestions on optizing a picture
for publisher 2003? Under Images and Options what is best advice for sharp
pics but fast loading?
3-Under save as.... should I use jpeg, png, or what is suggested / recommended
Thanks so much!
KIRK

 

[DavidF]

Kirk,

Images and graphics in a web page is one of the more confusing and important
aspects of web design. I am constantly learning more and more, and will give
you some reference links below for you to read by true "experts" in the
subject.

I can share some of my observations. As I said in another post to you,
Publisher 2002+ produces two different sets of code for different browsers.
Depending on which version of Publisher you are using the html coding engine
does this in different ways, but generally it will make copies of your
inserted images with the goal of serving up the best image for the
particular browser, and to fit the picture box on your page, with very mixed
results. View your site in both IE and FireFox to see some of the
differences.

If you use the graphic compression feature in Pub 2003 or 2007, you will get
pretty good results without sizing and optimizing the images before your
insert them into your Pub pages. But if you want the better results with the
faster loading images, you will reduce the size of the images to fit exactly
the size of the picture box on your Pub page, and use an image that is
"compressed" as small as possible and still look good when viewed.

You can design your page with full sized images, and just resize the picture
box until you get it the size you want when you are ready to convert it to
html. Assuming 2003, then select the image > format > picture > Size tab.
The goal is to resize your image in Irfanview to agree with the height and
width under Size and rotate. Note at the bottom of that dialog what the
original size is. If you click on Relative to original picture size, your
goal should be to see the Scale at 100%. Then before you go to Irfanview,
tweak the size of the box so it is some full number of pixels by typing in
the width under Size and rotate. Make sure the Lock aspect ratio is checked
and if you change the width then the height will automatically change
accordingly. Make note of the width.

Now open your original image in Irfanview or any other image editor, and
resize the width of the image to match the width of your picture box as
noted above...with aspect ration locked. When you Save AS the resampled
image, I would suggest that you add the width to the file name, so it will
be easy to find when it is time to insert it into your Pub page. For
example, when I am making thumbnails, I will rename mypicture.jpg to
mypicture_100.jpg, which is a 100 pixel wide version of my original image .
You can play with the amount of compression. The more compression, the lower
the quality of the image. Start at 30% and then experiment to see how small
you can go and have the image still look good. Better image editing programs
such as Adobe Elements will give you a preview of what the image will look
like, so you can see when it starts to become too pixelated and low quality.
The more compression, the smaller the file size, and the faster it will
load. Total file size will vary depending on the dimensions of the picture.
My 100 pixel wide jpg images are usually between 3 and 5 kb, 400 pixel width
average 15 to 20 kb. Gif images with less colors are smaller yet.

Now after you have resized and optimized the image go back to your Pub page,
right click the image, and change picture from file, and browse to where you
stored the new image. Then go back to the Format and size dialog...note you
can access it from right click or Format > Picture. Now adjust the scale to
100%. Tweak your layout as necessary. Now go to Tools > Options > Web tab
and uncheck "Rely on VML..." and "Allow PNG...". (note that if you are using
Pub 2007, the VML option has been removed, and this was primarily because of
feedback to microsoft about what it was doing to Pub web pages) Now when you
Publish to the Web and produce your html files, Publisher actually will not
make so many different copies of your inserted image as it is already at
100% scale. View the image in FF, and you will notice it will look better.

You could also use the compress graphics feature even after inserting the
new images, but I can't say that will help.

The only way to get better pictures is to import them rather than insert and
embed them into the Pub page, but that is another subject. If your site is
dependent upon the very best images possible, then importing them into the
web page will bypass the html coding engine in Pub, and give you the best
quality. However for most people this is beyond the point of diminishing
returns. Post back if you want to learn how to do that. It certainly can be
a good tool to learn for images such as banners that are on each page, as it
will speed up the loading and decrease the overall size of your Pub html
files.

Here are some good references for you:

Compress graphics file sizes to create smaller Publisher Web pages:
http://office.microsoft.com/en-us/publisher/HA011266301033.aspx

How to Prepare Images for Your Web Site by Herman Drost :
http://msmvps.com/blogs/dbartosik/pages/80829.aspx

How to Prepare Images for Your Web Site - Part 2 by Herman Drost:
http://msmvps.com/blogs/dbartosik/pages/80828.aspx

The most complete and overwhelming source of information...you will go back
and back:
Scantips:
http://www.scantips.com/
http://www.scantips.com/basics1c.html
http://www.scantips.com/no72dpi.html

Aren't you glad you asked? <grin>

DavidF

 

[KIRK]

David,
Yes publisher 2003
First of all thank you...... I will have my company logo on each page in
the site. I will be deleting my master pages, creating multiple pub files,
deleting sound, creating forms with proper (http instead of ftp), and now for
logos on each page..... Yes, I would like further light and knowledge you
offered below. My basic method has always been insert > picture > from a
file > browse > then insert. With a complete disregard for FF, other
browsers, load time, etc. I now know that my site is a huge mess, but for
my first site.... primary loan team DOT com. regardless I will be starting
over and using dozens of your posts and recommendations. I have a lot of
work to do with all of those pictures. I would love any comments or
suggestions since I am starting from stratch.

Secondly, I have played with pictures in Infran and no problem saved as you
recommended based on size. Question with your suggestion in resizing a "box"
within publisher. After messing with it I assume that I..... hit Insert >
picture > empty picture frame and then continue with the resizing of that
"box" - is this how you do it? Or is there a different type of box that you
are inserting?

Do you typically save most pics as jpegs or pngs or gif

Thanks again for all of your help and posts

"The only way to get better pictures is to import them rather than insert and
embed them into the Pub page, but that is another subject. If your site is
dependent upon the very best images possible, then importing them into the
web page will bypass the html coding engine in Pub, and give you the best
quality. However for most people this is beyond the point of diminishing
returns. Post back if you want to learn how to do that. It certainly can be
a good tool to learn for images such as banners that are on each page, as it
will speed up the loading and decrease the overall size of your Pub html
files."

 

[DavidF]

Kirk,

Though it is probably a bit scary to post the URL of your site, I am glad
you did. It is much better than you think, and if you get rid of the master
pages, change the settings under tools > options > web tab > uncheck
"vml..." and "png...", and compress the graphics via
http://office.microsoft.com/en-us/publisher/HA011266301033.aspx
then I think you will have a pretty good site that should load ok in FF too.

Seriously, I wouldn't worry about resizing and optimizing each picture in
Irfanview for now. If you run the compression tool in Publisher, I think you
will generally get images that will be small enough and good enough quality,
that you won't need to resize the original. For example load:
http://www.primaryloanteam.com/index_files/Page977.htm in both IE and FF.
Notice the birthday cake. In FF the image is 428 X 240 and 8.14 kb. In IE
that image is 900 X 718 and 383 kb.
http://www.primaryloanteam.com/index_files/image1028.jpg
http://www.primaryloanteam.com/index_files/image10281.jpg
I think the resized image in FF looks fine and is obviously small enough, so
I see no reason to try to resize or optimize it in Irfanview. I think you
might have reached the point of diminishing returns on that image. You might
be able to make the file size smaller, but probably not by much. However if
you look at the hand signing the doc picture, the quality of that picture in
FF kind of sucks. (you did download and install FF, right?) That one I would
resize and/or reformat in Irfanview.

Furthermore, even though your logo is repeated on more than one page I
wouldn't bother trying to import it. With the placement the same on pages,
it will be named the same when Publisher produces the html code, and that
means the logo will load quickly the second time the browser sees it...it
will already be in the viewer's cache on their computer and won't be
downloaded again.

One suggestion I would make is about how you have your hyperlinks formatted.
You appear to be using the CSS snippet that removes the underline. This
makes it difficult to see when you are actually on the link and thus makes
navigation difficult. Instead of the following snippet:

<style>
a{text-decoration:none;}
</style>

Use this one:

<style>
a{text-decoration:none;}
a:hover {text-decoration: underline;}
</style>

Now when you hover your mouse over the link, the underline will appear. And
here is a variation that you might like:

<style>
a{text-decoration:none;}
a:hover {color: #930015; font-weight: Bold; text-decoration: none;}
</style>

Between those samples you can build your own, but hopefully you will see my
point. As you have it set up now, it is hard for a viewer to tell if they
are on a hyperlink.

JPGS, GIFs or PNGs? I generally use jpgs for pictures that need a lot of
colors. Gifs for few color images such as logos and images that will have
text in them. The text seems to be a bit more sharp. And also gifs when I
need a transparency. (type in "transparent" or "transparency" in Irfanview
help for more information). I don't use PNGs, though they can also support
transparency and have their place. Read the articles by Drost and he gives a
good explanation of when to use each.

That's about all I have to say at this point. As you rebuild your site, test
it periodically by Publish to the Web and to your hard drive, and test with
FF. That way, you will find design problems before you repeat them on
additional pages.

Have fun...DavidF

 

[KIRK]

David
Sincere Thanks! You have been great to work with and very knowledgeable
....... I really appreciate your willingness to help. I'm pretty confident
that many topics become redundant, but you don't make us beginners feel like
idiots. Thanks so much!
KIRK

 

[Mike Koewler]

David,

that you won't need to resize the original. For example load:
http://www.primaryloanteam.com/index_files/Page977.htm in both IE and FF.

David, in Mozilla, Step 3 is twice as wide as Step 2 and Step 1 and
covers a few lines of text.

Mike

 

[DavidF]

Kirk,

You are welcome. It gets more interesting for me when someone indicates a
sincere desire to learn.

Drop back in when you get your site updated and let us see it. And of course
you could always pay it forward...

DavidF

 

[DavidF]

Mike,

Actually there are a number of design issues that need to be tweaked, but I
figured Kirk would work them out...or post back. I didn't even look at every
page. I wanted to focus on the images questions, but felt I had to comment
on the navigation since he was planning on rebuilding the site.

DavidF

 

[kirk]

Sorry - A little more help please on your suggestion.......
I agree that we need underline, or bold, or color or some type of mouse
over. In initially building my site, while in publisher, I selected;
insert>navagation bar> new. I have read several posts clear back to 2005.
Can I add snippets and over ride publisher navagation bar? Maybe that is my
problems? Anyway, I have tried several methods and I can't seem to get
mouse overs to work. I'm sure that I'm just doing something incorrectly???
I even went to an index file opened up 1 page and added the code you gave
below > clicked on save > retested and nothing!

In trying to add code - even the ones you suggested below I get no results.
I am adding code by going into publisher > insert HTML fragment > pasting the
code > selecting ok. I have published to web > saved to HD > and opend in
FF, and IE with no results. Is there another way to add code in publisher?
What am I doing wrong? Many of the old posts have links for reference, but
the links are outdated. I could really use your help. Your suggestion in
your previous post is accurate, but none of the publisher default navigation
bars have mouse over or changing effects that I can find. Once I can get
this figured out, I think I am set and quit bother you.....
Thanks again - eagerly waiting..

 

[DavidF]

Hi Kirk,

Sorry, but the script won't work on Publisher wizard-built menus. I didn't
recognize them as Publisher built because of where you had placed them I
suppose. Unfortunately, the code I gave you will only work on manually
inserted hyperlinks. If you insert the code snippets, using the code
fragment tool, into a page that has a manually inserted hyperlink, do a web
page preview, and mouseover the links, you should be able to see what I am
talking about.

I guess if I were you, I would just live with the links the way they are. It
would require a lot of extra work to build and maintain a manually built
menu, and I am not sure it is worth it in your case. In reality, the way
your menu works is not unlike most...I just like more "active" links.

If you think your main site will remain fairly static, and you won't be
changing the main sections that will be on your main menu, then you could
reconstruct your menu manually, and just copy and paste it where you need
it. It is up to you. Like I said, try the code snippet(s) on a manually
inserted hyperlink, and if you think it is worth the effort, then I can
probably suggest a workflow.

DavidF

 

[Mike Koewler]

Kirk,

I would like to suggest this theory. The most visited site out of the
millions of web sites is www.google.com. Take a look at the fancy menu
bars, mouseover effects, scrolling marquees and such. View the source
code. You can incorporate all this stuff you find into your site with
little effort.

Excuse me while I step into a soundproof room in my house and shut the
door so it doesn't disturb my family while I scream: GOOD SITES ARE
ABOUT CONTENT AND WHAT THEY CAN HELP A VISITOR LEARN, NOT FANCY LOOKS OR
SHOWING OFF WHAT YOU KNOW AND CAN DO WITH CODING.

Exiting from the soundproof room: It's a natural tendency to try to show
off web site building skills. Been there and done it, including adding a
<blink> tag a dozen years ago. The reality is, visitors don't care. If
they visit your site, all they care about is finding info that can help
them. You will never go wrong by placing substance over style, 100
percent of the time.

Mike

 

[KIRK]

David,
Thanks again - It works perfectly just as explained. I really appreciate
everything; external files, sound, graphics, hyperlinks, forms, and now CSS
snippets........ Wow, I really have had a strong crash-course. I wish I
would have found this forum earlier. It all started because no one at ISP
providers knows anything about FTP verses HTTP when using forms and no one
could trouble shoot it. It is nice to get fast clean answers... Thanks so
much!
Kirk

 

[DavidF]

Kirk,

You are welcome. But as Mike suggests, don't forget the reason for the site
to begin with and KISS. If you contemplate adding something, ask yourself if
you really need it. Don't go crazy adding bells and whistles just because
you can. Keep your site clean, lots of open white space, easy to read and
navigate, and as Mike suggests concentrate on content.

Good luck.

DavidF