ダミーの画像やテキストを提供するweb components・「</placeholders>」
</placeholders>はダミーの画像やテキストを提供するweb componentsです。SVGで生成され、動作も高速です。 使い方もシンプル。勿論ReactやSvelte、VueなどのJSフレームワーク等でも利用可能です。 <script type="module" src="https://unpkg.com/@placeholders/core@0.0.2/dist/esm/placeholders.js"></script>スクリプトを読み込んで <placeholder-image></placeholder-image>このようなタグを使えば良いだけ。 <placeholder-image width="400" height="200" text="Hello World"></placeholder-image>従来のダミー画像生成サービス同様、サイズ指定や任意の文
ブラウザで処理するプライバシーに配慮したオープンソースのJPEG最適化ツール・「JPEG.rocks」
JPEG.rocksはブラウザで処理するプライバシーに配慮したオープンソースのJPEG最適化ツールです。サーバーに送信しない、WebAssemblyを使用したブラウザベースのJPEGオプティマイザで、利用者のプライバシーに配慮した設計となっています。 OSSとしてソースコードも公開されているので自身で利用する事もソースを確認する事も可能です。Google推奨のおかげか、世間はWebPに移行しつつあるのかもしれませんが、すぐにJPEGが無くなるわけでもないでしょうし、この手のツールもまだ需要はありそうですね。 オープンソースである事は開発者も明示しているのですが、ライセンスは不明です。利用したい場合は開発者にお問い合わせください。 JPEG.rocks
imgpush - オープンソースの画像共有サーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ImgurやGyazoなど画像アップロードサイトは多数あります。そうしたサイトを使うことで友人やコミュニティサイトなどで画像共有を簡単に行えますが、コンテンツの公開制限をはじめ、自分で制御できないことに不安を感じる人もいるでしょう。 そこで使ってみたいのがimgpushです。画像を簡単にアップロードできるサーバを手軽に設置できます。 imgpushの使い方 imgpushを立てたら、後はそこにポストするだけです。 $ curl -F 'file=@photo.jpg' http://localhost:5000 {"filename":"Vl0U9.png"} この場合、 http://localhost:5000/Vl0U9.png で画像にアクセスできます。 wとhというパラメ
imagemin - 画像サイズをコマンドラインでまとめて軽減
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ネットワーク上に流れるデータは極力小さい方が良いです。圧縮はもちろん、余計なメタ情報を削除したりして、ネットワーク負荷を軽減するのが望ましいでしょう。しかし一つ一つのファイルを手作業でやるのは現実的ではありません。 そこで自動化です。今回はコマンド一つで画像サイズを軽減できるimageminを紹介します。 imageminの使い方 例えば以下のようにコマンドを実行します。これだけでPNGファイルをまとめて処理してくれます。 $ imagemin *.png -o ./out 処理前後のファイルです。682KBが433KBになっています。37%削減されています。 imageminはオプションとして他の画像圧縮ライブラリを指定できます。より圧縮率の高いアルゴリズムを指定するのも良いでし
GoogleのJPEGエンコーダーGuetzliを試してみた | DevelopersIO
はじめに AWSチームのすずきです。 GoogleがOSSとして公開しているJPEGエンコーダーの「Guetzli」。 従来のJPEG変換ツールと比較し、画質を保ちつつ35%のファイルサイズを抑制できると謳われています。 今回Ec2環境(Amazon Linux)上で、「Guetzli」と「ImageMagick」によるJPEGファイルの最適化を実施し、比較を行う機会がありましたので紹介させていただきます。 GitHub - google/guetzli Announcing Guetzli: A New Open Source JPEG Encoder GoogleがJPEGエンコーダー「Guetzli」をオープンソースで公開 準備 Ec2 OS: Amazon Linux 201707 amzn-ami-hvm-2017.03.1.20170812-x86_64-gp2 インスタンスタ
Google、JPEGを35％小さくできるエンコーダー「Guetzli」をオープンソースで公開
Web高速化を目指すGoogleが、JPEGファイルを従来の方法より35％小さくできるというエンコーダー「Guetzli」をオープンソースで公開した。エンコードに時間とメモリがかかるが、完成したファイルは軽い上に画質も従来より高いとしている。 米Googleは3月16日（現地時間）、従来よりJPEGサイズを約35％小さくできる新エンコーダー「Guetzli」（グエツリ、ドイツ語で「ビスケット」のこと）をオープンソースで公開したと発表した。GitHubで公開されている。 Guetzliで画像をJPEGにすることで、画像を多数使うWebサイトの読み込みを高速化できるとしている。手法的には同社が2013年に公開した汎用データ圧縮ライブラリ「Zopfli」と近く、新しい画像フォーマットを必要としない。また、「WebP」や「RAISR」とは異なり、圧縮を高めるためにクライアント側を変更する必要がない
任意の画像をレスポンシブに対応したHTMLタグや画像を生成するジェネレーター・「Responsive Image Breakpoints Generator」
Responsive Image Breakpoints Generatorは任意の画像をRWD対応にする為のジェネレーターです。srcset属性による画像へのブレークポイントと縮小画像をサクッと作成してくれます。pictureタグの生成に加えてRuby、node.js、PHP等のコード生成にも対応していましたので画像のレスポンシブ周りは一通りサポートしている印象です。srcsetを非対応ブラウザに対応させるpicturefillも合わせてご参照下さい。本アプリはオープンソースとして公開されています。 ※2016/01/28現在、Githubはダウンしていますのでソースをご入用の方は時間を置いてからアクセスしてみてください Responsive Image Breakpoints GeneratorOn Github
二次元画像を拡大したいと思ったことはありませんか？ - デー
うまくできましたか？ ボヤけたり、ギザギザになったりしませんでしたか？ waifu2xをお試しください。 (ブラウザの処理に影響されないようクリックで拡大おねがいします) waifu2xは、二次元画像を2倍に拡大するソフトウェアです。多くの二次元画像についてスゴイ級のクオリティで拡大できます。 waifu2xは、最新鋭の人工知能技術 Deep Convolutional Neural Networks を使って開発されました。 waifu2xの人工知能は、次の問に答えます。 いまから与える画像はある画像を半分に縮小したものである。縮小される前の画像を求めよ。 画像を拡大するのではなく、縮小される前の状態に戻します。 縮小されてないオリジナル画像を与えた場合も、やはり縮小される前の画像を答えます。 その画像は本来存在しないものですが、waifu2xはそれを想像で創ります。 二次元画像のJPE
DarkroomJS – JavaScriptで画像切り抜き
画像加工を行うと言えばローカルで画像編集ソフトウェアを使うのが思い浮かびますが、最近では随分Webベースで行えるようになっています。複雑な加工はまだまだですが、ちょっとした加工であればWeb上で行う方が手軽だったりします。 今回はその一つ、DarkroomJSを紹介します。位置を決めて切り抜きするという加工をシンプルに手早くできるようになります。 DarkroomJSの使い方 DarkroomJSはCanvasタグを使って画像加工を行います。加工後はそのまま切り抜かれた形で保存もできるようになっています。今は写真コンテンツも大きくなっているので、それをユーザサイドで加工してもらうための方法として使ってみるのが良さそうです。 DarkroomJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 DarkroomJS MattKetmo/darkroomjs
アニメーションもできるWebベースのドローライブラリ·Two.js MOONGIFT
Two.jsはSVG/Canvas/WebGLを使ったWebベースのドローライブラリです。 HTML5の登場によってWeb標準の技術だけでHTML上に図形を描画できるようになりました。とは言え、すぐに使いこなせる訳ではありません。そこで使ってみたいのがTwo.js、アニメーションをサポートしたドローライブラリです。 2Dのレンダリングだけでなく、アニメーションも行えます。 SVGであれば拡大しても奇麗です。 Two.jsはCanvas/SVG/WebGLをサポートしたドローライブラリで、アニメーションも実行できます。小さく表示はもちろん、拡大してもスムーズな描画が可能で、使いどころが多いのではないでしょうか。 Two.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る イラストやアニメーションと言った類のものはプログラマーに
PNG画像を1/3以下のサイズに軽減·ImageAlpha MOONGIFT
ImageAlphaはMac OSX用のオープンソース・ソフトウェア（GPL）です。 PNGはWeb上でよく使われる画像フォーマットです。よく使われるだけに、そのサイズについては気になる所ではないでしょうか。圧縮率やメタ情報を削ることができればもっとサイズを軽減できます。そのためのソフトウェアがImageAlphaです。 例です。下を見ると分かりますが、69%も削減できるとのことです。 アルゴリズムや色数は変更できます。この場合は59%削減。 背景を変えて透明度のチェックもできます。 圧縮時にImageOptimを使う指定もできます。時間はかかりますがサイズ軽減効果は大きいです。 圧縮前と圧縮後。どっちがどっちか分かるでしょうか。 サイズで比べると片方は159KB、もう片方は45KBです。1/3以下になっています。 ImageAlphaではPNGを6〜7割近くサイズ圧縮してくれます。一つ一
Webベースの画像加工フィルタ·ImageFilters.js MOONGIFT
ImageFilters.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 今は何でもJavaScriptという風潮があります。クライアントサイドで処理できるのは悪いことではなく、サーバ負荷の分散に役立つでしょう。今回は画像編集を行うImageFilters.jsを紹介します。 元の写真です。左側のメニューで適用するフィルタを選択します。 二値化。 ぼかし。 白黒。 エンボス。 エッジ。 反転。 色調反転。 モザイク。 油絵。 リスケール。 露出変更。 渦巻き。 ImageFilters.jsでは多数のAPIが用意されており、指定した画像に対してエフェクトができるようになっています。画像はCanvasを使って出力されます。出力後、パラメータを変更してさらに加工も可能です。 MOONGIFTはこう見る ImageFilters.jsは細かな画像編集と
SpritePad - ファイルをどんどん追加してスプライト画像を作成 MOONGIFT
CSSでスプライト画像を使うことは増えてきましたが、作成が面倒なのは変わっていません。専用のソフトウェアも幾つかありますが今回はWebブラウザ上でスプライト画像を作成できるSpritePadを紹介します。 使い方 使い方は簡単で、まずはアイコン画像をSpritePadにドロップしていきます。 複数ファイルをまとめてドロップできます。ドロップしたらドラッグして好きな場所に配置していきます。 画像を移動すると右側のスタイルシート設定も変わっていきます。 アイコンの配置が終わったらFit documentを押します。そうすると画像の大きさが最適化されます。 こんな感じにジャストフィットします。 ダウンロード 作業が終わったらDownloadリンクをクリックします。そうするとアイコンをまとめた画像とスタイルシート設定がダウンロードできます。 画像ファイル。ファイル名はsprites.pngになりま
MangaFilter - Web上で写真をマンガっぽく
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ぜひぜひ試して！ 2012年に登場して一気に話題になったマンガカメラ（Android版）。撮影した写真にエフェクトをつけて何となくいい感じにマンガっぽくしてくれるアプリです。 そんなマンガカメラっぽいエフェクトをWeb上でできるようにしたのがMangaFilterです。 何はともあれ、まずは試してみましょう！ MangaFilterは画像に対して二値化してさらにいい感じにフィルタリングすることでマンガに似た雰囲気の出来映えにしています。さらに擬音や効果がつけばそれっぽくなっていくかも知れませんね。ぜひお試しを！ MangaFilterの使い方は簡単で、画像要素にメソッドを実行するのみです。 $('img').mangafilter({'maxWidth': 300, 'maxHei
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Photosのようにオンラインで画像を管理できるオープンソースの代替アプリ・「ImageStore」
オープンソースのダミー画像を生成するplacehold.itのクローン・「sinatra_placehold」
ブラウザ上でSVGを軽量化出来るOSS・「SVGOMG」