画質を保ちつつ極限までファイルサイズ減量できるWebツール『PNG Minimizer』
画質を保ちつつ極限までファイルサイズ減量できるWebツール『PNG Minimizer』 『PNG Minimizer』はPNGフォーマットの画像を画質を極力保ちながらファイルサイズを小さく圧縮してくれるWebツール。 使い方は最大5MBまでの画像をアップロードし、変換された画像をダウンロードするだけです。 （入力画像はPNG以外にBMP／ICO／ GIF／JPGの各フォーマットに対応していますが、すべてPNGフォーマットで出力されます） 仕組みとしては以前紹介した『TinyPNG』と同様に画像に使われている色の数を少なくすることで全体のファイルサイズを小さくするというものです。 試しに前回と同じ画像を使って試したところ、256色で実に71%のファイルサイズ削減が実現できました。 上のように拡大してみるとグラデーションの具合や輪郭のシャギーなどアラが目立ちますが、通常サイズで見る分にはあま
複雑な条件の画像リサイズがドラッグ＆ドロップで完了、事前に4つの設定を保存して組み合わせ可能な「VarieDrop」
4つのリサイズ設定が保存できるので、決まった処理をする場合に設定変更をする手間が省くことができ、操作はドラッグ＆ドロップで簡単に実行できるフリーソフトが「VarieDrop」です。出力フォーマットはGIF・BMP・PNG・JPEG・GIF・TIFFで、Windows XP・Vista・7・8上で起動可能となっています。 ダウンロード、インストール、設定・操作方法については以下から。 Software - Vieas Web http://www.vieas.com/en/soft.html 上記サイト中段のVarieDrop項目にある「EXE」をクリック。「ZIP」も選択できます。 ダウンロードしたインストーラーを実行。 「OK」をクリック 「次へ」をクリック 上にチェックを入れて、「次へ」をクリック 「次へ」をクリック 「次へ」をクリック 「次へ」をクリック 「インストール」をクリック
[JS]多彩なアニメーションを備えたスライドショーがスクリプトを一行も書かずに実装できるスクリプト -Cycle.js
スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl
サイトのスクリーンショットを撮って加工/整理できるChrome拡張機能＆アプリ「Clipular」
Chrome拡張機能には多くのスクリーンショット機能を持ったものがあります。その中でも今回は、ただ単にスクリーンショットを撮って画像を加工できるだけでなく、サイトのブックマークや共有機能を持ったものをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! スクリーンショットを撮って整理できる「Clipular」 「Clipular」は開いたページのスクリーンショットを撮って、画像を編集/整理しておけるChromeアプリと拡張機能。 画像加工することも可能で、その画像をすぐさまURLと共にFacebookへ共有する機能も持っています。 Alt + C でスピードスクリーンショット ↑Alt + CまたはChrome拡張機能を使ってボタンを押すと、 ↑範囲選択画面になります。 ↑範囲指定はサイ
イメージに合うアイキャッチのダミー画像などを作成できるちょっと尖ったサービス６つ
ダミー画像（プレースホルダ）を生成してくれるサービスは多々ありますが、この手のサービスはいつも使っているものがサービスを終了してしまうと凹みますし、また探すのが面倒なものです。 つい最近もFlickr画像からダミー画像を生成できるFlickholdrがサービスを終了してしまいました。 そこでここでは、いつ使えなくなっても大丈夫なように、要望にそったダミー画像を生成できるサービスをご紹介しておきます。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! ちょっと尖ったダミー画像を生成できるサービスまとめ ここでは2013/01/19現在に利用できることを確認した６つのサービスを紹介しています。 ダミー画像をアイキャッチ画像として生成できる「lorempixel」 まず一つ目はジャンルを選べる「lorem
ブラウザにファイルをドロップしてはいけない - ぼくはまちちゃん！
こんにちはこんにちは！！ 先日、CROSS 2013っていう、エンジニア向けのビール飲み放題のイベントに行ってきました！ そこの「HTML5×セキュリティ」っていうコーナーで、ちょっと喋ってきたんですが、 その時の小ネタを紹介しておきます。 最近、ブログとかのWebサービスで写真をアップロードする時に、 ファイルをドラッグ＆ドロップするだけでできたりしますよね。 いちいちダイアログから選ばなくていいから便利です。 こんなやつ。 この手の仕掛けって、ドラッグ時にボーダーカラーを変えたりして 「いまドラッグ＆ドロップ状態ですよ〜」ってわかりやすく表示されますが、 それって別に、ブラウザが警告の意味で出してるんじゃなくて、 あくまで、Webサービス側が親切で表示してるだけなんですよね。 ってことは ・ドラッグされても特にボーダーラインなどを表示せず ・画面上のどこでもドロップを受け入れるようにし
マウスホバーで画像を拡大させるjQueryプラグイン・Image Zoom Plugin
よくあるマウスホバーによるイメージズーマースクリプトです。様々なタイプのズーマーを実装出来るのでなかなか便利そうだなーと思って備忘録。とはいえ同じ物も沢山あるのでお好みで良さそうです。 ECサイトなんかでよく見かけるやつですね。マウスを乗せると拡大され、動かす事で細かい部分を確認出来る、みたいな。
WordPressでFacebookからのアクセス数を簡単に増やすための3つの設定手順|シェア時の画像サイズを3倍にしよう！ « 株式会社ガイアックス
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
櫻田潤 | インフォグラフィック・エディター
ビジュアルの力で世界を丸くする。 地球の形状が「丸い」のは、そこで暮らす僕たちにひとつの「ビジョン」を指し示しています。地球の形と同じように、世界で起こっていることのすべてが丸く収まっていれば良いのですが、現実は違います。 大小いろいろな規模の摩擦がいたるところに発生し、繰り返されます。その解決に必要なのは、お互いの「考え」や「価値観」「立場」、「状況」「状態」を示し、認め合うことです。そのために、「ビジュアル」の力を活用していきます。
画像を徐々に読み込みながら、タイル状に並べていくjQueryプラグイン「stalactite」
twitter facebook hatena google pocket Pinterestが流行ってからタイル状に配置するデザインが増えました。 新はてブのように目線がばらつくという指摘もありますが、画像だけを見せるのであれば有効な手段なのではないでしょうか。 今回紹介する「stalactite : A jQuery plugin」では、画像だけでなく、iframeなども徐々に読み込んでいくというエフェクトもかけてくれます。 sponsors 使用方法 stalactite : A jQuery pluginからファイルをダウンロード。 下記のようにJavaScriptを記述します。 <script type="text/javascript" src="/test/js/jquery-1.8.3.min.js"></script> <script type="text/javascr
IE6もOK！jQueryプラグインでぐりんぐりんする画像切り替えを作る
twitter facebook hatena google pocket 最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。 sponsors 使用方法 box-sliderからファイル一式をダウンロード。 切り替えたい画像を下記の通り記述します。 <div class="slider-viewport"> <div id="id名"> <figure> <amp-img src="画像パス1"> </figure> <figure> <amp-img src="画像パス2"> </figure> <figure> <amp-img src="画像パス3"> </figure> </div> </div> あとはJav
Instagramの写真をサイトに簡単掲載できるjQueryプラグイン「Spectragram」:phpspot開発日誌
jQuery Spectragram Instagramの写真をサイトに簡単掲載できるjQueryプラグイン「Spectragram」 jQueryプラグインなので、アクセストークン、ClientID等を取得する必要はありますが、プログラミングレスな感じで実装が可能です。 サイトにInstagramの写真載せたい、という方はお手軽に利用できそう 指定ユーザの写真、ポピュラー、タグ等で取得できます。 関連エントリ Instagramから写真を取ってきて表示できるjQueryプラグイン「jQuery Spectragram」 画像をアップしてInstagram風エフェクト等様々な編集も可能なBootstrapベースのアプロダ「Filepicker.io」
スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」:phpspot開発日誌
jKit - jQuery based UI Toolkit - Index スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 １つのライブラリで様々な機能を実現できます。必要に応じて読み込む必要がありますが、基本的にマークアップと属性をベースに記述でき、スクリプトを可能な限り書かないでもよいような実装ができるみたい。 スライドショー LightBox ソータブルなテーブル 簡易グラフ スクリプトを書くのが苦手という方は使ってみてもよさそうなライブラリでした。 関連エントリ 超クールなjQueryUIテーマ「Delta」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI
テキストボックスに指定したURLのタイトルやdescription、使用されている画像等を取得するjQueryプラグイン・Link Scrapper TextBox
指定したリンク先のURLやタイトル 、description、ページ内で使用し ている画像を取得するjQueryのプラ グイン・Link Scrapper TextBoxの ご紹介です。Facabook等でも使わ れていますね。 Facebookのように、テキストボックスにURLを入れると、そのURL先のタイトルやdescription、画像を取得する、というスクリプトです。jQueryに依存しています。 上記のようにタイトルやdescriptionなどを取得、表示しています。何かと使えそうですねー。 以下公式の動作サンプルです。 Sample コード<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="linkScrapper.min.js"></script>本体とプラグインを読み込みま
画像に透かし文字を入れられるソフトいらずのオンラインツール「uMark Online」
自分で撮った写真を画像としてオンラインにアップする際、自分の著作権を明示するために透かし文字を入れているケースをよく見ますよね。 画像加工ソフトを所有していれば、カンタンに透かし文字を入れることもできますが、持っていないとき、あるいはインストールしていないパソコンで作業したい時、どうしようか迷ってしまうこともあるのではないでしょうか。 そんな時に役立ちそうな、ソフト不要で無料のオンラインツールをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 画像へカンタンにすかし文字を入れられる「uMark Online」 「uMark Online」はアップロードした画像へカンタンに透かし文字を入れることができるオンラインツール。 海外ツールですが、日本語にも対応しており、なおかつシンプルな手順
jQueryで異なる大きさの画像をリサイズ&中央表示する | ryodesignblog
やりたいこと なんかよく分からん説明で申し訳ないですが…。 つまりどういうことをやりたいかというと、WordPressのトップページや記事一覧ページなどで画像のサムネイルを表示するときに、画像をいい感じにリサイズして配置したい、ということです。 つまり…どういうことだってばよ…？ 画像のリストがある状況 画像でリストを作る感じです。複数のliタグの中にそれぞれ大きさの異なる画像があるという状況。liの幅と高さは400x200pxとします。 そのままリサイズすると…？ imgの横幅を400pxにリサイズするとします。例えば800x600pxの画像は400x300pxにリサイズされて、ちゃんと表示されます。 でも、800x300pxの画像だと、400x150pxにリサイズされて、50pxの余白ができちゃうわけですね。 これを解決したいなぁと。 画像が横長の場合 先ほどの800x300px
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでモーダルダイアログを実現するプラグイン２０:phpspot開発日誌
画像やテキストを暗号化して再生可能なMIDIファイルに変換する「サイファチューン」NOT SUPPORTED
https://creative-tweet.net/blog/2013/01/material-download.html
サービス終了のお知らせ - NAVER まとめ