yourfirstserver.com

Crop Image File Size, Width & Height Using Php Script

Tweet

Crop Images Contextually

Crop images contextually for faster downloads and higher impact. By cropping maximally and resizing you can convey meaning without slowing down your web pages.

However, we’ve seen many sites that either use HTML’s width and height attributes to resize larger images, or minimally crop and resize images to lose vital information. A better way to create images optimized for the Web is to crop them contextually.

Contextually Cropping

What is cropping contextually? Many times digital images shot for Web use have a border of useless space around the object(s) of interest. Rather than crop to just the film or chip’s border, crop contextually down to the minimum dimensions that still convey the meaning or context of your image.

Note how the author is now more recognizable in the cropped version (behind the sunscreen) and the lettering is larger and more legible. Most importantly, the image has more impact, with the subject taking up more of the frame. This cropped image could be shown with a smaller dimension, saving file size.

Resize to a Smaller Thumbnail

Once you’ve got your image maximally cropped, resize and sharpen it to create a smaller thumbnail image. To give the reader more detail, you can provide a larger version (cropped or uncropped) of the image linked to that thumbnail.

This two-step process of cropping maximally and resizing is what Jakob Nielsen calls “relevance-enhanced image reduction.” Nielsen writes that by combining cropping and scaling you can “preserve both content and detail, even at very small sizes.” (Nielsen 2000)

Extreme Closeup for a Sneak Preview

Some high fashion sites actually use only the important part of an image as a thumbnail. For example, just the shoulder or neckline of a style – click and you get the full shots with details. This “image tease” technique can add an artistic feel to a site. Let’s get up close and personal with our intrepid traveler.

Extreme Cropping through Rearrangement

In extreme cases you could rearrange the target objects and reshoot, or move them closer together in your favorite image editing program. The idea is to use the smallest possible image that still conveys the information you want to display. You may need to bump up font sizes to withstand more extreme image reductions.

JPEG Cropping Caution

Be careful when resaving JPEG images. Reoptimizing an existing JPEG can compound compression artifacts. It is possible to transform JPEGs losslessly, however. Lossless transformations (like 90-degree rotations and flips) require the dimensions of the JPEG to be a multiple of the block size (16×16, 16×8, or 8×8 pixels for color JPEGs). Lossless crops are also possible by cropping to block boundaries with specialized software, like JPEG Wizard.