[B! png] nagayamaのブックマーク

透過PNGをSVGを利用して軽くするテクニック

透過PNGは現状では唯一に近いフルカラーの透過画像を作成する手段だが、ファイル・サイズが大きくなりがちだ。対してJPGはファイル・サイズという点で大きく優るが、透過することは出来ない。このあちらを立てればこちらが立たずの問題をSVGのマスク機能を使って透過だけを受け持つPNGとJPGを組み合わせることで両立させるテクニックを知った。透過させた画像をまず普通に作る。それから透過してないJPG画像と、透過を反転させてマスクに使うPNG画像を生成する。それらをHTMLでSVGのmask要素をインラインに書くことで組み合わせる。ベースとなるJPG画像が一般的にファイル・サイズに優れ、マスクに使うPNGは空白が多いこと、SVGの記述はごく短いもの、というわけで最終的に低ファイル・サイズが実現できる。 SVGのセキュリティ上の制限により、HTMLにインラインで記述するケースでしか使えないのでCSSの

nagayama 2014/09/22

リンク

ImageOptim HTTP API for optimization on web servers

ImageOptim API makes pages load faster Web service for image compression. Easily resize and optimize images on your server. Faster web pages and apps Make images load faster and save bandwidth. Improved compression enables you to use beautiful images without bogging down your site. Image resizing on demand Easily create responsive images and thumbnails with high quality resampling and compression

nagayama 2014/06/26

image
png

リンク

ImageAlpha — image minifier (like JPEG with transparency!)

DownloadVersion 1.5.1 Mac OS X 10.8-11 Not using a Mac? Check out Color Quantizer (Windows), pngquant (Unix) and TinyPNG (on-line). Snow Leopard (10.6) versionChangelogBugsDonateSource code This application is no longer supported. It was written in Python 2, and Python 2 has been deprecated and removed from macOS. Alternatives: lossy option in ImageOptim, pngquant, or squoosh.app. ImageAlpha great

nagayama 2014/06/26

png
image

リンク

pngquant — lossy PNG compressor

pngquant is a command-line utility and a library for lossy compression of PNG images. The conversion reduces file sizes significantly (often as much as 70%) and preserves full alpha transparency. Generated images are compatible with all web browsers and operating systems. Features High-quality palette generation using a combination of vector quantization algorithms. Unique adaptive dithering algor

nagayama 2013/03/29

リンク

画像圧縮サイト／TinyPNG

Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now

nagayama 2012/11/02

リンク

webkit2png

webkit2png is a command line tool that creates screenshots of webpages: With tall or wide pages that would normally require scrolling, it takes screenshots of the whole webpage, not just the area that would be visible in a browser window. webkit2png makes use of WebKit, the rendering engine used in Safari. Installing To install using Homebrew: brew install webkit2png If you don't use Homebrew then

nagayama 2012/10/23

リンク

How To Optimize PNG — Smashing Magazine

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We’ll start with some essentials about the PNG format and will then move to advanced optimization techniques. As a web designer you might be already familiar with the PNG image format which offers a full-featured