デザイナー必見！最強WEB画像フォーマットはこれだ！｜ichikawa
こんにちは。とあるIT企業のデザイナー、ichikawaです！ この記事は、つい先日行われた「WEB画像フォーマット 最強王決定戦」の結果発表会のイベントレポートになります。 WEBクリエイターであれば必見の内容となっていますので、ぜひ最後までご覧ください！ ※この記事はWEB画像フォーマットの解説をするための記事です。 実在するイベントではないため、フォーマット作成企業・団体とは一切関係ございません。 イベント概要イベントレポートに入る前に、知らない方もいらっしゃるかと思いますので、本企画の概要をご説明いたします。 WEB画像フォーマットとは、image.jpegやimage.pngのような、スマートフォンやPCのWEBサイトで表示されている画像の画像形式を指します。 WEBサイトを表示するためにはインターネット通信が必要になるため、自分が作った画像をWEBにアップロードする際には、適切
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, GIF）の最適化と圧縮、画像の新しいフォーマット（WebPやAVIF）への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の
これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
An image format for the Web | WebP | Google for Developers
An image format for the Web Stay organized with collections Save and categorize content based on your preferences. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy im
Chromeがネイティブlazy-loadをサポート、JSなしで画像を遅延読み込み可能に
[レベル: 上級] Google Chrome 76 がネイティブ lazy-load をサポートするようになりました。 JavaScript のライブラリを利用することなく、ブラウザの標準機能として画像の遅延読み込みが可能になります。 ネイティブ lazy-load は開発版 Chrome (Canary) で試験運用されていました。 自動で遅延読み込み 次の動画は子猫の画像だけを掲載したデモ用ページをスクロールした様子です。 デベロッパーツールの Network パネルで見ると、スクロールに応じて画像が順に読み込まれているのがわかります。 この遅延読み込みは JavaScript で実装しているわけではなく、Chrome の標準機能として実装された lazy-load の機能で実現しています。 loading 属性でネイティブ lazy-load ネイティブ lazy-load を利用
Google、画像のライセンス情報を画像検索に表示する機能を導入
[レベル: 上級] 画像権利の情報を示すラベルを画像検索に表示する機能を Google は試験的にスタートする予定です。 画像のライセンス所有者は構造化データまたは ITPC メタデータを構成することで、Google 画像検索に画像権利情報を表示できます。 Soon, we will begin beta testing a new way for sites to display licensing information about content that appears in Google Images. The new badging and license information display isn't live yet, but you can prepare your content for it now. Learn more: https://t.co/dPGAP2
iOS11 で利用される新たな画像形式 HEIF/HEIC を JPEG/PNG へ変換する方法
iOS11 では画像フォーマットが JPEG から HEIF/HEIC へと新しいものに変更になったようだ。画質をあまり落とす事なく従来の JPEG よりファイルサイズを削減する事が可能なようだ。 http://gigazine.net/news/20170609-ios-11-heif-hevc/ どの記事でも HEIF/HEIC と併記されているのがよくわからなかったが HEIF は画像フォーマット、HEIC はその拡張子という事になるのだろうか。 現状では Android や Windows, Web 等で利用する際に困りそうなので HEIF/HEIC の画像を JPEG/PNG へ変換する方法を調べてみた。 ちなみに自分が作成したりダウンロードした HEIF/HEIC 画像は以下のアプリには対応してないのかフォーマットがおかしいのか不明だが変換できず。jpgtoheif.com で
レスポンシブイメージのネイティブサポート - HTML5 Rocks
The picture element Stay organized with collections Save and categorize content based on your preferences. The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the picture element. In the same way that srcset b
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証 レスポンシブ・デザインの画像の扱いの課題を解決するのが「レスポンシブ・イメージ」です。この「レスポンシブ・イメージ」には紆余曲折あったわけですが、熱心な開発者の方々のおかげでようやく仕様がまとまり、ブラウザでのネイティブ実装も進んでいます。 結論から言うと、ブラウザのネイティブ実装はまだこれからですし、ポリフィルのPicturefill 2.xには大きな欠陥があり、プロダクションサイトでの使用は待ったほうが良いと思います。しかし、多くの開発者が多大な時間を費やして実現しようとしているレスポンシブ・イメージです。この存在が日本でもより多くの人に広まればと思い、いまの状況をまとめてみました。 目次 レスポンシブ・イメージのいま レスポンシブ・イメージで解決できる3つの課題 Pic
Google、JPEGを35％小さくできるエンコーダー「Guetzli」をオープンソースで公開
Web高速化を目指すGoogleが、JPEGファイルを従来の方法より35％小さくできるというエンコーダー「Guetzli」をオープンソースで公開した。エンコードに時間とメモリがかかるが、完成したファイルは軽い上に画質も従来より高いとしている。 米Googleは3月16日（現地時間）、従来よりJPEGサイズを約35％小さくできる新エンコーダー「Guetzli」（グエツリ、ドイツ語で「ビスケット」のこと）をオープンソースで公開したと発表した。GitHubで公開されている。 Guetzliで画像をJPEGにすることで、画像を多数使うWebサイトの読み込みを高速化できるとしている。手法的には同社が2013年に公開した汎用データ圧縮ライブラリ「Zopfli」と近く、新しい画像フォーマットを必要としない。また、「WebP」や「RAISR」とは異なり、圧縮を高めるためにクライアント側を変更する必要がない
さくらインターネットとピクシブが業務提携し、画像の変換・配信サービス「ImageFlux」を提供 | さくらインターネット
さくらインターネットとピクシブが業務提携し、画像の変換・配信サービス「ImageFlux」を提供 〜ファーストユーザーとして、メルカリが利用開始〜 自社運営のデータセンターでインターネットインフラサービスを提供するさくらインターネット株式会社（本社：大阪市中央区、代表取締役社長：田中 邦裕）とイラスト投稿・交流サイト「pixiv」を運営するピクシブ株式会社（本社：東京都渋谷区、代表取締役社長：片桐 孝憲）は業務提携し、画像処理や画像配信において必要となる画像変換機能とコンテンツ配信をワンパッケージ化したサービス「ImageFlux（イメージフラックス）」を2016年12月13日より提供開始します。また、サービス契約前に全ての機能を試すことができる「無料トライアル」を併せて提供します。 「ImageFlux」は、レンタルサーバーやクラウドなどのインターネットインフラサービスやコンテンツ配信な
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
ヤフーの画像配信システム（CDN）の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog システム統括本部プラットフォーム開発本部の新部（@osa2be）です。 CDNの運用を担当しています。 先日、知り合いの技術者と話していてヤフーのバックエンドがどうなっているのか興味があると聞かれましたので、社内にいくつかあるCDNのうち2つとIDCフロンティアのサービスをご紹介します。 はじめに ヤフーには多くのサービスが存在していますが、様々な理由により突発的にリクエストが増加することがあります。 そのようなリクエストに対応するためにサービスごとに大きな配信システムを持つことは、インフラの準備や運用工数など高いコストが必要になります。 そのため、共通のCDNを準備して各サービスのサーバ負荷を平滑化しています。 以前は、社外のC
二次元画像を拡大したいと思ったことはありませんか？ - デー
うまくできましたか？ ボヤけたり、ギザギザになったりしませんでしたか？ waifu2xをお試しください。 (ブラウザの処理に影響されないようクリックで拡大おねがいします) waifu2xは、二次元画像を2倍に拡大するソフトウェアです。多くの二次元画像についてスゴイ級のクオリティで拡大できます。 waifu2xは、最新鋭の人工知能技術 Deep Convolutional Neural Networks を使って開発されました。 waifu2xの人工知能は、次の問に答えます。 いまから与える画像はある画像を半分に縮小したものである。縮小される前の画像を求めよ。 画像を拡大するのではなく、縮小される前の状態に戻します。 縮小されてないオリジナル画像を与えた場合も、やはり縮小される前の画像を答えます。 その画像は本来存在しないものですが、waifu2xはそれを想像で創ります。 二次元画像のJPE
画像を綺麗に拡大するフリーソフト「SmillaEnlarger」がすごい | 日刊ウェブログ式
小さな画像を拡大したい時、どうしても起こってしまう画像の劣化。そんなときに便利な、画像を美しく拡大するフリーソフト「SmillaEnlarger」をご紹介します。上の画像は拡大例ですが、かなり滑らかに拡大出来てます。 ダウンロード こちらから「SmillaEnlarger」をダウンロードします。 Download ソフトを起動させます。 使い方 まずは、拡大したい画像をドラック＆ドロップします。 Output Dimensions …サイズ変更 Specify zoom facter: 倍率 Specify width of result: 横幅指定 Specify height of result: 縦幅指定 Fit inside boundary: 縦横幅の最大値指定 Stretch to fit: 縦横幅の指定 Crop to fit: 切り取り指定 Fit inside, add
画像のズーム効果、画像の一部を拡大表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room
jQueryを使用して、簡単に画像にズーム効果を付ける方法が掲載されています。 使用する画像は原寸大の画像1枚。 img要素のwidth/height属性にサムネイル表示時のサイズを指定しておきます。 サムネイル画像にマウスがのった時に、画像をサムネイル表示時よりCSSで画像サイズを25%大きくするアニメーションを行い、z-indexをあげて他の要素より上に表示するようにしています。 マウスが離れた時に、CSSで画像サイズを元のサイズに戻すアニメーションを行い、z-indexを元に戻す方法がとられています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像チェック機能 | Gyro-n DFM
JPEGを「libjpeg」よりも20～30％小さく ～Google、新エンコーダー「Guetzli」を発表
http://re-clear.com/wordpress/wordpress-kotei-pass/