Return to former location
Mostly About Image (Picture) Files
Do you need a free image resizer? Download PIXresizer.zip compliments of http://bluefive.pair.com/
The PageDOLL Designer truly requires no experience, it will do it's job with just a few mouse clicks. It is a pure WYSIWYG (What You See Is What You Get) editor.It is easier to use than a word processor. A few minutes practice on a practice page and you are well on your way. Create a practice page, name it practice.html, then click the Edit button to the right of it's file name. Click it and start using all the obvious available page elements from the toolbars.
No experience means no HTML or web design experience. It must be assumed that you do understand the basics of running your computer and Microsoft Windows. The basics is mostly understanding the mouse, computer navigation, and data management. With the basic knowledge, you will have no problem is an absolute statement. With out the basic knowledge, all operations will forever be difficult. There are many ways to learn the basics, all it takes is dedication, devotion, and a learning source. There are many learning sources, some good and many a waste of time. One good one: Internet On Line Computer Training Studio
You must have a sense of layout and logic. A plan before you begin, necessary in any endeavor, including but not limited to the computer.
Now more specifically, first consider what the site will look like to other users. First consideration is computer resolution, or font/picture size on the monitor screen.
Most new computers now come set at 800x600 resolution and most users never learn how to change it. Do you know how?
It is really quite easy, Right click an open desktop area (not on any icon), then left click Properties. Next click the Settings tab, and finally move the lower right screen settings slider left and right.
So what is resolution, or 800x600? Resolution size refers to pixels, tiny squares forming an invisible grid on your computer screen. 800x600 means 800 pixels wide and 600 pixels high. This relates to finished digital picture size, when the picture is created with a scanner or digital camera. What you must do in order to upload your images for website display.
So, if the screen is 800 pixels wide, a picture or image that is 400 pixels wide would occupy one half the screen. 200 pixels is 1/4 screen width, etc. Many scanners and digital cameras create huge pictures such as maybe 1280 pixels, nearly 2 screens wide, with no provision for resizing during the picture creation. Now you can visualize why your picture images must be sized correctly for web page placement. If your pages will be occupied by a menu frame set at about 25% (200 pixels) of the screen width, the remaining 600 pixels is for variable viewing when clicking links. So images 400 or 500 pixels is max. The height must always be set proportionally . A small image such as a thumbnail should only be 100 or 150 pixels wide.
Over sized images must be resized with a software program, such as PaintShop Pro, or one of many other brands. You can download PaintShop Pro for a free trial from jasc.com.
Only image file types .gif (Compuserves' Graphics Interchange Format') and .jpg (Joint Photography Experts Group format).
Another file type, the .png (Portable Network Graphics) format, a new graphics format introduced to replace the GIF file format is gaining (very slowly) popularity.. The main reason for the implementation of PNG was the age of the GIF format and the controversy over the LZW compression algorithm that GIF uses. Compression algorithim, understandable, but age, perhaps that is why the .png is not so popular.
The three file types, colors and resolution . . . as related to image quality and browser loading speed. The first rule for loading speed, the smaller the file size the faster the image will load. The first rule for image resolution quality, full colors and clarity, strictly how it looks to the eye.
In general the .jpg with no compression will be about as good as you can get. Depending upon the needed image quality it can be compressed about 15% with little change in appearance. Of course the needed quality depends mostly on what the image picture is. A simple logo with few colors can be compressed much more with little change in appearance. A quality color photograph needs all the colors it originally contained, probably thousands or even millions. The .jpg with no compression can maintain such quality. PaintShop Pro has the ability to set compression percentages for .jpg files. Click "File" then "Preferences".
The .gif file is capable of only 256 colors, thus it's limitations are obvious. The new .png file can manage many colors as well as the .jpg but will result in a much larger file size and can be very slow in loading. The .gif and the .png filetypes each can be made transparent. The .jpg is not capable of transparency. So many considerations are necessary when using images in web pages.
A very common image file type on all computers, the .bmp (bit map), produced by many scanners and digital scanners will not work on the Internet. They are common because of the Windows Paint program, a free part of Windows 95 through Windows Vista. In windows you can do some very creative designing, saving to a .bmp file, then using PaintShop Pro to convert the .bmp to a .gif, .jpg or .png. . Another great use for PaintShop Pro. Actually the Windows Vista version of Paint not only handles .bmp files, but also .gif, .jpg and .png. It can give problems when working with .gif files because of the .gif restriction to only 256 colors.
There are some features of Paint not very well explained in Paint Help or online. This is in reference to the Paint Tool Bar item "Image", especially the submenu for "Attributes". Attributes is how you resize the work area. You can use size type units of "Inches, Cm or Pixels". You can type in the desired sizes and click OK. This size will remain until you change it again. You can also resize the work area by dragging the tiny handles (dots) on the right side and bottom of the work area. Why change the work area size? An example . . . Paint is often used to edit images (pictures) that are "pasted" into Paint. The way the "work area works", what ever it's current size, if you paste in a larger image it will automatically expand to accomodate the larger size, precisely. How ever if you paste in a smaller image the "unneeded" white (empty) space will remain. You must then use the right and bottom handles to close the unwanted white space. Thus it is very time saving to leave the work area very small and let it expand as needed.
Windows Paint appears to be a very basic program, however it is much more sophisticated than the average Windows user when it comes to computer graphics. Learn more about Paint online.
Now it should be relatively easy to plan ahead and consider what size you want your images before uploading them. A last consideration for image sizes and number of images per page . . . web page loading speed. We have all been on web site pages that take forever to load. Most often this is because of large image file size (the bigger the picture, the bigger the file size), too many images, or a combination of both. Loading speed can drive away your audience. Many new super fast computers, dsl modems, cable modems, etc. can handle virtually any load, but probably the majority of world wide users will be using slower equipment.
So what size and how many pictures per page? There need be no specific rule. Many Internet surfers will not wait more than a few seconds before moving on. A targeted visitor, someone highly interested in your web site content, will pay little attention to page loading speed. So you need a happy average only you can decide.
A guide line . . . a 400x500 .gif file will be about 170 Kb (1024 is a megabyte). A 400x500 .jpg will be only about 35Kb. Thus for large pictures you should use the .jpg. Most smaller images such as menu buttons, 150 pixels wide would only be about 2Kb even saved as a .gif. so .gif or .jpg doesn't really matter for very small images.
How many per page? If you used 6 400x500 .gif it would total to about 1020 Kb, close to a megabyte. You could place about 30 same size .jpg in the same file space.
So 6 large images per page will accommodate any one except the very slowest of computers.
Actually the field of digital imaging, or computer graphic pictures, is a specialized field of it's own. But through necessity, if you are to handle your own web site image display, you must understand at least the primary information discussed here.
All the information here should be considered in your master plan, developed before you configure your web site.
More Image information from HP (Hewlett Packard), some may be a duplication of above . . .
During the course of a normal business day you may be sent images that are in a JPEG, GIF or PNG format. Alternately you might have to decide which format is best for compressing an image that you need to professionally print. If you need to create a company brochure, Webpage, or perhaps a presentation, you will probably have to deal with one of the image formats. So, what is each format, and when should you choose to use one type before another? JPEG Named after the Joint Photographic Experts Group that designed it, a JPEG is a digital image file format designed for maximum image compression. It is the best way to format your colorful photos. Sometimes called a .jiff, .jpg, .JPG, or .JPE, the format has been around for a shorter time than the GIF, but is now the most commonly used method of compressing photographic images on computers. It can display photos and graphics with millions of colors, compresses well and is easy to download. It uses a “lossy” compression technique which means during the compression process some of the image data is lost. This eliminates redundant or unnecessary information so that the finished image is as small as possible. GIF Designed by CompuServe, the GIF is one of the most popular formats on the Internet because it is more widely supported by Web browsers than the JPEG format. It is well suited for compressing areas of images with large areas of the same color – such as computer-generated art and line drawings. It is also a good option for putting animation online. Images are compressed into a 256-color or 8 bit image. The GIF format supports transparency which allows a graphic designer to designate the background color of an image. For example, if you place a GIF image in a red box the background will be red. It also supports “interlacing“. This creates the illusion of faster-loading graphics at a Website. It does so by showing the image first in a blurry form, and then gradually defining the image as more information is downloaded from the server. PNG The Portable Network Graphic (PNG for short – pronounced Ping) was designed to replace the GIF file format, however because it does not support animation it will never totally supersede the GIF. It is a “lossless” compression format (as are GIFs) which means it is compressed by a technique in which no data is lost. A PNG image is more vibrant with 48 bit true color, compared to the older GIF's only 8 bit color. Other image formats · The TIFF: Created for simple desktop publishing. A TIFF (Tagged Image File Format) is an old but popular format for color and black-and-white line images. Bitmap or pixmap: The term bitmap comes from the computer programming terminology, meaning just a map of bits. This image format stores the image as a pattern of memory bits, each of which specifies the color of a pixel of the image. · · EPS: An Encapsulated Postscript is a computer file standard set by Adobe for printers. It is the mathematical definition of shapes, lines, color and space. This is one of the most accurate ways to define a font or image, but creates a very large file size. · Image resizing Once you have decided which image format you are using for your in-house marketing materials, internal newsletter, or end-of-year report, you will probably need to resize your image. This can initially seem like a tricky exercise, however many resources exist to talk you through the process. HP Photosmart Essential 2.5 is free software available at the HP Website which will help you edit, organize, print and share your pictures. Another easy way to share your digital photos is with Snapfish, a web-based image sharing and print service. HP.com also contains many tips and how-to guides on resizing images.
Return to former location
|