Thursday, November 13

HOWTO: Posting photos in web pages and forum threads

Many people don't know how to post or embed a image on a website or forum message. The process is quite simple and the method is similar to do. The image must first be uploaded to a server such or at an online photo hosting site as If a person upload a photo on our website, we provide links to codes that you can easily post or embed your images on a website or forum. This little tutorial purpose is to teach you how to do it, if you do not have the necessary codes.

Use its full URL to post an image

A URL to an image is the address on the Web where the image is located. To get this URL, bring up the context menu over the image. Right click over the image.

In Firefox, select "Copy Image Location" as shown in the screenshot below:

In Chrome, select "Copy image URL".

In Safari, select "Copy Image Address".

In Opera, select "Copy Image Address".

In Internet Explorer, select "Properties", highlight the URL, bring up the context menu and select "Copy" as shown in the following screenshot:

Normally, you should get the URL from the image itself, not the address bar of a browser.

Use the URL to Add  the Image to the web page

To publish or embed an image on a web page should use the HTML tag: <img>, as follows:

<img src="" alt="some image" >

  • src for "source." This again is an attribute, a command inside a command. It's telling the browser where to go to find the image. In this case:
  • alt for "alternate text". This tells the browser that if it can't find the image, then just display this text. I use: "some image" 

Or Add the Image to some forum

This method is the most commonly used in forums, but not all forums use it. Some require code placed around the URL for the image such as: 


Please note all forums require adding urls. Some let you upload them directly from your computer.

When the correct URL is posted in a thread or your web page, the image will appear.

Friday, October 31

GIF vs JPG vs PNG: differences

If you are working with JPG, GIF and/or PNG image files, it is essential to know the differences between each one, so you know when to use them. The main difference between files formats is how they are used when designing for the web and the outcome they produce. One produces highly optimized simple graphics, another is used for most images, and the third option is used for complex graphics, gradients and transparency.

  • Compression: Unlike PNG and JPG files, GIFs force all the colors of an image into a 256-color palette in order to reduce image size. However, these color limitations often lead to immediately-noticeable coloring issues, usually appearing as white spots or blotches of color, where images should be more complex. The circled area in the image below highlights a region where the effects of compression are most obviously apparent. Any colors outside of the 256 found in the standard Web palette are changed to whatever color is closest to it, creating blotchy patches as a result.
  • Transparency: GIFs assign one of 256 colors to be transparent. However, this does come with some limitations. Adding transparency removes a color from an already limited palette, and pixels are either totally clear or opaque, with no in-between. Additionally, round edges will feature a white backing as opposed to sitting directly against the background, contrary to the nicely-defined edges in the PNG below.
  • Animation: Almost all of the animated images you’ll find on the Web are GIFs. A couple of reasons why GIFs are popular are their efficient file size, and simple creation process. Moreover, a number of the format’s built-in features allow for acute control over specific animation behaviors — including animation speed, whether the frames are persistent, and how many times the animation repeats.
  • Compression: JPG compression is great if you’re just trying to send someone a picture through your phone or in an email, two situations where you might not necessarily want to send large files. Although most JPGs look fine from a distance under normal compression, there is a noticeable loss of quality whenever users zoom in on a JPG image. The effects of JPG compression have been greatly exaggerated in the image below to show the loss of quality that occurs.
  • Transparency: Unfortunately, JPGs don’t support transparency. JPG files have an unlimited color palette, but they blend pixels together to reduce the size of the image.
  • Animation: Although JPGs don’t support animation, a Motion JPEG format exists that accommodates both animation and sound. However, it isn’t widely used on the Web, and is primarily used for storing and transferring video on small, low-end devices such as digital cameras and portable game consoles.
  • Compression: PNG files are a lossless format, meaning that compression doesn’t affect the quality of the image. Unlike JPGs, which create artifacts and blur images at a certain point, a PNG file will always look at least as sharp as the original image. Unfortunately, PNG files also tend to be a bit larger than JPG files, especially when they’re high resolution. This could make them difficult to share to the Web, or between friends and family.
  • Transparency: PNG files sport the best capacity for transparency. PNGs create transparency in one of two ways. One of these methods employs the same approach used by GIFs, with a single color defined as transparent, and the other is to set an alpha channel. One of the advantages of PNG single-color transparency is that it doesn’t remove a color from the available palette. However, the alpha channel is a much smoother method, as it is far better at blending colors, and allows you to select different levels of transparency in specific regions. The transparent areas of the PNG will blend and adjust naturally to whatever is behind the image when the background of the page isn’t a solid white or black color. As shown above, the edges all fade from fully colored to partially transparent, subsequently creating a cleaner edge and smoother background transition.
  • Animation: While there was an effort to create a protocol for animated PNG files, it hasn’t caught on, and thus hasn’t received support from most major browsers. The format has some specific uses, such as medical imaging and geographical work, but isn’t widely used on the Internet.


