background preloader

ImageOptim — make websites and apps load faster (Mac app)

ImageOptim — make websites and apps load faster (Mac app)
ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations. ImageOptim seamlessly integrates best optimisation tools: PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle. It's excellent for publishing images on the web (easily shrinks images “Saved for Web” in Photoshop) and also useful for making Mac and iPhone/iPad applications smaller (if you configure Xcode). How to use it Simply drag'n'drop images or folders into the window!

Ultimate Free Icon Set: 1000 Free Icons By This design resource freebie — containing 1,000 free vector icons — is the biggest free icon set that Six Revisions has ever released. This freebie comes in three formats: PNG – a popular web format that’s ready to use (read about the PNG image format here)EPS – an editable graphics vector file that you can open and edit in vector-editing software like Adobe Illustrator and CorelDRAWAI – the original vector file that you can open and edit in Adobe Illustrator This freebie was created exclusively for the Six Revisions readers to enjoy by — a search engine that helps graphic and web designers find high quality photos, vectors, illustrations, and PSD files for their creative projects.

HTML-Image map Creator WYSIWYG - uses AJAX What is an Image map? In HTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations. see Wikipedia An image map is an image that has "active regions". Backbone.js Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license.

The Era of Symbol Fonts Improving performance is a constant process. First we ditched tables, spacer gifs, and inline markup such as the <font> element in favor of CSS, reducing page sizes, and separating style from layout. Then we became aware of all our DNS requests, caching, and the total number of files and started using CSS sprites, moving many small images out of the HTML and into a single background image. Image masking with HTML5 Canvas Saturday, June 15th, 2013 at 10:24 am I just added a small demo to my GitHub showing how you can do image masking by using the canvas element. All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask.

Social Sharing Report for Google Analytics A friend recently asked me for a Google Analytics report that shows which content is getting shared on a site and on which social networks it’s being shared on. No problem, that’s a job for a custom report! Rather than just a simple data dump, I want to explore this segment of people: the people who take the time to share my content. I want to understand: The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden.

Cycle2 Overview Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest. love ♥ Easily find the DPI/PPI of any screen There are arguments for both terms. In general PPI is a bit more correct but DPI is more commonplace, hence its usage on this site (also wasn’t available :P). If you are interested, you can read more on this in the Wikipedia article about Pixel Density. In more recent terminology, DPI is often used for the actual device pixels and Dots Per Pixel (dppx) for the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).

Related:  progs