background preloader

Web Image Handling

Facebook Twitter

Image Size Calculator/Convertor. What is a pixel? What is DPI? (Dots Per Inch) You may think you don't know what a pixel is, but, If you've ever seen a card stunt at a sports event, you probably do! A pixel is simply the individual point of color on a digital image. A pixel doesn't have a particular size. It is an abstract represention of a specific coordinate, like a point on a map.

This same concept extends to many other digital products. Pixel indicates only a point on a grid, not the size of the point. For Printers and scanners, the individual points of color are often called 'dots' rather than pixels, but the concept remains the same as the stadium. The scanner performs this function in reverse, by recognizing the color at a specific row and column on the item being scanned.

The GNU Image Manipulation Program.

Image Hosting

Acazsouza/jQuery-LargePhotoBox - GitHub. A-slideshow - jQuery Slideshow Plugin. How to Scale Embedded Media in Responsive Designs. In order to make responsive designs successfully adapt to any screen size, you need to properly scale not just headlines and text elements, but images and other media. We’ve already covered a number of solutions for images, but what about other elements like video? Scaling video when you can control the embed code is pretty easy, the same max-width tricks that work on images will work on video. The tricky problems with scaling video come when you start trying to embed movies from other websites. YouTube and most other video hosting sites typically include a fixed width and height in pixels as part of the embed code.

That’s fine for older designs, but it doesn’t scale in a responsive layout. Swedish web developer Anders Andersen recently tackled the problem of responsive embeds and came up with a solution that works with both YouTube and Vimeo movies. For the full details and the CSS that makes it work, be sure to read Andersen’s whole post. Scottjehl/Responsive-Images - GitHub.