ウェブページを表示するためのアプリケーションであるウェブブラウザは、今や多くの人が毎日のように利用する生活に欠かせないツールとなっています。そのブラウザがどのような仕組みで成り立っているのかについての解説がGitHubで公開されています。 GitHub - vasanthk/how-web-works: What happens behind the scenes when we type www.google.com in a browser? https://github.com/vasanthk/how-web-works この解説では例として「アドレスバーにgoogle.comと入力してからGoogleのホームページが表示されるまで」の流れが取り上げられています。 ・目次 ◆google.comの「g」を入力した時 ◆エンターキーを押した時 ◆URLを解読 ◆HSTSリストを確認
全体像 全体としてはこんな感じです。レンズを通して顔の像を作るところは光学の世界、センサ面に結像された像を読み取る電子の世界。そして、センサと PC の橋渡しを USB で行う通信の世界、受け取ったフレームを処理するソフトウエアの世界、という流れで説明していきます。 物理（光学）の世界～一眼とWebカメラ（とスマホ）の違い～ 一番大きな違いは設計思想そのものです。レンズとセンサの大きさ、撮影設定などの柔軟性などに現れています。 一眼レフ：でっかいレンズ × でっかいセンサ ＝ つよい Web カメラ：写ってればいいでしょレベル～産業用レベル スマホ：目的ごとに複数のカメラモジュールを用意したりソフトで後処理したり。ともかく小さく薄く。 光学の世界で大事なことを一つだけ（機種選択の基準として） ピント合わせ の方式はどうなっているか？ マニュアルフォーカス → 自分でリング回す：ピント合わせ
【警告】写真データには個人情報が一杯！EXIFの簡単な削除方法 - Life. Half of the rest ?
こんにちは、じんのんです。 写真データには個人情報がいっぱいだよ～ 皆さん知ってますか～？ と言うことで、意味深なタイトルですが、今回は、写真データの取り扱いについて、皆さんと情報共有をしたいと思います。 とは言え、おっちゃんもブロガー歴３カ月目のひよっこなので、引き続き、ゆる～い感じの心構えでお読みいただければ幸いです。 EXIFってなに？ どんな情報が組み込まれているの？ 画像のGPS情報の確認方法について 「画像位置情報取得ツール」について WEBサイト上の位置情報確認サイト EXIFの簡単な削除方法 フリーソフト「ExifEraser」を用いた場合 Windowsのデフォルト機能で削除する方法 あわせて読みたい記事 まとめ 写真などの画像データには、撮影する機器の設定次第で、沢山の個人情報が記録されてしまいます。 なので、個人情報が一杯入っている画像データの取り扱いには十分に注意が
【秒で画像圧縮する方法】面倒な設定はいらないサイト上で簡単に画像圧縮するのがおすすめ！ - 貧乏サラリーマンの雑記ブログ
どうも 貧乏サラリーマンのチップです。 ブロガーのあなた！ ブログに使用する画像の容量を気にしていますか？ 読者登録している方のブログを拝見しようとすると、たまに表示されるのが遅いな～と思うサイトがいくつかありましたので、私も画像圧縮を始めましたよ。 せっかく訪れた方がいても表示されるのが遅いと離脱してしまう可能性がありますので、一番の原因である画像圧縮をしましょう！ 今回は私が利用している圧縮方法を紹介したいと思います！ 秒で圧縮が完了するので超おすすめです。 TinyPNGは簡単に圧縮できる もっと圧縮したい人はJPEG圧縮 ブログの表示速度を調べる方法 まとめ TinyPNGは簡単に圧縮できる 私がメインで利用しているのがTinyPNGというサイト。 オンライン上で圧縮ができます。 tinypng.com 一度で最大20枚・50ＭＢまでの画像を圧縮することが可能です。 使い方もシンプ
↑この画像は静止画ではなく、録画のスナップショット (α7R II 2160p モードを CamLink 4K/30FPS NV12 でとりこみ) 結論からいうと CamLink という HDMI → UVC 変換器 (キャプチャボードの一種) を使うのがおすすめ。カメラの HDMI 出力と繋ぎ、カメラ側は動画モードにして、HDMI INFO の設定 (HDMI に OSD を出さない) をするだけでよい。 カメラ側で HDMI 出力設定を変えて 1080p か 2160p かを選べる機種の場合は、カメラ側で設定を好みのほうに変える必要がある。デフォルトだと 4K でしかとれないので、1080p で十分なら下げたほうが負荷が低いと思う。 もっと安い HDMI USB キャプチャあるけど? 知ってるぞ！ こういうのだろ！ HDMI → UVC 変換器もピンキリで、キャプチャできる解像度や、画
ディレクトリ構造ディレクトリ構造はこんな感じです。 srcが作業ディレクトリで、コンパイル前のscssファイルや圧縮前のjsファイル、画像ファイルが格納されています。 gulpが走ると、distディレクトリにコンパイルされます。 ├─ index.html ├─ gulpfile.js ├─ package.json ├─ package.look.json ├─ /node_modules ├─ /dist │ ├─ /css │ │ └─ style.css │ ├─ /js │ │ └─ script.js │ └─ /img └─ /src ├─ /scss │ └─ style.scss ├─ /js │ └─ script.js └─ /img npmパッケージについての説明は割愛しますが、progateで解説されている記事があったので紹介しておきますね。 基本的なg
画像圧縮技術
私達が日常扱う画像や音声といった情報の量がどんどん増えています。しかし扱う情報が多くなればなるほど、それを保存したり相手に送ったりする際にかかる時間が長くなります。そんな時、その情報をより手軽に扱えるようにするのが圧縮技術です。 画像圧縮ってなんだろう画像は沢山の情報でできています。その情報の余分な部分を減らして、全体の情報量を小さくすることが画像圧縮です。 画像圧縮は衣類・布団の圧縮と同じようなもの新婚の圧子（アツコ）さんは、新居の収納のことで悩んでいます。独身時代、おしゃれだった圧子さんは沢山の洋服を持っていました。ところが、新しい部屋は収納が少なく、持っていく洋服がぜんぜん入りません。しかも、その収納に夫婦とお客様用のお布団も入れなければならないのです。 一体、どうしたら良いのでしょう。 そこで、収納上手な先輩の縮美（チヂミ）さんに聞いてみることにしました。 縮美さんは、たくさんの衣
パフォーマンスを考慮して画像を最適化する方法
ウェブサイトを運営していれば、Googleからの評価は非常に重要。画像ファイルのサイズを小さくすると、ウェブサイトのパフォーマンスを改善できることはご存知でしょうか。 画像を最適化する際に気をつけたいのは、圧縮することで画質が損なわれてしまう点（その結果、訪問者によからぬ印象を与えてしまうことも）。とはいえ、見た目が明らかに損なわなければ問題ありません。 ウェブサイトに使用するのに十分な画質を保ちながら、画像サイズを縮小するコツや方法は複数あります。 今回は、画質を損なわない画像の圧縮方法と、パフォーマンスを改善する画像最適化について掘り下げていきます。 重い画像はウェブページを遅くするため、ユーザーエクスペリエンスが悪化します。画像の最適化とは、プラグインまたはスクリプトを使用してファイルサイズを縮小するプロセスのことです。これにより、ページの読み込み時間が改善されます。よく使用される処
サーバーサイドの画像編集処理でメモリ使用量を抑える方法 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。 こんにちは、開発チームの山下です。 業務ではスーパーデリバリーの開発を担当しています。 今回は私がスーパーデリバリーの開発で関わったサーバーサイドにおける画像編集処理でメモリ不足を防ぐノウハウを共有したいと思います。スーパーデリバリーではユーザーが任意の画像をアップロードできる機能があるため、まれに想定以上の高解像度画像が処理されてサーバーが Out Of Memory エラーを発生させることがありました。 そこで私が任されたタスクが「画像編集処理でメモリ不足を避けるために、バリデーションを追加する」です。 TL;DR サーバーサイドでの画像編集はメモリ使用量が高い操作です。 なぜなら処理される画像データはメモリ上に非圧縮のビットマップとして展開されるた
![サーバーサイドの画像編集処理でメモリ使用量を抑える方法 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1ba30738775f08153659422c29d77c3d32b19144/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2023%2F07%2Fsmartphone_camera_bijin.png)
『HTTP/2についての概要をまとめる』
注意この記事は、HTTP/2を勉強する過程での学びのメモを残したものです。 できるだけ、論文や仕様書、信頼できるソースを元に学習しているが、HTTP/2を（意識して）実務で使用したことはないレベルの人が書いた記事ですので間違った知識などもあるかもしれないので注意。 HTTP/2とはHTTP/2は、ウェブにおけるアプリケーション層のプロトコルとして最も使用されているHTTPのうち、2015年に新しく公開されたものである。 現在広く普及しているHTTP/1.1における後述の課題を解決するために作成された。 HTTP/2が作成された理由などについて説明するために、HTTPの歴史を軽く振り返る。 HTTPの歴史HTTP/0.9初代。GETメソッドのみ存在し、ヘッダもステータスコードもない。 HTTP/1.0がでてから初めて、0.9と呼ばれるようになったらしい。 HTTP/1.0HTTP/1.0は、
iOS 11 以降の iPhone や iPad で撮影した写真は HEIC 形式で保存されるわけですが。 HEIC は「High Efficiency Image File Format（HEIF）」という新しい圧縮方法を使用した形式で、圧縮率に優れているため高画質のまま容量を小さくできるというメリットがあります。 しかし、Windows 10 はデフォルトでこの形式をサポートしていません。 そのため、通常 iPhone から取り込んだ写真は Windows 10 上で閲覧および編集ができません。 Windows 10 で HEIC 形式の画像を開こうとすると開けない Adobe の画像編集ソフト「Photoshop」も 2019 年 4 月現在で HEIC 形式をサポートしていないため、Photoshop で編集するにしても一旦 JPEG や PNG に変換しなければいけません。 実に
みなさんは、webサイトのページ表示速度が遅いと悩んだことはありませんか？ webサイトの表示速度を上げるための一つの方法として、従来の「JPEG」「PNG」「GIF」といった画像を、次世代画像フォーマットである「WebP」「AVIF」「SVG」に変えていくのはいかがでしょうか。Webサイト表示が高速化する次世代画像フォーマットについて、使い方やメリット・デメリットなどをご紹介していきます。 次世代画像フォーマットのメリット 次世代画像フォーマットであるWebP・AVIF・SVGを使用することで、webサイトの表示速度が遅いページを改善することができます。JPEG・PNG・GIFよりも画像圧縮率が高く、画質を下げることなく軽量化することができるからです。 表示速度の改善はユーザー満足度の向上を期待できます。ページエクスペリエンス（Webページのユーザー体験）の最適化にも繋がり、SEOにも効
簡単便利！ブログで使う画像は画像圧縮サイト「TinyJPG」がおすすめ その使い方とは - ちゃちゃの備忘録的なブログ
ブログを書いていると色んな所で画像を使いますよね。 文章だけでは少し読みにくいですし、適度な間隔で画像（イラストや写真）を使うことでスムーズに文章を読み進めることができるんです。 しかし、ブログで写真など画像をたくさん使用すると重くなってしまう原因にもなってしまうので、たくさんの画像を使うのを躊躇してしまう原因にも繋がります。 よく、ネット検索したサイトを見ようとしたら画像が重くてイライラしてしまうことってありませんか？そんな時は思わずサイトを閉じてしまうことも。 そこで、今回は画像をほとんど劣化させずに圧縮できるパンダの絵でお馴染みの「TinyJPG」というサイトを紹介していきたいと思います。 こんな人に読んでもらいたい！ ・画像を使いたいけど圧縮方法が分からない ・TinyJPGの使い方を知りたい TinyJPGとは ブログで画像や写真を圧縮する理由 TinyJPGを使ったブログ画像の
おはようございます、なべやすです。 ブログやホームページに写真やイラストなどの画像を使うことは、サイト運営をしている人にとって一般的なことです。 その写真やイラストも、スマホやデジカメで撮ったものや画像サイトのものを、そのままブログやホームページに貼り付けて使えばいいかというと、それはちょっと違います。 加工や編集をしないまま画像を使うと、サイトのページが重くなるといったデメリットが発生することもめずらしくありません。 特に画像をたくさん使うサイトであれば、ページ読み込み速度も大きく低下してしまいますので、画像のサイズ変更や容量圧縮が必要です。 そのような際にオンライン画像編集ツール「I LOVE IMG」を使うと、画像の加工や編集が簡単にできます。 基本無料で利用できて、インストールも不要です。 当記事では、無料で簡単に使うことができるオンライン画像編集ツール「I LOVE IMG」をご
画像や動画のファイルサイズを圧縮することはインターネットトラフィックを削減することにつながるため、多数の技術者によって圧縮技術の見直しが図られてきています。いくつかの技術開発を経て誕生した「ニューラルネットワーク」を使用する圧縮方法は2024年時点でどこまで進化しているのかについて、Microsoftでリアルタイム動画圧縮技術の開発に取り組むマルティン・ルミステ氏が解説しました。 Compressing images with neural networks | Martin Lumiste https://mlumiste.com/technical/compression-deep-learning/ ニューラルネットワークを利用した圧縮「ニューラル圧縮」を理解するためには、まず1992年から存在する圧縮形式「JPEG」を理解する必要があります。 JPEGの圧縮方法は「細部を削る」こと
Text/Photo：ちゃんまさ 2024年2月29日、Topas LabsはTopaz Photo AIの最新版「バージョン2.4」をリリースしました。Topaz Photo AI 2.4は、新設計されたUI（メニュー画面）を採用し、操作方法が一新。海外のソフトウェアは、言語表記が英語のみということもあり敷居が高く思われがちですが、初めての方でも扱えるように、操作方法を写真付きで解説します。記事に目を通してもらえれば「Topaz Photo AI 凄い！」と実感してもらえるはず。 導入前の検討資料として活用していただけると幸いです。 2024年2月、同社Sharpen AIとDeNosise AIがTopaz Photo AIに統合されることが発表されました。それにともない、Sharpen AIとDeNosise AIは開発および販売が終了しました。 Topaz Photo AI価格 ▶
Webサイトで用いられる画像形式はおもに、JPEGやPNG、GIFなどです。各形式によって画像圧縮率や圧縮方法などが異なり、それぞれにメリットとデメリットがあります。 ここからは、使用される頻度が高いJPEGやPNG、GIFの特徴を紹介しつつ、WebPとの違いについて解説します。 写真の保存形式に適した「JPEG」 Joint Photographic Experts Groupの略語であるJPEG（ジェイペグ）は、表現できる色の数が豊富でデータ量も比較的軽いため、画像の保存に適した形式とされています。 一方、画像の圧縮率がWebPより低いため、データ容量が大きくなってしまうのがデメリットです。 また、透過処理には対応していないため、WebPにおける透過処理のように一部だけを切り抜いて表示させることができません。 ちなみに、JPEGとWebPはともに非可逆圧縮で、どちらも一度圧縮すると元の
[Android] アプリ容量削減のため画像ファイルをWebP(ウェッピー)変換してみた | DevelopersIO
はじめに こんにちは！Androidエンジニアの山本です。Google Play Storeに公開するアプリはファイルサイズが100MB以内でなければ製品版を公開できません。今回は少しでもアプリサイズを小さくするためにAndroid StudioのWebP変換機能を使ってアプリ内にある大量の画像ファイルを圧縮してみたので情報共有します。 WebPとは WebPとはGoogleが開発している静止画のフォーマットで、拡張子は「.webp」です。PNGやJPEGよりも約25%ファイルサイズを小さくできるのでアプリサイズやトラフィック量の削減、表示速度を向上させることができます。 開発環境・前提条件 OSはmacOS Mojave(10.14.6)、Android Studioのバージョンは3.5.2です。AndroidStudioでWebP変換できるフォーマットはPNG, JPEG, BMP,
![[Android] アプリ容量削減のため画像ファイルをWebP(ウェッピー)変換してみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/d37f81da6f5c00158302454d67d9b19c9853a7cd/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Fandroid.png)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブサイトが表示されるまでにブラウザはどういった仕事を行っているのか？
OpenCVがWebカメラであなたの顔を画像として取得するまでの仕組み
SONY αをウェブカメラとして使う | photo | tech - 氾濫原
【gulp4】もう迷わないgulpfile.jsの書き方｜KojimaKohei
Windows 10でHEIC形式の画像を開けるようにする方法
Webサイト表示が高速化する次世代画像フォーマットとは | Web制作・Webマーケティング支援；セミコロン
【初心者でも安心】無料オンライン画像編集ツールI LOVE IMGの使い方 - なべやすブログ
AIなどのニューラルネットワークによる画像圧縮はどれぐらいまで実現しつつあるのか？
Topaz Photo AI 2.4 が凄い！ レビューや使い方を解説【2024年3月】
WebPとその他画像形式の違いとは？3つのメリットと変換方法解説