JPGs, PNGs, and GIFs have benefits and limitations, and it’s more important to know when to use each file type. As a general rule, you’ll want to use a GIF whenever the image is to be animated. Beyond that, JPG compression tends to create smaller file sizes at the cost of image quality. However, PNGs are better for capturing lossless images, and in situations where minimizing file sizes isn’t of utmost importance. Ultimately, situational considerations should be weighed heavily when deciding which of these file types you should use.

Saturday, October 18

6 Free Online Image Compressors

Image Compressors

With page speed a ranking SEO factor and consumers expecting exceedingly fast web experiences, it's crucial to get aggressive and take control of your image sizes to deliver a faster loading website to your users.

Image compression is either lossy or lossless: Lossy works by discarding information from the original file, and lossless retains all the original data (though, the file size tends to be bigger). There's a variety of image compression algorithms that take different approaches to reducing file size, and the tools listed below utilize a number of those to minimize the size of your images.

Whether it's JPEG, PNG, GIF or SVG, we've got you covered with this selection of 6 free online image compressors. All of them will help you compress your website's images, save bandwidth and improve your site's performance.

1. is an online service from the Yahoo! Developer Network that optimizes your images. It uses lossless compression techniques, so the file size is reduced without changing the look or visual quality of the image.

The uploader supports JPEG, GIF and PNG files with maximum sizes of 1MB. The optimized results are available for download from a temporary URL, which is valid for up to 30 minutes afterwards.

2. CompressNow

CompressNow is a free online service that lets you upload images from your computer, choose a compression percentage and download the optimized image. It supports GIF, JPG and PNG formats.

The service also allows the drag and drop of multiple images from you computer, with a max upload of 10 images and a max individual file size of 3MB.

3. Shrink Pictures

Shrink Pictures allows you to resize pictures and choose the level of compression applied, and it supports JPG, GIF and PNG. You can select the maximum image dimension, apply special effects, and download the optimized images.

Shrink Pictures ensures privacy by using an automated script to remove any processed images from the server.

4. TinyPNG

TinyPNG enables advanced lossy compression for PNG images. It preserves full alpha transparency and reduces the file size by selectively decreasing the number of colors and bytes in the image.

The effect is nearly invisible, but it makes a large difference in file size. It takes 24-bit PNG files and converts them to much smaller 8-bit indexed color images, with all unnecessary metadata stripped as well.

5. JPEG Reducer

JPEG Reducer shrinks the sizes of your images and photos to make them load faster, and works by using lossy compression. However, you may not even notice that any changes have been made.

Just upload your image or enter its URL and press "Reduce It." You can then view the compressed images and thumbnails, and right-click the image to save it.

6. Image Optimizer

The Online Image Optimizer from Dynamic Drive lets you easily optimize GIFs, JPGs and PNGs so they load as fast as possible. The images can be converted from one file type to another, with an upload size limit of 2.86MB.

You can enter the URL of the image or upload it from your computers, choose your image conversion, optimize it and download the results.

From mashable

Wednesday, October 8

Image compression

Image compression is the application of Data compression on digital images. In effect, the objective is to reduce redundancy of the image data in order to be able to store or transmit data in an efficient form.

A chart showing the relative quality of various jpg settings and also compares saving a file as a jpg normally and using a "save for web" technique

Image compression can be lossy or lossless. Lossless compression is sometimes preferred for artificial images such as technical drawings, icons or comics. This is because lossy compression methods, especially when used at low bit rates, introduce compression artifacts. Lossless compression methods may also be preferred for high value content, such as medical imagery or image scans made for archival purposes. Lossy methods are especially suitable for natural images such as photos in applications where minor (sometimes imperceptible) loss of fidelity is acceptable to achieve a substantial reduction in bit rate.

Methods for lossless image compression are:

  • Run-length encoding – used as default method in PCX and as one of possible in BMP, TGA, TIFF
  • DPCM and Predictive Coding
  • Entropy encoding
  • Adaptive dictionary algorithms such as LZW – used in GIF and TIFF
  • Deflation – used in PNG, MNG and TIFF

