EverWeb ThemeKit

Image Compression & Animated Page Load

Uncompressed JPEG
Uncompressed JPEG

File Size: 138KB

Compressed JPEG
Compressed JPEG

File Size: 90KB

Smart PNG and JPEG compression

Too many oversized images are the biggest cause of web pages performing poorly in the browser. Resising and compressing images before they are imported into EverWeb is well worth the little extra time it takes.
Compare the images above to see the hardly noticeable difference between a raw image and one that has been compressed.
TinyPNG
TinyPNG uses smart lossy compression techniques to reduce the file size of your JPEG and PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
The more complex the image and the number of colors - the greater the reduction in file size will be.

Info & Signup
tinyPNG
tinyPNG

Drag & drop simplicity

tinyPNG.App

When compressing images regularly its easier to download the free app to use on the desktop.
It provides a GUI front end for tinyPNG for your local computer so you can optimise images using the tinyPNG service without opening up a browser and navigating to tinyPNG's website.
Just drag and drop your PNG and JPG images onto the app window and your images will be optimized/compressed using tinyPNG's API Service. You will need to acquire an API key from tinyPNG.
The converted file will automatically appear in the Finder folder with the original image.

Get The App

Content Fade In

Adding a fade in animation to the page content on load gives a very smooth transition and helps to nullify the effect of large images taking time to appear.
The simple widget used here can be inserted anywhere in the stack of widgets on a responsive page template. It has controls for height, background color and opacity, animation time set in milliseconds and a checkbox to turn it on.
The widget can also be used as a spacer by increasing its height and setting the background opacity to zero.
In this demo, the height is set to 24px and the background color set to solid blue so that it can be seen.

Free Download