If you’ve played around with optimizing your website for small screens, you know one of the big headaches is resizing images. You can set the viewport in your head tags to make sure your main content is the focus on mobile devices, but you can’t easily shrink images.
On many mobile devices, rendering the images is what slows down page load times. That’s where TinySrc comes in. It’s a clever service that parses your images and presents scaled-down versions to mobile devices.
Using tinySrc is pretty simple, all you need to do is prefix your image URLs with the tinySrc domain, something like:
TinySrc will then detect the device that’s visiting your site (tinySrc has partnered with Device Atlas so its device listings are extensive) and serve out an appropriately shrunken version of your image.
If you’d like complete control over the size of your images, you can specify parameters in the URL. For more details on all of tinySrc’s settings see the documentation.
While you are relying on a third party service — a choice which always carries the usual concerns about speed and reliability — tinySrc is definitely one of the fastest, easiest ways to shrink your images for the small screen.
If a computer-displayed image is interlaced, then it is rendered in alternating horizontal lines.
For example, browsers display interlaced GIFs in alternating passes, skipping every other line and rendering a kind of blurry image first and then sharpening it on subsequent passes. This is useful if you’d like your viewers to get a general idea of the image while they are downloading it. Interlacing for GIFs was designed to make bigger images quicker to download, but the problem is that an interlaced GIF actually has a larger file size than a non-interlaced GIF, so use this method cautiously.
If you’re at all interested in e-biz, you’d better get serious about tracking webographics. A user’s webographic profile includes platform (Mac, Unix, or Windows), browser make (IE, Netscape) and model (3.0, 4.0), and connection speed (T1, 28.8, 14.4). Each of these factors can have a dramatic effect on a user’s experience, and every developer must decide whether to build a site that’s accessible to everyone (meaning fancy cutting-edge doodads are out) or create something really cool that won’t work unless users upgrade. We, of course, recommend the former.
A bitmap is a mapped array of pixels that can be saved as a file.
Both JPEG and GIF are bitmap graphic formats. Currently, the only other way to store an image is as a vector graphic. You can’t easily scale bitmap images, but you can control every single pixel and thus achieve many effects impossible in vector graphics. Conversely, vector formats offer advantages of scalability and lower bandwidth requirements. When you compress a bitmapped image, you suck out some of the visual information.
To bypass this, the portable network graphics format (or PNG, pronounced “ping”) was designed to store a single bitmap image for transmittal over computer networks without losing this data.
Bit depth describes the file size of an image by orders of magnitude.
When wrangling with file size versus image quality, it’s often important to minimize the bit depth of an image while maximizing the number of colors. To calculate the maximum number of colors for an image of a particular bit depth, remember that the number of colors is equal to two to the power of what the bit depth is. For example, a GIF can support up to eight bits per pixel, and therefore can have as a many as 256 colors, since two to the power of eight equals 256.