Methods for lossy compression:

  • Reducing the color space to the most common colors in the image. The selected colors are specified in the color palette in the header of the compressed image. Each pixel just references the index of a color in the color palette. This method can be combined with dithering to avoid posterization.
  • Chroma subsampling. This takes advantage of the fact that the eye perceives brightness more sharply than color, by dropping half or more of the chrominance information in the image.
  • Transform coding. This is the most commonly used method. A Fourier-related transform such as DCT or the wavelet transform are applied, followed by quantization and entropy coding.
  • Fractal compression.
Other properties

The best image quality at a given bit-rate (or compression rate) is the main goal of image compression. However, there are other important properties of image compression schemes:

Scalability generally refers to a quality reduction achieved by manipulation of the bitstream or file (without decompression and re-compression). Other names for scalability are progressive coding or embedded bitstreams. Despite its contrary nature, scalability can also be found in lossless codecs, usually in form of coarse-to-fine pixel scans. Scalability is especially useful for previewing images while downloading them (e.g. in a web browser) or for providing variable quality access to e.g. databases. There are several types of scalability:

  • Quality progressive or layer progressive: The bitstream successively refines the reconstructed image.
  • Resolution progressive: First encode a lower image resolution; then encode the difference to higher resolutions.
  • Component progressive: First encode grey; then color.

Region of interest coding. Certain parts of the image are encoded with higher quality than others. This can be combined with scalability (encode these parts first, others later).

Meta information. Compressed data can contain information about the image which can be used to categorize, search or browse images. Such information can include color and texture statistics, small preview images and author/copyright information.

Processing power. Compression algorithms require different amounts of processing power to encode and decode. Some high compression algorithms require high processing power.

The quality of a compression method is often measured by the Peak signal-to-noise ratio. It measures the amount of noise introduced through a lossy compression of the image. However, the subjective judgement of the viewer is also regarded as an important, perhaps the most important, measure.

From Wikipedia, the free encyclopedia

Thursday, September 18

10+ Free Photo Search Tools

These sites specialised on finding pictures, images, animations etc., don’t offer free photos themselves but rather provide a way to search easily through Flickr or public domain photos to more quickly find a photo you can use.

1) Can We Image

Can We Image searches and displays results from Wikimedia Commons. All search results link directly to the resource’s usage rights page.

Can We Image

2) Compfight

Compfight is a Flickr image search engine that uses the Flickr API to locate images based on your license needs.


3) Creative Commons Search

Creative Commons Search is a sort of photo search engine clearinghouse that offers access to search services provided by other organizations like Flickr and Google.

For example, searching for “kittens” on Creative Commons Search and selecting Google Images brings me here. Note that the search has been set up with special parameters.

Creative Commons Search

4) Foter

Foter is a Flickr-focused search tool that helps quickly unearth photos and identify their licenses.


5) Google Advanced Image Search

Google Advanced Image Search is a method of finding free-to-use images through Google’s own search tools. Here’s a quick guide.

Google Advanced Image Search

6) Every Stock Photo

Every Stock Photo is a search engine for free photos. These come from many sources and are license-specific. You can view a photo’s license by clicking on the license icon, below and left of photos. Membership is free and allows you to rate, tag, collect and comment on photos.

Every Stock Photo

7) Image Finder

Image Finder allows users to search Creative Commons photos from Flickr with similar filters for commercial/non-commercial and other categories.

Image Finder

8) PhotoPin

PhotoPin‘s interface allows users to search millions of Creative Commons photos from Flickr.


9) is a Creative Commons-licensed professional free stock photos sharing community of about 25,000 images. All photos displayed on this Pinterest-esque site are allowed for commercial use with proper credits to the authors.

10) TinEye

TinEye is a reverse image search engine. It finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version.


11) Wylio

Wylio is an all-in-one picture finder, re-sizer and attribution builder for bloggers. Users can resize up to 5 free images per month.


Sunday, August 31

Image file formats

Image file formats provide a standardized method of organizing and storing image data. This article deals with digital image formats used to store photographic and other image information. Image files are made up of picture elements, called pixels. The pixels that comprise an image are in the form of a grid of columns and rows. Each of the pixels in an image store digital number representing brightness and color.

Image file sizes

Image file sizes, expressed in bytes, increase with the number of pixels in the image, and the color depth of the pixels. The more rows and columns, the greater the image resolution and the greater the file size. Also, each pixel making up the image increases in size as color depth is increased. An 8-bit pixel (1 byte) can store 256 colors and a 24-bit pixel (3 bytes) can store 16 million colors. The latter is known as truecolor.

