So there are a few basic file types that we need to talk about to explain this: JPG (pronounced jay-peg), GIF (pronounced either jiff, or giff I have heard both), PNG (pronounced ping), and BMP or bitmap. There is one more file type called an SVG file which is not necessary to discuss here and is out of the scope of this post. All of these files use a different algorithm to create the smaller file size and can greatly increase the chances of your visitors not jumping to another web site. I encourage you to play around with with the save for web and devices dialog box in the adobe software suites in order to see for yourself visually what I am discussing here in text.

So let’s kick things off by discussing the most popular one JPG.
A JPG file is a type of compression used mainly for images with smooth and subtle color changes like a photograph. Most images you will create in Photoshop will be compressed using this type of file. A JPG file can sometimes take a file as big as 10 MB and bring it down about 80% while still maintaining the original beauty of the photo and look great. However this will not work for a website graphic. The best rule of thumb here is to get the file down to as low as possible a file size while maintaining a balance between visual quality. If you are using either Photoshop or Illustrator you are in luck, they have a save for web and devices command which brings you to a simple as possible window with many ways to view your graphic in different formats to see what it will look like at specific compression settings. When compressing a JPG you are basically removing sharpness and subtle edges as you lower the file size.

Here is a picture of the save for web and devices dialog box in Adobe Photoshop Cs5.5

The second most frequently used compression type (depending on who you ask and your time frame you have been a graphic designer) is GIF.
This stands for Graphical Interchange Format. This was the very first and only type of file type when the Internet emerged from text to graphics. The beauty of this file type is that you can literally specify the amount of colors you need in your graphic from anywhere from 256 colors down to 2 or maybe even 1, (I have never needed to bring my graphic down that far). I and most others use this for navigation buttons and sprites that are simple and get the point across. A gif also can be set to have transparency which is very useful in creating a more attractive website in which all your graphics do not have to be rectangular blocks.

The third most popular file type for compression is the PNG.
Th PNG is used mainly for transparency as well, but also has a different flavor when compressing your image for the web because you can select the bit size from a list. The different bit sizes are 8, 16, 24, and 32. Not all programs can give you all these options but some are so similar to each other that it is unnecessary to include them all. This file type shines when compressing full color graphics along with a transparency.

Last but not least, Bill Gates might be mad if I didn’t mention this one. The BMP file type.
The Bitmap file type is mainly a Microsoft windows file type that has adapted to work on the World Wide Web in the 1980s. Since it was the first file type that windows used it has become known as a windows bitmap or WBMP. The WBMP file type in the adobe suite is only 2 colors black and white the full version of the bitmap file can contain up to 16 million colors per pixel. However this is also out of the scope of this post and unneccessary to know to compress a graphic for the web. I would probably just go with a GIF file if I needed to compress a graphic with a small number of colors and keep the file size really low.

Oh yes and we almost forgot about the most obvious method of getting the file size down on your graphics – Make the file smaller in size. If you are a graphic designer and new to the art of compressing graphics for the web this tutorial should help a great deal. Thanks for reading and have a great day!!

At Poconos Web Solutions we offer these services and many more. We are a full service Web Site design company and can take care of all of your needs and help you to meet your goals.

This puts web designers in a quandary. On one hand if they have no idea what gamma means then they are victim to the settings that come standard their particular monitor, and since no-one wants to by a monitor with less than amazing picture, this has created a non-standardized approach to manufacturing monitors. Many home computer monitors actually boast things like contrast ratio and brightness and color vibrancy or extra color for your viewing pleasure. However all of the manufacturers of these screens make these monitors appeal to your eye by actually jacking up the internal settings on the monitor to make images appear brighter and more colorful. The main problem with this is that the actual image was not in any way designed to be like that, and they also remove certain colors out of the gamut to make other ones stand out more and appear better than the competition. In truth what you see with your actual eyes while not looking at a screen is what the image is supposed to look like.

So while I was searching for the answer to this dilemma I came across the gamma setting on my monitor. So I raised up the gamma little by little and I was very shocked at what happened. The color range of my display started to open up to show more colors and then I realized that red orange actually seemed more red than orange at all. So I downloaded a picture of a color wheel and I adjusted the monitor so that all the 12 colors of the spectrum looked as different from each other as possible. Then I was happier with the results.

However I now had a new problem the color space profiles that I was using in my graphics software was not displaying my work accurately anymore. Once I saved the images from CMYK to RGB they lost color and brightness and almost faded away completely. And to my dismay it threw off all of my color choices withou me realizing it. So when I finally uploaded my website it looked horrible on my computer screen. Before I freaked out I considered testing theses images on different monitors. Then I found out that the crux of the problem lied in the color space profiles I was using in Photoshop and Illustrator. Well after driving myself absolutely nuts for 3 days, I came to a combination of settings that worked on average with all my monitors and the software as well. Who knows if I could actually come up With those same settings ever again.
If i had an extra 1300 dollars I would have just bought the Apple 30 inch Screen, but hey not everyone has an extra wad of cash like that, especially in this economy.

Thanks for reading and listening, hope this article was informative as well and spell binding. jk

Jeremiah poconoswebsolutions.com

A website is living breathing organism just as organic as you and I. As we are all subject to change our mind when new information arises so is your website as well. Google loves sites more that are updated on a regular basis with new and current information. Let’s say that you are selling sheet-rock and a new technology for creating sheet-rock is in the works, this is something that would be of a tremendous value to the person viewing the website as well as add value to it.

SO Most of all, Don’t Panic!!! You can never please everyone at the same time anyway. Please follow your web designers instructions and give them the information that they need to complete your website in a timely manner. The longer you wait the less they will remember of what you had originally asked them to do in the first place. If you don’t like it after its up don’t worry it can always be changed, updated, and when problems arise fixed.

This article was brought to you by poconoswesbsolutions.com

Well here’s the real truth, if you can’t handle the truth please stop reading here!!

You will need all of these elements combined together and well balanced as well.

1. Design – obviously if it looks terrible people will never come back
2. Usability – it must be simple to navigate for anyone
3. Content – with regular updates – google hates sites that don’t ever update
4. Maintenance – occasionally your sites will need to be checked for problems – as they do come up
5. Optimization – Yes that’s right your text must be written for the visitor first, but also properly executed in a manner that’s accessible to google and Bing, etc.

All of these combined together is what poconos web solutions does their best to achieve with every project. Few can achieve this ideal. Without tried and true experience in these areas you will not get the whole experience that a proper website would offer the owner. Now you know, and knowing is half the battle. Cam somebody say the rest, ha ha if you are too young you just wouldn’t get it. Jdub signing off…

Brought to you by the Poconos Web Solutions Team