MS Office Forum / Publisher / Web Design / September 2007
Pictures with IRFAN - optimize for PUB
|
|
Thread rating:  |
kirk - 27 Sep 2007 17:26 GMT 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 - 28 Sep 2007 01:34 GMT 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
>I have read through many posts regarding compressing - resizing pictures >for [quoted text clipped - 15 lines] > Thanks so much! > KIRK KIRK - 28 Sep 2007 05:21 GMT 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."
> Kirk, > [quoted text clipped - 114 lines] > > Thanks so much! > > KIRK DavidF - 28 Sep 2007 17:35 GMT 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
> David, > Yes publisher 2003 [quoted text clipped - 198 lines] >> > Thanks so much! >> > KIRK KIRK - 28 Sep 2007 19:54 GMT 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
> Kirk, > [quoted text clipped - 274 lines] > >> > Thanks so much! > >> > KIRK DavidF - 28 Sep 2007 23:05 GMT 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
> David > Sincere Thanks! You have been great to work with and very knowledgeable [quoted text clipped - 354 lines] >> >> > Thanks so much! >> >> > KIRK Mike Koewler - 28 Sep 2007 21:46 GMT 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 - 28 Sep 2007 23:05 GMT 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
> David, > [quoted text clipped - 5 lines] > > Mike kirk - 29 Sep 2007 22:23 GMT 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.. :)
> Kirk, > [quoted text clipped - 274 lines] > >> > Thanks so much! > >> > KIRK DavidF - 30 Sep 2007 01:17 GMT 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
> Sorry - A little more help please on your suggestion....... > I agree that we need underline, or bold, or color or some type of mouse [quoted text clipped - 375 lines] >> >> > Thanks so much! >> >> > KIRK KIRK - 30 Sep 2007 06:24 GMT 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
> Hi Kirk, > [quoted text clipped - 287 lines] > >> >> look > >> >> like, so you can see when it starts to become too pixelated and low DavidF - 30 Sep 2007 15:27 GMT 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
> David, > Thanks again - It works perfectly just as explained. I really appreciate [quoted text clipped - 365 lines] >> >> >> look >> >> >> like, so you can see when it starts to become too pixelated and low Mike Koewler - 30 Sep 2007 04:30 GMT 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
> Sorry - A little more help please on your suggestion....... > I agree that we need underline, or bold, or color or some type of mouse [quoted text clipped - 295 lines] >>>>>Thanks so much! >>>>>KIRK
|
|
|