フロントエンドの画像軽量化まとめ【2017年版】 - KAYAC engineers' blog
こんにちは、面白法人カヤック フロントエンドエンジニアのごんです！ 今回は、Webの画像の軽量化について、フロントエンドチームで使ってるツールややり方をまとめてみました。 画像の軽量化などで困ってる方の参考になればと思います。 なぜ画像の軽量化をするのか Webサイトのローディング時間は、ユーザーの直帰率やコンバージョン率に関わる大切な指標です。 ローディング時間に関わる要因はさまざまですが、 特に画像は容量が大きいため、画像の軽量化をすることで表示速度の大きな改善を望むことが出来ます。 例えば、当ブログのある記事は、画像が全体の容量の約1/3を占めていました。 一般に、PhotoshopやIllustratorから出力された画像は、十分な色数やクオリティで出力されており、 ツールなどを使うことで、見た目をそれほど損なわず、容量を大幅に減らすことができます。 また、一部の画像形式には、メタ
Lossy GIF compressor
This is an encoder (based on gifsicle) which implements lossy LZW compression. It can reduce animgif file sizes by 30%—50% at a cost of some dithering/noise. Downloads and source code on GitHub Usage ./gifsicle -O3 --lossy=80 -o lossy-compressed.gif input.gifAdjust --lossy argument to quality you want (30 is very light compression, 200 is heavy). It works best when only little loss is introduced,
Images - Documentation - iTerm2 - macOS Terminal Replacement
Inline Images Protocol iTerm2 is able to display images within the terminal. Using a similar mechanism, it can also facilitate file transfers over any transport (such as ssh or telnet), even in a non-8-bit-clean environment. Just want to try it out and don't care about the protocol? Use the imgcat tool. Download imgcat here Example: imgcat Using the imgcat script, one or more images may be display
Ranger image preview on OSX with iTerm2
How to configure ranger image preview on OSX with iTerm2? Ranger’s image preview in iTerm2 does not work out of the box and you will need some additional scripts and config settings to get it working. Here you can see step by step how it gets done. TL;DR Install iTerm >= 2.9 and… # Install homebrew command -v brew > /dev/null 2&>1 || ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew
Pngyu
ツイート Pngyuは簡単なマウス操作のみで複数のPNG形式の画像ファイルを一括で圧縮し、大幅なファイルサイズ削減を実現するツールです。 PNGファイルの圧縮エンジンにはImageAlphaやTinyPNGでも使用されている pngquantを使用しています。 pngquantでは24bit/32bitフルカラーのPNGファイルを優秀な減色アルゴリズムを用いて8bitインデックスカラーに変換することで、 圧縮を実現します。 ※圧縮には減色処理が伴うため圧縮後は元の画像に戻すことは不可能となります。 重要なファイルの圧縮の際には事前にバックアップを行なってください。 またこのソフトウェアを使用した結果より生じた損害に対していかなる責任も負いかねます。 How to use 使い方は簡単です。 まずPngyuを起動し画面中央のDrop hereと書かれたエリアに圧縮したいPNGファイルをドラッ
canvasの画像をtoDataURL()を使ってRailsのcarrierwaveで保存するまで - Giba
個人的にとてもタイムリーな記事を参考に試してみた。 [rails]base64エンコードされた画像をcarrierwaveに保存する | hello-world.jp.net だがRails4のstrong parametersの理解不足で余計な時間が掛かってしまった。 まずはデータの流れ。 <%= form_for(@item) do |f| %> <%= f.file_field :image %> <%= f.hidden_field :remote_image_url %><!-- 今回の修正で追加 --> <%= f.hidden_field :user_id, :value => current_user.id %> <% end %> 元々このようなフォームを使用していた。 「file_fieldでローカルの画像を取得 → その値をJavaScriptで変更監視 → canv
Compressor.io - optimize and compress JPEG photos and PNG images
Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP
optipng home page
optiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information. This program also converts external formats (BMP, GIF, PNM and TIFF) to optimized PNG, and performs PNG integrity checks and corrections. If you wish to learn how PNG optimization works, or to know about other similar tools, see the PNG Tech article A guide to PNG optimization. DOWNLOAD opti
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails 超お手軽な画像アップローダー CarrierWave の使い方
gifcult