Optimizing images for the web
A website without at least 2-3 pictures or effects is like a painting without color. Pictures give more freedom of expression, give live to our websites. Aminated pictures like gifs, can create a nice environment for a visitor is it isn’t spammy. (those like: click here, here, here…with RED). We must chose all pictures carefully. They must be relevant to website’s theme and small enough to load fast on a low Internet conection. I recommand using a program like Macromedia Fireworks or Adobe PhotoShop. You don’t need to be n expert to export your images and make them have just a few KB. What is happening in fact? Each time a visitor come thru your website, their browser must show that specific page content. Each element is a HTTP object request. If you have 20 pictures, 1 CSS file, 1 JavaScript there will be 22 HTTP requests. Each of them must load. If a user have a low band connection it will take minutes to load a website. He wont wait so much and will close your website. This is not good at all. If you offer something to sell you’ll see that each visitor is very important.
Do you want to make your website load fast but still look good? This tutorial will tell you how to create fast loading images for your site..
Once, I was asked to look at why a very simple web page will one small image and about 400 words of text took over 1 minute to load. The answer was simple and is a mistake I see over and over again.
The original picture, which was large, was scaled to a small image size in a web site creation program, not an image editing program.
DO NOT resize your images in your website design program. The result will be a small image with the large file size.
DO resize your image in your image editing program.
When you resize your image on your web page to the size of a postage stamp, you really have not done anything to the image file size at all. What you are actually doing is telling the browser to re scale the image on the fly. This creates a lot of work for the browser. The image that you thought is the size of a postage stamp is still that same large 8 x 10 inch image that takes over 2 minutes to download.
When you use an image editing program to resize the image, and you save it as a JPEG or GIF, you have actually created a smaller image. Now that postage stamp size image that you saved as a postage size JPEG will now load faster on your visitor's computer.
GIF and JPEG: learn what is the difference between these two image formats
If you want to optimize your images the first thing you need to know about is the two image formats recognized by your web browser. These are GIF and JPEG. Both JPEG and GIF are compressed. That means that information has been organized inside the file in a special way in order to make the file smaller.
The difference between JPEG and GIF is the way that they compress the data. JPEG compression is designed to optimize photographs or images with fine gradations of color. GIF compression is designed to optimize images with large continuous areas of color, such as illustrations.
Notice the more you compress a JPEG image, the more artifacts you begin to see. This is because you are actually loosing information. JPEG compression is therefore called lossy compression. You may also notice that the color fidelity does not change. Colors are not lost in JPEG images. When you use JPEG compression you will trade off between image quality and image file size. In the example above, the Medium Quality image is acceptable and is 2KB small than the high quality example.
GIF is a lossless compression. Data is not lost. However, color fidelity is not preserved. This is because GIF indexes or limits the total number of colors to 256 or less. When using GIF compression, you trade off between color fidelity and image size.
Keywords
Whenever we dig for information on search engines we type in 2-3 or more words that is relevant to what we are looking for. When search engines borned the existence of multiple keywords in a website was the number one ranking factor. Over time this was exploited and search engines developed their algorithms.
Keywords must be relevant for a page content. If a website is about red shoes maybe we will use more often this keyword. For some business areas there are many concurent websites. For example, web design firms. There are over 600.000.000 search results. This mean that a web design company has a lot of competitors. More the competition, harder to get higher.
Is better to use keyword combinations, then one-word keyword. Also a good solution is to use strange words, unusual words.
Uploading files to linux server
To upload any website files to your hosting account you need a few ditails about your hosting account as:
- Ip address of FTP address (this look like: ftp.domain.com)
- Username
- Password.
You also need a FTP software. One of the best is Dreamweaver.