Defining Image Resolution And Image Dimensions

For beginners in graphic design and computer graphics, the concepts of Image Resolution and Image Dimensions can be confusing. The notion that images have a resolution does not always correlate to the dimensions of the image at first, but the concepts are simple and the knowledge is quite necessary for graphic designers as well as PHP Programmers. The graphic designer needs to understand these concepts before starting a project, and the PHP Programmer must understand these concepts to apply automated image manipulation using PHP. Continue reading


Modifying Image Uploads With PHP Programming

There are some basic steps to handling image uploads using PHP Programming. The first process is the dsign of the web form to provide a vehicle for then image upload process. A PHP Program must be ready to receive and cleanse the form data and image files. Immediate handling of the uploaded files is required, else a temporary storage method is required. Resizing, cropping and modifying the image uploads is typically performed on the image uploads before finally saving the modified images as separate files, and perhaps tracking the new image files in a database.

Creating a web form to start the image upload process is very easy. It is important that the <form> tag that starts the form section include an "enctype" tag with a value of "multipart/form-data" as follows: The form shoulod contain at least one “file” type input so the user can select a file from their computer for upload, as follows:
<input name="photo" id="photo" type="file">
This form tag creates a field-button set that displays a file browser widow when clicked. The user can then select an image file from their computer to be uploaded when the form is submitted.

If multiple image fies are to be uploaded at the same time, multiple “file” type input tags must be defined,each with a unique “name” value, like photo1, photo2, photo3… If the number of image upload fields is unknown, use PHP or Javascript/AJAX to make form dynamic and change the image upload field count on the fly. Empty file fields will result in an inert error when the receipt script processes the data, and will not create adverse effects. A much bigger concern is whether the uploaded files are image files or harmful files.

When the PHP script makes receipt of the form data, given that the other data types have been handled appropriately, the image uploads can be processed. The first step is to check whether there was an image upload at all. If the data set for a file upload is empty, ignore the upload and bypass the image handler for it. If a file was uploaded, there are steps to take before starting PHP image handler programs. There may have been errors, each of which return a value that correlates to a specific problem. If there were no errors, the next PHP script can be executed. Else, the error may be processed for internal tracking and used to generate useful error messaging to the user. Errors may include no data received or the user aborted the upload. After error checking is out of the way, the file must be evaluated. PHP can check the MIME-Type for the file to see if it is a compatible format for the PHP Image Handler Script you have programmed.

There are many MIME-Types for the many file types that exist. The PHP Image Handler Script may have been developed only for JPEG formats, maybe even for GIF formats, but not for BMP or TIFF. The file upload may not be an image at all, such as a text file (.txt) or some other non-image format. The MIME-Type check is usually sufficient to determine what the file upoad really was, but a programmer can adulterate the file and change the MIME-Type tag inside the file data to appear like a JPEG, but actually contain a virus or other harmful program. Always double check your file data before processing it, both to check that it is compatible with your PHP Image Upload Handler Script as well as not a Network Security issue.

Once you can establish that the file upload is a good image format and is ready for processing, your PHP Program might benefit from storing the raw upload to a temporary directory, or perhaps a “raw” storage area for users to access. PHP Web Photo Galleries would typically store the original upload to save the largest size possible. The smaller sizes generated would be used for presentation and searching, before finally accessing the large raw file. The reason for storing the image immediately is because the PHP Server will vaporize the uploaded file when the PHP Script finishes execution. PHP Servers store file uploads to temporary directories with temporary file names until the script has finished execution. At that point, the PHP Server deletes the file and it is not accessible for further handling.

Depending on the goals of the PHP Image Uploader Script, there are some basic steps to take before manipulating the image upload. Check the aspect ratio by dividing the two dimensions. The PHP Program will not inspect resolution tags, so it is processed at the standard 72 dpi resolution by default. Knowing the aspect ratio is important so your script can generate new sizes proportionately to the original upload. Validating the aspect ratio can be important for sites where ratios below 2:3 and above 3:4 can be considered an error, or can be cropped to fit potential site requirements. Generating smaller size images requires a target height or width, which is either multiplied by or divided by the aspect ratio, depending on which target dimension is used and how you calculated your aspect ratio.

The PHP Image Upload Handler Script can define colors in the active color palette. These colors must be defined before applying textual overlays or drawing artwork on the image, such as lines or circles. Lines may be draw on the image at any length or angle within the image borders. Lines maybe used to create a peripheral rule (border) or to obfuscate text in graphical image blockers. There are many shapes and methods for drawing artwork on the image.

Overlays may be used to watermark images with the website address, photographer’s credits, and with company logos. They may be applied from opaque to translucent, and at any size within the image borders. Applying txet to an image is used when the text content is unknown prior to programming, perhaps allowing the user the ability to define that content. When the text content will not change, it can be incorporated into an overlay graphic. Transparent GIF images may be used and the masked area retained. A caveat of using transparent GIFs is that the edges will not anti-alias smoothly. In high contrast situations, the edges of transparent GIFs will not look good. Knowing the dimensions of the uploaded image and iterating the pixels with the associated color palette, the PHP Program can find areas of color, brightness and saturation, allowing the PHP Program to determine where an image overlay should be placed to avoid high contrast situations. For best PHP image generation results, smaller sizes should be generated from the original image upload, not from successively reduced versions of the original.

