squeezr is most effective on sites with big images and heavy use of CSS3 media queries, which is typical for responsive or mobile web designs. However, in most cases at least some small savings can be achieved through image recompression and CSS minification. If the savings calculated by the test pilot aren't that huge, it's either because there's not much to save about your site (e.g. images are too small for downscaling and you don't use media queries), or because you just did a pretty good job already! ;)

The easiest-to-use graphical effects are the shorthand filter functions. You apply them with the CSS filter property. The browser manipulates the appearance of the corresponding element before painting it to the page. Filter functions are supported prefix-free in Firefox since version 35 (stable release in January 2015). They have been supported with the -webkit- prefix in Safari, Chrome, and Blink-based Opera for a few years now.

Those colorful filters uses css blend modes and were heavily inspired by Spotify new 2015 ads.

This technic is called "DuoTone", and today, with the power of CSS we can play around with some blend-modes properties, to get some cool visual results.

The redesign of my website finally gave me an opportunity to experiment with SVG filters and color manipulation. The duotone look, which was made sort of trendy again earlier this year by Spotify's new brand identity, is based around manipulating the image's color range by modifying the individual color channels.

SVG for Everybody adds external spritemaps support to otherwise SVG-capable browsers.

But lately (several months) I’ve been thinking can we use SVG icons in Social Menu instead of icon fonts. Leland Fiegel picked up my question in Twitter and rolled his own idea. It’s not bad solution but what if we could do this without Javascript.

Why and how one should switch from icon fonts to SVG files, presentation given by Sami Keijonen in Exove's WordPress Café on May 10th, 2016.

Minify images seamlessly

Icons are everywhere. These “little miracle workers” (as John Hicks described them) help us reinforce meaning in the interfaces we design and build. Their popularity in web design has never been greater; the conciseness and versatility of pictograms in particular make them a lovely fit for displays large and small.

But icons on the web have had their fair share of challenges. They were time-consuming to prepare for every intended display size and color. When high-resolution displays hit the market, icons looked particularly low-res and blocky compared to the text they often accompanied.

So it’s really no wonder that icon fonts became such a hit. Icons displayed via @font-face were resolution-independent and customizable in all the ways we expected text to be. Sure, delivering icons as a typeface was definitely a hack, but it was also useful, versatile, and maybe even a little fun.

But now we need to stop. It’s time to let icon fonts pass on to Hack Heaven, where they can frolic with table-based layouts, Bullet-Proof Rounded Corners and Scalable Inman Flash Replacements. Here’s why…

Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects. Learn more about material design and our process for making these icons in the system icons section of the material design guidelines.

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern desktop browsers.

Create a simple but beautiful 3D flipping gallery with on JS call

Image loading seems to be something that’s either overlooked entirely, or handed off to unnecessarily large plugins. Having a beautiful, smooth and speedy loading experience for your site is a crucial part of good UX, and should be considered a common courtesy to your designer. After all, who wants to see their design spoiled by choppy line-by-line image loading every time they log on?

RUSSIA IS SEXY LIKE YOUR SASHA GREY'S BOOBS

Why should I use this slider?

Fully responsive - will adapt to any device
Horizontal, vertical, and fade modes
Slides can contain images, video, or HTML content
Advanced touch / swipe support built-in
Uses CSS transitions for slide animation (native hardware acceleration!)
Full callback API and public methods
Small file size, fully themed, simple to implement
Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
Tons of configuration options

jQuery plugin written by Jay Salvat. Full credits for the Face detection algorithm go to Liu Liu.

WP Image Resizer & a replacement for Timthumb. Extends and uses the default capabilities of WordPress' Image Editors to add some basic Timthumb capabilities.

Animated Navigation Icons with CSS3 Transforms

This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.

SVG files, especially exported from various editors, usually contains a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result. SVGO to the help. + https://github.com/svg/svgo-gui