Image compression is a method of using algorithms to decrease file size. High resolution cameras lead to large image files. Files sizes may range from hundreds of kilobytes to many megabytes depending on the cameras resolution and the format used to save the images. High resolution digital cameras record 8 megapixels (MP) images, or more, in truecolor. Consider an image taken by an 8 MP camera. Since each of the pixels uses 3 bytes to record true color, the uncompressed image would occupy 24,000,000 bytes of memory. That is a lot of storage space for just one image, and cameras must store many images to be practical. Faced with large file sizes, both within the camera, and later on disc, image file formats have been developed to address the storage problem. An overview of the major graphic file formats is given below.


The Exif (Exchangeable image file) format is an algorithm incorporated in the JPEG software used in most cameras. Its purpose is to record and to standardize the exchange of data between digital cameras and editing and viewing software. The data are recorded for individual images and includes such things as; camera settings, time and date, shutter speed, exposure, image size, compression, name of camera, color information, etc. When images are viewed or edited by image editors, such as Paint Shop Pro, all of this image information can be displayed.

A listing of the EXIF metadata for the JPEG candy jar image can be viewed by clicking the small icon below the image.

Major graphic file formats:

There are many graphic file formats, if we include the proprietary types. The PNG, JPEG, and GIF formats are most often used to display images on the Internet. These graphic formats are listed and briefly described below, seperated into the two main families of graphics: raster and vector.

Raster formats


The JPEG (Joint Photographic Experts Group) image files are a lossy format. The DOS filename extension is JPG, although other operating systems may use JPEG. Nearly all digital cameras have the option to save images in JPEG format. The JPEG format supports 16-bit color and produces relatively small file sizes. Fortunately, the compression in most cases does not detract noticeably from the image. But JPEG files do suffer generational degradation when repeatedly edited and saved. Photographic images are best stored in a lossless non-JPEG format if they will be re-edited in future, or if the presence of small "artifacts" (blemishes), due to the nature of the JPEG compression algorithm, is unacceptable. JPEG is also used as the image compression algorithm in many Adobe PDF files.


The TIFF (Tagged Image File Format) is a flexible image format that normally uses a filename extension of TIFF or TIF. TIFF's flexibility is both a feature and a curse, with no single reader capable of handling all the different varieties of TIFF files. TIFF can be lossy or lossless. Some types of TIFF offer relatively good lossless compression for bi-level (black and white, no grey) images. Some high-end digital cameras have the option to save images in the TIFF format, using the LZW compression algorithm for lossless storage. The TIFF image format is not widely supported by web browsers, and should not be used on the Internet. TIFF is still widely accepted as a photograph file standard in the printing industry. TIFF is capable of handling device-specific color spaces, such as the CMYK defined by a particular set of printing press inks.


The RAW image format is a file option available on some digital cameras. It usually uses a lossless compression and produces file sizes much smaller than the TIFF format. Unfortunately, the RAW format is not standard among all camera manufacturers and some graphic programs and image editors may not accept the RAW format. The better graphic editors can read some manufacturer's RAW formats, and some (mostly higher-end) digital cameras also support saving images in the TIFF format directly. There are also separate tools available for converting digital camera raw image format files into other formats, one such tool being Dave Coffin's dcraw, which is made available under a combination of GNU General Public License and public domain licenses.

Adobe's Digital Negative Specification is a recent (September 2004) attempt at standardizing the various "raw" file formats used by digital cameras.


The PNG (Portable Network Graphics) file format does almost everything that the GIF format does and does it better. The PNG file format supports true color (16 million colors) whereas the GIF file format only allows 256 colors. PNG excels when the image has large areas of uniform color. The lossless PNG format is best suited for editing pictures, and the lossy formats like JPG are best for final distribution of photographic-type images because of smaller file size. Many older browsers do not yet support the PNG file format. The Adam7-interlacing allows an early preview even when only a small percentage of the data of the image has been transmitted.


GIF (Graphic Interchange Format) is limited to an 8-bit palette (256 colors). As a result of both this fact and the compression algorithm, GIF is best suited for storing simple graphic images with relatively few colors. In fact, it is often superior to JPEG in dealing with these kind of images. However, it is not well fitted for photographic works and today it is very rarely used for such. Despite this GIF is still used extensively on the Internet because of the great reservoir of GIF images available. GIF also supports animation, which has granted substantial use for it. The file format is now slowly being superseded by the PNG format for non-animated images.


The BMP (bit mapped) format is used internally in the Microsoft Windows operating system to handle graphics images. These files are typically not compressed resulting in large files. The main advantage of BMP files is their wide acceptance and use in Windows programs. Their large size makes them unsuitable for file transfer. Desktop backgrounds and images from scanners are usually stored in BMP files.