Image file storage methods depends on the PHP website design and goals. Images of different sizes are used for different website purposes ranging from thumbnails to small search results images, to medium detail age views and large detailed views. The original may be tored as well to provide a size that is not reasonable for web browser viewing but great for user’s to download and re-purpose. Different image sizes can be stored in separate directories for each image size. This results in a THUMBS directory separate from SMALL, MEDIUM, LARGE or RAW image directories. Images may be stored together in the same directory, but with different file names, such as thumb_imagename.jpg, small_imagename.jpg, medium_imagename.jpg, large_imagename.jpg, and raw_imagename.jpg. IMage sets may be stored with this nomenclature in separate subdirectories within a user’s account, or cataloged by any or the numerous options for file storage.

Whichever file storage method chosen, the file names for each image set need a common file name component, so they may be identified as associated to each other. Whether the PHP Program is using MySQL Database Programming or some form of flat file data storage, the file name commonalities must persist. The PHP Program will look for the base component of the file name and PHP will generate the various full file names to associate the image file set together. A useful method for naming file sets is to use a 10 digit timestamp. Timestamps provide an added benefit of knowing the date and time the upload was performed. The timestamp may be stored in a MySQL Database as a DATE value, and can be re-purposed for image tracking, directory naming, and other tracking systems.

Proprietary images and pay-per-use websites would require the PHP Program to protect the images from random and anonymous users. This situation simple requires that the PHP Program store the image uploads to a directory that can be protected. That directory and its subdirectories can be located outside of the web root where the PHP Server can access and deliver the content. It can be located inside the web root with GUEST permissions set to NONE, so only WWW or the PHP Server can read and deliver the content, and the PHP Scripts are required to stream the file content. Secured file storage systems would remove the MIME-Type from the image data, remove the file extension from the file name, store the files outside of the web root, and keep access permissions configured correctly. When the image data is needed for streaming to the user, as a download or for display, the PHP Program can read the image file and stream the data with a generated MIME-Type for the browser to understand. Membership access and other forms of access restrictions may be used to add layers of protection. Although this is not really a subject of Network Security, there are distinct advantages to the PHP Programmer who understands Network Security.

If you have questions about modifying image uploads with PHP Programming, email The PHP Kemist


Clipart vs. Photographs; The Vector-Raster Issue?

A common question is, “What’s the difference between clipart, a photograph, an illustration, and other image references?” Sometimes the question is there, but isn’t articulated, due to lack of nomenclature. Nomenclature is the root of understanding the differences. This article will help explain which words relate to which types of images and explain the differences between them.

There are two major groups to image types; Vectors and Rasters. A raster image is the image type we all see as the standard photograph and webpage image. A vector image is less usual, but is not acknowledged for what it is most of the time. Vector images are built with lines and fills that make up true “clipart” as well as real logos, etc. The best example of vectors are the common Microsoft Office © clipart characters that appear as drawings.

The Raster: A raster image is built from the composition of a multitude of individual dots in an array (matrix) and containing display information specific each unto itself. Think of the raster as a large collection of individual paint spots that can be defined as a unique entity within the collection as a whole. That spot contains information about what color it has, its saturation, the hue and so on. remove that spot and the image remains intact, minus a spot.

The Vector: A vector is built from the composition of one or more lines and fills defined by mathematical equations. Consider a simple circle of blue with a yellow fill. The image is created when the computer calculates a mathematical equation to decide how large the circle is, how thick the line is and then what color the fill is. Once calculated, the image is displayed as an array of dots on the monitor.

Defined: Although both rasters and vectors must be displayed as an array of monitor dots, they are created by different methods. If the vector image is to be doubled proportionally in height and width, the computer recalculates the original equations and redraws the image with the new magnitude. However, if you do the same to the raster image, the process is much different. The computer is working with a set number of dots from the original and must move the dots apart to create a larger size. Moving the dots apart means there are gaps between them both vertically and horizontally. This is where you must understand how the computer fills in those new gaps. The computer actually inspects the dots around the gaps, makes complex calculations based on surrounding information, and makes a best guess ass to what dot should fill the gap.

Quality: So why do rasters looks so much better than vectors? Think of it like this… Try and create the same image with two different methods. The raster method is to use an unlimited variety of colored sand. The vector method is to use an unlimited number or colored yarn. Obviously, the sand allows much more detail and the yarn does not. This is exactly why the different image types don’t display the same on screen. Yes, you could simply use a massive number of tiny vector lines to simulate dots as the raster does, but the tiny vectors would require much more information than the raster dots. remember, file size is still an issue in the majority of projects.

Usage: There are different applications for rasters and vectors. Photographs and similar images that need detailed quality to meet visual expectations should remain raster. Logos and clipart that don’t require such complexity, and may need quality resizing should remain vector. Rasters may be converted into vectors and vectors into rasters. This is referred to as Rasterization and Vectorization. We find Macromedia Flash does the best job of converting rasters to vectors, buy using the Convert Bitmap function. Almost every graphics application can convert vectors into rasters, even if by simply saving as a JPEG format!

Sometimes raster/vector image type is controlled (screwed up) by another application. Microsoft Office is an example of taking control away from you. If you try to import a vector image into Power Point, it will usually convert that image to a bitmap (raster) and you lose the ability to resize it. Workarounds for such problems require creative methods. Try and use Corel Draw to convert the raster image into a WMF format and Office will import it as a native vector, retaining its resizing qualities. If you have problems with vector/raster manipulation, email XtremeVisions and they’ll help.

Raster: Image defined by an array of unique dots.
Vector: Image constructed from mathematically defined lines and fills.