wushiのブックマーク - はてなブックマーク

JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた
オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては81%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。91% → 85%の方が85% → 81%より圧縮率がいいんですね。サンプル画像上の表にある「sampleXX.jpg」の画像をまとめて圧縮したファイルを用意しました。ご参考までに以下からダウンロードどうぞ。サンプル画像をまとめて圧縮したファイル（ZIP / 3.4MB）ちなみに、表で91%と81%になっているのはImageOptimで設定できるのが、なぜかその数値だったからです。90%、80%には設定できませんでした（v1.8.0）。職場で作業するときのプロセスはだいたい以下のような感じです。 PhotoshopやAffinity Desi
wushi 2018/08/13
あとで読む
リンク
ローカルサイトを外部に公開できるngrokの使い方
ローカル環境で作っているサイトを、ネット経由で見せたいときってありますよね？そんなときに便利なのが「ngrok 」というコマンドラインのツールです。自分の端末のローカル環境で作業をしているウェブサイトを同僚に見せたいときや複数端末でブラウザテストをする際、また、BrowserStack やCrossBrowserTesting のような外部のブラウザテストサービスを使うときにも役立ちます。あと、コワーキングスペースなどで作業していてネットワーク環境がコントロールできない時にも便利ですね。しかも、これが無料で提供されています。ありがたいですね。開発者の方に感謝です。 ngrokでできること ngrokでできることを簡単にまとめると、以下の通りです。 localhostにhogehoge.ngrok.comで外部からアクセスできるマルチデバイスのテストに便利 CrossBrowserT
wushi 2017/10/12
あとで読む
リンク
印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能
いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。ということで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。 Chrome DevToolsのメディアタイプのエミュレーション機能以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。なんと、Chrome DevToolsにエミュレータ機能がついてたんですね。さすがです。以下の手順で、そのエミュレーション機能にアクセスできます。 Chrome DevToolsを開く（⌘ + ⌥ + I）スマホ（device mode）アイコンをクリック drawerアイコンをクリックする（Emu
wushi 2015/05/24
css

chrome

extension

Webデザイン
リンク
1