【2019年最新版】今さら聞けない！画像最適化の鉄板テクニック6つまとめ
最適化されていない画像は、特に初めて読み込むときに、ウェブサイトのパフォーマンスが低下する主な原因のひとつです。解像度と画質によっては、Webサイトの合計サイズの70%以上を画像が占めることもあります。 最適化されていない画像を本番環境でも使用したことで、ウェブサイトの読み込みスピードが大幅に遅くなったということもしばしば。経験の浅いデベロッパーは、あまりこの潜在的な問題を認識していないかもしれません。同じように、画像の最適化に便利なツールや解決アプローチを持ち合わせていないでしょう。 この記事では、Web用に画像を最適化するための便利ツールと解決アプローチをまとめてご紹介します。 コンテンツ目次 JPG画像ファイルサイズの計算方法 オンライン画像最適化サービスの利用 自動化ソリューション 画像読み込みの最適化 CDNの利用 乾いたインクスタイル WebP画像形式 高ピクセル密度画面（Re
PNGファイルを軽くする方法 - by Takumi Hirashima
Adobe Photoshop を使って軽いPNGファイルを書き出す方法を紹介します。 例えば、画像アセット機能を使って画像を大量に書き出すときなどに便利な方法です。 ファイルサイズ小（8-bit）で書き出す 画像アセットを使って書き出す場合 クイック書き出しを使って書き出す場合 書き出し形式で書き出す場合 ファイルサイズ小（8-bit）のデメリット ファイルサイズ小（8-bit）で書き出す Adobe Photoshop で軽いPNGファイルを書き出すには「ファイルサイズ小（8-bit）」にチェックを入れます。 これは PNG-8 とはことなる書き出し形式で、PNG-24 のようにマットを必要としない透明部分を保持して書き出すことができます。 では、この方法の書き出し方法とデメリットを紹介します。 画像アセットを使って書き出す場合 画像アセットを使って「ファイルサイズ小（8-bit）」で
Firefoxのスクリーンショットで新機能追加
すでにご存じの方も多いと思いますが、Firefoxのスクリーンショットで新機能が追加されてましたので紹介します。 いつものようにコンテキストメニューの「要素を調査」で開発者用ウィンドウからスクリーンショットを取得しようとしたところ、「スクリーンショットを撮る」というメニューが表示されるようになっていました。 メニューを選択すると、ベータ版でスクリーンショットを撮る機能が新たに提供されましたというイントロダクション。 （クリックで拡大、以下同様） 必要な部分だけをFirefox上で選択できるようです。 スクリーンショットはPCへのダウンロードはもちろんですが、ウェブ上への保存も可能なようです。 ということで試してみました。 「スクリーンショットを撮る」というメニューを選択すると、全体がオーバーレイされ、「ページをドラッグまたはクリックして範囲を選択してください。ESCキーを押すとキャンセルで
Illustratorでのイマドキな画像書き出し方法【アセットの書き出し】
2016年12月7日 Illustrator 昔からIllustratorラブ！な私ですが、いつの間にやらWebデザインをする上での便利な機能が増えてきて、ますます嬉しい次第です。その中で今回は画像アセットを使った書き出し方法を紹介します。昔はスライスツールを使っていましたが、そんな面倒なことをしなくてもオブジェクトをドラッグ＆ドロップで簡単に書き出せちゃいますよ。 ↑私が10年以上利用している会計ソフト！ アセットの書き出しって何？ 2016年6月にアップデートされたIllustrator CCでは、従来のスライスとは違う、新感覚の画像書き出し方法である「アセットの書き出し」という機能が追加されました。オブジェクトをパネルにドラッグして追加すると、サイズや解像度、デバイスに合わせたフォーマットに書き出せます。Webやアプリ用のアイコンや、画面全体のデザインを行う上でも欠かせない、便利な機
SVGの書き出しおよび表示方法
Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 拡大縮小しても汚くならないベクター画像をサイト上に表示できるSVGを解説します。イラレを使った書き出し方法や、サイト上に表示する方法を超具体的に紹介します。 まえがき この記事を書いてるちょっと前に、このKOTORI Blogをリニューアルしました。 どうせリニューアルするならと、サイト内のイラストは基本全てSVGで書き出そうと思い立ち無事に実現できたので、SVGをブラウザに表示するためにKoToRiが実際に行った事をまとめて記事にしたいと思います。 それから、この記事ではSVGを作成するためにAdobeのIllustratorを使用します。 IllustratorのバージョンがいくつからSVGを書き出せるようになっ
【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） スライスせずに書き出せるPhotoshopの「画像アセット生成」って？ 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい
Pinterest（ピンタレスト）初心者向け！Webデザインの情報収集に使える4つポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。デザイナーのminecoです。 私は去年から「Pinterest（ピンタレスト）」というデザイン情報を収集できるWebサービスを使っていますが、ここまで長く使っているアプリは初めてじゃないかというくらい継続して利用しています。デスクトップブラウザからでもスマートフォンアプリからでも使えるので、忙しい日々の生活のなかで情報収集ができ、情報が豊富なので1日徘徊していても飽きないからだと思います。 ということで今日は、そんな「Pinterest」を使ったデザイン収集の方法をご紹介します。今回は「Webデザイン」を集めることをテーマにしていきます。 Pinterestとは？ Pinterest は見て、発見するツールです。プロジェクトや趣味にぴったりのアイデアを見つけるのに活用してください。ーPinterestより 気軽にアイデアを発見できるツールです。サイト上で気に入ったデザインや
photoshopの「レイヤーからの画像アセット」機能でスライス切りからサヨナラできるかも。 | バニデザノート
photoshopの「レイヤーからの画像アセット」機能。 前から気になっていたのですが、やっと試せました。 これは速いですねー。photoshop CC 2014.2.2リリースのバージョンでの 使い方をすこし解説します。 今までは、psdカンプを作成したあと、「スライス」ツールを使って スライス枠を作り、書き出し用のファイル名を別ウィンドウで書き込み、 「Web用に保存」ウィンドウを開き、出力設定を行い、 さらに背景などを切り出し・・と、htmlでコーディングするためのパーツを書き出すためにはたくさんの手順が必要でした。 「レイヤーからの画像アセット」機能でも、ウェブ用のパーツを書き出すのですが 上記手順に比べるとすごく少ないステップでパーツが書き出せるようになります。
Firefoxでスクリーンショットを撮る方法
Firefoxでスクリーンショットを撮る方法を紹介します。 １．はじめに ブラウザで表示されたページのスクリーンショットを撮るときは、いつもクライアントツールを使ってますが、Firefoxでも簡単にスクリーンショットを撮ることができます。 しかもページ全体のスクリーンショットを撮ることができます。 ２．使い方 スクリーンショットを撮りたいページを表示します。ここでは「Yahoo!JAPAN」のページをサンプルにします。 画面上で右クリックして「要素を検証」を選択 「開発ツールのオプション」アイコンをクリック。 表示されたオプションから「ページ全体のスクリーンショットを撮影します」をチェック。 カメラのアイコンが表示されるのでクリック。 クリックした後の反応がなかったのですが、私のWindows環境では「C:\Users\ユーザー名\Downloads」配下に「Screen Shot YYY
目的に応じて使い分ける、WebページをPDFで保存する2つの方法
WebページをPDF化して保存したい場合、大きく分けて2つの方法がある。テキストや画像を選択できる状態で保存する方法と、ページ全体を1枚の画像として保存する方法だ。目的に応じてどちらも利用できるようにしておくと便利だ。 保管コストの削減はもとより、劣化の防止や検索性の向上、再利用の促進などさまざまな利点が認められ、徐々に広がりつつある紙の文書や帳票のデジタルデータ化ですが、用途や目的を考慮せずにむやみにスキャンすることでかえって効率が悪くなったり、作業に手戻りを発生させてしまうことも少なくありません。 また商法や税法で保管が義務付けられている文書の場合、電子帳簿保存法やe-文書法などのルールに則った手順を踏む必要があり、自分の判断でやみくもにデータ化するわけにいかないといった事情もあります。 本連載ではこうした現在の状況を踏まえつつ、文書のデータ化にまつわる情報、さらにはフォーマットである
Google Chromeで表示したページのHTMLソースをダウンロードする方法
Google Chromeで表示したページのHTMLソースをダウンロードする方法を紹介します。 １．問題点 前置きが長くなりますが、Firefoxとの動作の比較からChromeでの問題点を説明します。 まず、次のHTMLマークアップのページがあるとします。 <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>テスト</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="container"> <h1>test</h1> <div id="content"> <h2><a href="http://user-domain/test.html">テスト</a></h2> <p>本文です本文です本文です本文です本文です</p> </
PDFから“手間をかけずに”ロゴや図表を抜き出すには
このPDFの図版、プレゼン資料に使いたい――。そんなとき、手間をかけずに抜き出せる機能がAdobe Readerに用意されている。 保管コストの削減はもとより、劣化の防止や検索性の向上、再利用の促進などさまざまな利点が認められ、徐々に広がりつつある紙の文書や帳票のデジタルデータ化ですが、用途や目的を考慮せずにむやみにスキャンすることでかえって効率が悪くなったり、作業に手戻りを発生させてしまうことも少なくありません。 また商法や税法で保管が義務付けられている文書の場合、電子帳簿保存法やe-文書法などのルールに則った手順を踏む必要があり、自分の判断でやみくもにデータ化するわけにいかないといった事情もあります。 本連載ではこうした現在の状況を踏まえつつ、文書のデータ化にまつわる情報、さらにはフォーマットであるPDFや変換機器であるスキャナ、保存先となるストレージに至るまで、業務現場と情報システム
Excelで「ファイルを保存するときにファイルのプロパティから個人情報を削除する」がグレーアウトされた場合の対処方法
Excelで「ファイルを保存するときにファイルのプロパティから個人情報を削除する」がグレーアウトされた場合の対処方法を紹介します。 １．問題点 「Excelで「プライバシーに関する注意」というメッセージが表示される場合の対処」で紹介した手順でメッセージを表示しないようにすると、個人情報を削除できなくなります。 しかも該当の項目がグレーアウトされ、再度チェックできる状態になりません（下）。 ということで、本エントリーでグレーアウトされた項目をチェックできる状態に戻す方法を紹介します。 注：もしチェックをはずしてからファイルを閉じていない場合は、一旦ファイルを閉じて再度開きなおしてから次項の手順を実施してください。 ２．チェックできる状態に戻す方法 グレーアウトされている項目の下にある「ドキュメント検査」をクリック 「検査」をクリック。 「ドキュメントのプロパティと個人情報」の項目で「次のドキ
Excelで「プライバシーに関する注意」というメッセージが表示される場合の対処
Excelで「プライバシーに関する注意」というメッセージが表示される場合の対処方法について紹介します。 １．はじめに Excelでファイルを保存しようとすると、 「プライバシーに関する注意：このドキュメントには、マクロ、ActiveXコントロール、XML拡張パックの情報、またはWebコンポーネントが含まれています。これらにはドキュメント検査機能で削除することができない個人情報が含まれる場合があります。」というメッセージが表示されることがあります。 （クリックで拡大） これはExcel2010のセキュリティ機能が強化されたためのメッセージのようです。 ということで、次項にメッセージを表示させない対処方法を紹介します。 なおが、本エントリーの手順で対処を行うと個人情報削除が機能しなくなる（＝個人情報がファイルに残る）ので、ご注意ください。 ２．メッセージが表示される場合の対処方法 「ファイル」
Photoshopのバッチでファイルを一括で処理する方法【初心者向け】現役Webデザイナーが解説
Photoshop（フォトショップ）で「バッチでファイルを一括で処理する方法」を初心者向けに解説した記事です。バッチ処理を使うと、画像のサイズを変えるといった同じ作業を繰り返して実行可能。Photoshopの効率アップにお役立てください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Photoshopで同じような作業を繰り返すときに、もっと楽にできればいいのにと思ったことはないでしょうか？ そんな時に便利なのが「バッチ」の機能です。 バ
セッションのクッキーを設定する場合のベストプラクティス
(Last Updated On: 2018年8月18日)HTTPセッションは通常クッキーを利用して行います。クッキーを利用したセッションの場合、お薦めする設定は以下の通りです。 ドメイン名は指定しない パスはルート(/)を指定する セッション管理用のクッキーはセッションクッキー（有効期間０）にする httponly属性を付ける 可能な場合は必ずsecure属性をつける 複数アプリケーションを利用する場合はsession.nameまたはsession_name()でセッションクッキー名で指定する （アプリケーションの固有名デフォルトで設定し、設定項目として変更できるようにする） 3まではPHPデフォルト設定です。4から6までは自分で設定しなければなりません。PHPの場合、すべてphp.iniで指定できます。session_set_cookie_params()でセッション開始前に指定すれば
セッション管理 - 学生サーバ管理者メモ
汎用のセッション管理クラスを作ろうと思って前に作ったやつを修正していた。 前はログインしてからセッションを作成してたけど、標準で全ページセッションがあった方が都合がいい。 それと「ログイン情報を記憶する」みたいなチェックをつけたかったんだけど・・。 session_set_cookie_params($time);とすればセッションの期限を設定できるっていう話。 でもセッションが既に開始されていたら、それを更新はできない。 session_set_cookie_paramsでは無理なんだって気付くのに時間がかかった・・。 マニュアルにもこれで設定するみたいに書いてあるしさぁ。 実際には function sessionStart($lifetime = 0){ session_start(); if ($lifetime == 0){ setcookie(session_name(), s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
意外と知らない。Wordファイルのサイズを小さくする3つの簡単な方法（ライフハッカー［日本版］） - Yahoo!ニュース
IDEA * IDEA
http://webdesign-workbook.com/sublimetext-snippet/