The XPM format is the default X Window System picture format (very popular in the Linux world). Its structure is based on the string format of the C programming language. Because XPM was designed to be man-readable, and is stored as uncompressed plain-text, the file size of these pictures can be more than twice as large as uncompressed binary bitmap files (such as BMP, uncompressed TIFF, MacOS-PICT, or Irix-RGB formats). This format is unsupported by most non-Unix software and operating systems (though many web-browsers retain display support for the XBM subset, which was the minimal image format in the early days of the WWW).


The MrSID (Multiresolution Seamless Image Database) format is a wavelet compression format used mostly by Geographic Information Systems to store massive satellite imagery for map software.

Vector formats

As opposed to the raster image formats above (where the data describes the characteristics of each individual pixel), vector image formats contain a geometric description which can be rendered smoothly at any desired display size.


SVG (Scalable Vector Graphics) is an open standard created and developed by the World Wide Web Consortium to address the need (and attempts of several corporations) for a versatile, scriptable and all-purpose vector format for the web and otherwise. The SVG format does not have a compression scheme of its own, but due to the textual nature of XML, an SVG graphic can be compressed using a program such as gzip. Because of its scripting potential, SVG is a key component in web applications: interactive web pages that look and act like applications.

From Wikipedia, the free encyclopedia

Saturday, April 26

HOWTO: Optimizing images for your web site

How to Optimize Images for Your Website
Images play a huge role in website development, as their visual appeal is a powerful way to attract and retain reader attention.  However, the way that you incorporate images into your site can also influence the way your website is handled by the search engines.  To get the best SEO bang for your image buck, consider taking all of the following steps to optimize images for your website:

Step #1 – Check your licenses
First – before we even get into the meat of modifying your images to make them more appealing to the search engines – take a few moments to be sure you hold the appropriate licenses to the images you plan to use.
Smart webmasters know that you can’t simply right click and copy an image from anywhere on the web to use on your site.  Instead, you’ll need to download royalty free stock imagery, find images that have been licensed for commercial use under the Creative Commons license or purchase images from stock photo websites.
Making sure that your image licenses are in order won’t improve your SEO, but it will prevent you from receiving DMCA notices from angry photographers who have the power to otherwise disrupt your business.

Step #2 – Resize your images
Once you’ve appropriately sourced your images, take the time to resize to the exact dimensions at which they’ll be displayed on your website.  Photoshop and SnagIt are two popular image editing programs that you can use for this purpose, although the PicMonkey website represents a great free alternative for beginning webmasters.
The reason that it’s important to do this before you upload your images is your site’s speed.  Forcing your website to reload images on the fly (because you’ve uploaded large images and told your site to display smaller versions) consumes digital resources, which can slow down your site’s operations.  And because site speed is becoming a major factor in your SEO performance, anything you can do to minimize the number of resources used is to your benefit.

Step #3 – Compress your images
At the same time, don’t just resize your images – compress them as well!
Both the size of your picture and the amount of information it contains (as in, whether it’s a high resolution image or low resolution picture) determine the number of resources required to load it to your site.  And since most websites don’t require the same level of photographic detail needed for art prints or printed pictures, you can safely compress your images without compromising their display value.
To compress your images for free, check out Yahoo’s tool.  With just a few clicks of the mouse, this service will remove unnecessary bits from your image without changing its overall appearance – speeding up your site and improving its SEO performance.

Step #4 – Add target keywords to your image file names
Once the size and compression rate of your images have been optimized, it’s time to start integrating your target SEO keywords.  One place in particular to do this is your image file names.
As an example, if you run a website that sells fine jewelry and are in the process of uploading a picture of a gold watch, don’t leave your files names in their original photographer formats (for example, “IMG_023490.jpg”).  Instead, replace it with a keyword-optimized version – for example, “fine-jewelry-gold-watch.jpg.”  Doing so will help the search engines to better understand the content of your images, as well as how they should be treated from an SEO perspective.

Step #5 – Add title and ALT tags to your images
In addition to optimizing your file names, you can integrate keywords into both the image title tag and ALT tag fields.  But that said, don’t treat these two areas as repositories for all the different keyword variations you can stuff into them.
Think about the original purposes of these fields, which were to assist both the search engines and website visitors using adaptive technologies to better understand what they were seeing.  For this reason, any optimized tags you add should be descriptive in nature.  Don’t stuff your keywords into these fields – instead, create natural-sounding image descriptions that include mentions of your target keywords when it’s appropriate to do so.
When it comes to image optimization, approach the process from a holistic standpoint.  Take as many actions as you can to improve your page load times and the ability of the search engines to parse your content, but don’t go overboard.  Including too many keyword repetitions or optimizing every single image on your site perfectly could set you up to experience an over-optimization penalty down the road.

From Gator Crossing