全部信じて任せてください! 画像ファイル容量を3～10分の1以下にする「SmartJPEG」知ってますか？ | インタビュー
こちらの画像、左側（286KB）と右側（44KB）とで、ファイル容量が5倍以上異なります。でも見た目に大きな違いはありませんよね？ 画像のファイルサイズが小さければ、ユーザー側はギガ消費を抑えられるし、読み込み速度も速くなります。サイト管理側も、ストレージ容量を削減できます。このように、サイトに掲載する画像を自動で最適化してくれるのが、ウェブテクノロジの画像軽量化ソリューション「SmartJPEG」。 「SmartJPEG」は、見た目そのままに画像容量を抑えてくれるサービス。バージョン2.0を7月10日にリリースし、アニメーションGIFの生成、WebPの出力に対応したほか、画像内容に応じてJPEG・PNGのどちらが適しているかを自動判断できるようになりました。さらに、ブログシステム「WordPress」から「SmartJPEG」を呼び出して、画像の軽量化を自動で行うプラグインも同時にリリー
配色センスを向上させる配色サイト・アプリ15選 - 2014/12/01 [Schoo]
スクーのWebデザイナー学部でもとても人気がある「配色」関係の授業。デザイン関係のお仕事以外でもプレゼン資料や報告書でのExcelの配色、ひいては、普段の洋服のチョイスまで、配色について悩む機会は多いもの。美術の授業以外に配色について学ぶ機会がないまま今に至ってしまった人も多いのでは？そこで今回は、ブラウザやiPhone／Androidアプリで使える配色ツールをご紹介します！ 1. HUE/360 http://hue360.herokuapp.com/ 最初のキーカラーを決めれば、自動的に配色的に間違いのない配色を絞り込んでくれます。デザインもキレイで直感的に操作出来ます。スクーの授業でも度々登場している間違いの無いツールと言えそうです。ちなみに、hueとは色相（色合い）という意味です。 ・Color Space（RGBとか） ・Hue Step（色合い） ・Chroma Step（彩度
![配色センスを向上させる配色サイト・アプリ15選 - 2014/12/01 [Schoo]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1e32cad2ba81b3f5b8aab3cfe317d505471458c9/height=288;version=1;width=512/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fi.schoo%2Fimages%2Farticle%2Fdesign%2FCL0.jpg)
CSSのこのアイデアはすごすぎる！Webページのトラッキング・解析ができるスタイルシート -Crooked Style Sheets
結果ページ どのリンクをいつクリックしたのか、いつホバーしたのか、指定エリアでどのくらいマウスを動かしたのか、フォームに特定の文言を入力したのか、チェックボックスをクリックしたのか、ブラウザは何か、解像度はいくつか、ディスプレイの向きはどっちなのか、などの情報が表示されました。 ※出力する際には、PHPが使用されています。 Crooked Style Sheetsの仕組み Crooked Style Sheetsは、外部CSS一つを加えるだけで、Webページのユーザーに関するさまざまな情報を取得できます。 基本的な仕組み CSSではurl()関数を使用して、外部リソースを追加できます。url()関数の値は呼び出された時のみロードされるため、これをリンクがクリックされた時に利用します。 リンクを記述するHTMLは、要素を特定できるようにidを与えます。
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
「えーと、画像は全部2倍で作ればOKなんだよね？」を卒業しよう — un-Tech
お疲れ様です、大塚です。 Appleの新製品発表会が間近に迫ってきましたね。新しいiPhoneの発表はもちろんのこと、今年の「One more thing」も楽しみです。 しかしながら、新しいプロダクトにドキドキ・ワクワクしながらも、心のどこか冷静な部分で、 「また新しい解像度が出てきたわ…」 と、新しい苦悩を抱えてしまうエンジニアやディベロッパーの方も多いのではないでしょうか？高解像度ディスプレイを搭載したマルチデバイスへの対応は、なかなか骨が折れる作業ですからね。 …え、仕組みがよくわからないままコーディングしていたって？？ そいつぁーまずい。 なぜ、多くのスマートフォンやタブレット向けのWebサイトでは、画像が2倍で作られているのか？ その理由と、ディスプレイや解像度の仕組み、今日ここで覚えていって頂戴。 ディスプレイの仕組み ぼくたちが普段使用している、PCやスマートフォンのディス
非デザイナーがWebサイトをおしゃれに作るためにやったこと - Qiita
はじめに 普段はバックエンドエンジニアでデザインの勉強を一切やったことがない僕がそこそこのwebサイトであれば作れるようになってきたので、webサイトをおしゃれに作るためにやったことをまとめてみました。 手順 デザインについて無知でhtml, cssをほとんど書いたことない人（基本的な文法は知っている。）がいきなりおしゃれなサイトが作れるようにはなりません。以下のステップを踏んでいくといいと思います。 おしゃれなサイトを探して研究する。 bootstrapを使ってサイトを作ってみる。 実際に作ってみる。 おしゃれなサイトを探して研究する 個人的にこれをやることがおしゃれなwebサイトを作るための一番の近道だと思います。まずは既存のものを真似して作っていくことが大切だと思うので、なぜそのサイトがおしゃれなのか調べ尽くします。 この作業を繰り返しすることでどんなサイトがおしゃれなのかわかってき
ファビコン favicon.ico を作ろう! リアルタイム 5サイズ版
このページでは 16x16, 24x24, 32x32, 48x48, 64x64 の5つの画像を含むマルチアイコンを生成します。 16x16のみ、16x16と32x32の2個、などのアイコンも作成可能です。 入力された画像は指定サイズに拡大縮小されます。 長方形の画像を指定した場合は正方形に変形されます。 透過情報を含むPNG画像も指定可能です。 指定した大きさの画像がアイコン内に作成されます。 16x16の画像のみ作成する場合は16x16に画像を指定して下さい。 32x32の画像のみ作成する場合は32x32に画像を指定して下さい。 同時に複数画像を指定すると、マルチアイコンになります。 16x16と32x32に画像を同時に指定すると2サイズのマルチアイコンになります。 16x16,24x24,32x32,48x48,64x64すべてに同時に画像を指定すると、5サイズのマルチアイコンにな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pixabay／無料画像