Squoosh
SmallSmaller images mean faster load times. Squoosh can reduce file size and maintain high quality. SimpleOpen your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. SecureWorried about privacy? Images never leave your device since Squoosh does all the work locally.
CSS Gradient – Generator, Maker, and Background
background: #2A7B9B; background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); CSS Gradient is a Designstripe project that lets you create free gradient backgrounds for your website. Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples
Compressor.io - optimize and compress JPEG photos and PNG images
Fast & efficient imagecompressionOptimize JPEG, PNG, SVG, GIF and WEBP
Googleの「Mobile Website Speed Testing Tool」の速度テストは参考にならない - Webパフォーマンスについて
このテストの速度テストの評価を実際の計測データと比較して検証してみる Googleが testmysite.thinkwithgoogle.com を公開して、各所で話題になっています。 モバイルフレンドリーかどうかのテストには使えるのですが、スマートフォン向けWebサイトやデスクトップ向けWebサイトとしてのスピードの判定の参考にならないです。 その理由を以下に説明します。 日本のポータルサイトのパフォーマンス計測のデータと見比べてみる さて、検証用データとして、日本のポータルサイトの計測データと見比べてみましょう。 今回、計測してみたのは、以下の5つのポータルサイトです。 Yahoo! Goo Excite MSN Infoseek 計測条件 NTTドコモのLTE回線を使用 電波強度は非常に良好 計測機器を設置して行う定点観測なので、基地局間の接続移動処理（ハンドオーバー）は発生しない
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
WebPagetest - Website Performance and Optimization Test
Test. Experiment. Improve! WebPageTest. The gold standard in web performance testing. Lightning-Fast Web Performance Online CourseLearn to analyze performance, fix issues, and deliver fast websites from the start. Free! Start Course Now >> Introducing Carbon Control Experimental New in WebPageTest! Measure your site's carbon footprint and run No-Code Experiments to find ways to improve.
Responsive Breakpoints Generator
Easily generate the optimal responsive image dimensions One image for all screen resolutions and different devices is not enough. An image per pixel is too much - so how can someone automatically choose the optimal responsive image sizes? Learn more... Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They com
SVGOMG - SVGO's Missing GUI for minifying SVGs
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
Sizzy - 多彩なデバイスでのWebサイト確認を簡単に
Webサイトは一つのデバイスだけで見るとは限りません。特に最近ではPC、タブレット、スマートフォンなどあらゆる大きさのデバイスで閲覧します。そうしたデバイスでの表示確認をすべての実機でやるのは現実的ではありません。 そこで使ってみたいのがSizzyです。多数のデバイス幅に対応したデザイン確認ツールです。 Sizzyの使い方 最初にURLを入力します。 そうすると様々なデバイス幅でサイトの確認ができます。 ズーム変更機能が便利です。 Androidデバイスだけに絞り込んだところです。 タブレットだけ。 横向きもできます。 Sizzyを使えば多彩なデバイスでの表示確認が簡単にできます。Sizzyで確認しながら進めていけばあるメディアクエリーを使った時だけデザインが崩れると言った問題もすぐに気付けるはずです。 SizzyはHTML5/JavaScript製のオープンソース・ソフトウェア（ソースコ
手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」
手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「Griddy」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ CSS グリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置するGriddyGriddyのサイトを開くと 4 つのグリッドアイテムが表示されています。アイテムの数を増減するには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンをクリックして数を変更します。 続いて「Grid Template Columns」でカラムの幅を指
WEB時短ツール - WEB時短ツールは、Webのお仕事を快適にする便利なオンラインツール・素材へのリンク集。 今日も少し早くお家に帰れますように。
WEB時短ツールは、Webのお仕事を快適にする便利なオンラインツール・素材へのリンク集。今日も少し早くお家に帰れますように。 現在の登録数：435サイト
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Color Codes
RLogin(Win32用rlogin/telnet/sshターミナルソフト)
Emblemmatic — MarkMaker
PageWeight by Imgix
Google 広告 - 新規顧客の獲得、売上増加に活きるデジタル広告
Speed and Performance Optimization
画像圧縮サイト／TinyPNG
