Category Archives: Web

Images in HTML: Choosing the right Image for your website

Images are the most commonly shared content on websites. Choosing the right file format to save your images in is of vital importance. When choosing the format for your image, you should always be conscious of both the image’s quality and file size. Images improve the appearance of your site and help explain concepts that are difficult to put into words. However, used improperly, images can be ineffective, create accessibility issues, and even land you in legal trouble.

History of Web Images

In 1993 the <img> tag was proposed and Mosaic, the first browser to display images inline with text, was launched. Before Mosaic and the <img> tag, images were loaded in a separate window or downloaded and opened with an image viewer.


Three things to remember before using an image on your website

  1. Only Use Images You Have the Right to Use. Never use Google image search to find any image you want. Many images are protected by copyright laws, meaning that using them without permission can land you in very hot water facing legal and financial penalties.
  2. Always Provide Alternate Text on image. Every time we use images, we must also think about experience of visitors using a text-only browser or screen reader. Use the alt attribute to assign alternate text to your images to ensure your content and website are accessible.
  3. Optimize Images for the Web. Image file size can be very large, and web pages containing multiple large images loads very slowly making negative impact on visitors.


Three Common File Formats of Web Images

  1. GIF (Graphic Interchange Format) is the file type has long been the most popular on the Internet, mainly because of its small size and that they can be animated. GIF files can be saved with a maximum of 256 colors. This makes it a poor format for photographic images. GIFs can also be interlaced, which is a way of saving a graphic so that it loads progressively — first a blurry, low-detail version is loaded, and then successive layers of detail are added.


  1. JPG or JPEG files (Joint Photographic Experts Group) are commonly used for photo-realistic pictures containing thousands or millions of colors. JPEG pictures are useful because you can control the file size by altering the compression. The higher the file compression you set the lower the image quality will be, and as a result the file size is decreased. Though JPGs can be interlaced, they lack many of the other special abilities of GIFs, like animation and transparency


  1. PNG (Portable Network Graphics) is a format used as an alternative to GIF that supports transparency for pictures containing thousands or millions of colors. PNG-24 is in no way a replacement format for JPG, however, because it is a loss-less compression format and their file sizes can be rather big against a comparable JPG.

Trending File Format

SVG (Scalable Vector Graphics)

SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.

SVG is supported in every browser, except IE < v9 and Android < v3. This means you can start using SVG images.


Why Use SVG images now?

  1. SVG is supported in most of major browsers.
  2. SVGs can be scaled to any size without incurring pixelation or loss of detail.
  3. Simple images such as logos and charts will generally have a smaller file size than their bitmapped JPG, PNG or GIF equivalent.
  4. SVG XML can be created and manipulated on the client using JavaScript to create dynamic effects and animation. Event handlers, such as click or mouseover, can be applied to any SVG element.
  5. Using SVG instead of an image helps to reduce unnecessary HTTP requests



PNG should be used when we need transparency (either 1-bit or alpha transparency) and lossless compression will work well (such as for a chart or logo, or computer generated image). JPEG should be used when Lossless compression will not work well (such as a photograph) and full color is needed. GIF should be when PNG is not available, such as on very old software or browsers and/or animation is necessary. SVG is the best of all in terms of performance. So, use it whenever possible, for logo, icons, etc.

Believe on facts, not your guess

Back in the days, entrepreneurs and businessmen thought that if they would come up with a creative idea for a product or service, then it will sell. This way they tried their luck again and again until finally they discovered or created something that people really liked. What were the odds that they failed back in the days doing this? probably just a few and it worked for them.

Well it worked for them because, there were much fewer products and services compared to what it is today. If we tried the same technique today chances are that we will fail 99 times before making a safe landing hypothetically. In reality we’d already have been bankrupt before attempting 99 times or exhausted all our thoughts.

Though big businesses these days rely on reverse technique by studying the market first before attempting to sky dive, many search engine marketers, web masters and web designers still make the mistake of guessing their own keywords which they think will get traffic to their website. Most of the times this guessing is wrong.

Even though keywords selected are excellent and relevant to a business model, they have no way of knowing how much competition there is for that keywords.

For example put website development in keywords and search engine may pull list of books from amazon or meaning of website development from a dictionary or website development article from Wikipedia and your website seems to be found no where as competing with giants is impossible.

Put tour in your keywords and your tour agency will never be found anywhere. Chances are better that we target niche keywords like tour someplace but yet we don’t know how many people look for it.

Therefore it is imperative to rely on facts that will tell the competition versus searches, carefully analyses those according how relevant it is to your business and how you want to use those to drive traffic.

99 Dollar Webmaster can tell you exactly the facts; competitions vs searches. We can analyses those data to bring in people that really want to buy your service or product instead of typing for another keyword on Google.