All posts tagged ‘graphics’

File Under: Mobile, Multimedia

TinySrc Shrinks Your Images for Mobile Browsers

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:


http://i.tinysrc.mobi/http://foo.com/foo.png

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.

[via Ajaxian]

See Also:

File Under: Glossary

Bit Depth

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.

File Under: Glossary

Crop

To crop means to cut the pieces of an image that you don’t need.

Cropping differs from resizing because when you crop an image you retain the dimensions of the image. Resizing an image actually shrinks the image into smaller dimensions.

File Under: Glossary

DPI

Dots per inch (DPI) measures the resolution of images on a screen or printed page. The more dots, the better the resolution

File Under: Glossary

Index Color

Producing images for the web invariably means minimizing the number of colors (and therefore the file size), and the index color system is another step in this squishing process. With a 216-color palette loaded, Photoshop will map an image to those colors when you move it into index color mode. While this helps the compression and allows you to choose bit depth, it also makes the colors dither, or shift numerically, to the palette. One way to compensate for dithering in the index mode is to use a histogram, which is basically a bar graph of each color’s frequency in the image. In most image-processing programs, you can manipulate the histogram and determine how much weight to give certain colors in the resulting palette.