グーグルの新たな画像生成AIツール「ImageFX」の使い方
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Googleが人工知能（AI）に多額の投資を行ってきたことを考えれば、同社が先頃、独自の画像生成AIツール「ImageFX」を公開したのは、意外なことではない。ImageFXは、OpenAIの「DALL-E 3」や「Midjourney」「Image Creator from Microsoft Designer」といった多くの画像生成AIツールの強力なライバルになるはずだ。 ImageFXは、テキストから画像を生成するGoogleのテクノロジー「Imagen」の最新世代である「Imagen 2」を利用する。ImageFXで作成されるすべての画像には、DeepMindの「SynthID」が埋め込まれる。SynthIDは、肉眼では見えない
解像度の低い画像をAIが解決！放り込めば倍サイズのWebツール Image Upscaler
「この写真、粗くて使えない。」 そんなときは、日々進化する人工知能、AIのおかげで、解像度の低い画像を最大4倍まで拡大できる Image Upscalerで解決しましょう。 ウェブサイトに写真を放り込んで、数秒待つだけで完成、できた画像はそのままJPEGファイル形式で保存できるので、フォトショップなどのデザインツールも不要です。 Image Upscaler https://clipdrop.co/image-upscaler このツールは、画像のクオリティはそのままにくっきりとしたシャープさと、何百万枚もの画像で訓練されたAIによるリアルな再現によって解像度をアップ。 さらに、ザラザラした写真のノイズ除去も同時に行います。 画質を倍にするのは無料、月5ドル（年間）のProプランは4倍まで対応できます。3日間の無料体験トライアルもあり、キャンセルはいつでも自由となっています。 このProプ
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
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.
これが完全版！レスポンシブ対応の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画像を読み込むには 完全版
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
濁りなし！美しいグラデーションの基本ルールとCSSオンラインツール
デザイントレンドは変わっていますが、グラデーションはとてもナチュラルな見た目と多様性に富んでおり、いつの時代も愛されるデザインスタイルです。 この記事では、美しいグラデーションを作成する基本ルールと、手軽に利用できるグラデーション作成オンラインツールをご紹介します。 全シリーズはこちら。 しっかりマスター！美しいグラデーション作成徹底ガイド【Illustratorグルーバルカラー編】 しっかりマスター！美しいグラデーション作成徹底ガイド【Illustrator実践デザイン編】 美しいグラデーションって、なんだろう？ グラデーションには良くて美しいものもあれば、悪くてひどいものもあるでしょう。 良いグラデーションとは、ナチュラルで調和のとれた美しいなめらかな色の変化のことを指します。 プリント印刷でグラデーションを表現するときの技術的な問題を防ぐのにも役立ち、画面スクリーン状で見たときにも魅
WEBP変換ツール (jpg、pngとwebpを相互変換)
公開日: 2016/03/09 | 更新日: 2017/08/10 WEBPコンバーターは、JPEGやPNGをWEBPに、WEBPをPNGに変換するウェブサービスです。画質を保ったまま、圧倒的に容量を圧縮できるWEBPをウェブサイトで活用していきましょう。Chromeにのみ対応しています。 ヒントJPG、PNGからWEBPに変換する「変換前の画像」という項目にある「ファイルを選択」を押して、PNGかJPGのファイルを指定して下さい。「変換後の画像」という項目に、WEBPに変換した画像が表示されるので保存して下さい。WEBPからPNGに変換する「変換前の画像」という項目にある「ファイルを選択」を押して、WEBPのファイルを指定して下さい。「変換後の画像」という項目に、PNGに変換した画像が表示されるので保存して下さい。プライバシーについてここで使用した画像は、当サイトのサーバーにはアップロー
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG
無料で使える画像をGoogle画像検索で簡単に探せる機能がアップデートで追加される
Googleが2020年8月31日(月)に発表したアップデートにより、Google画像検索で簡単に無料で使える画像や商用利用可能な画像を探せるようになりました。探した画像の利用規約も簡単にアクセスできるようになっています。 Learn how to find image licensing information on Google Images https://blog.google/products/search/learn-how-find-image-licensing-information-google-images/ まず、Google画像検索で検索したい単語を入力してエンターキーを押します。 以下のように画像が大量に表示されますが、無料で使用できる画像や転載不可・有料の画像などが混在している状態です。画像を絞り込むには「ツール」をクリック。 「ライセンス」をクリックすると、
ウンコード・マニア
「なんだこの糞コードは!(怒)」「書いた奴出てこい!(怒)」 こんな声を聞いたり、叫んだりしたことはありませんか？ ウンコードについて学ぶことによってウンコードを撲滅しましょう！ とりあえず、趣のあるウンコード鑑賞から始めて下さい お知らせ 2013-06-27 profile image をTwitter API1.1に対応しました。Thanks for Profile Image API For Twitter 2013-06-16 Twitter API1.1に対応しました。 2012-12-05 職人ランキングを追加しました。 2012-11-21 レコメンド機能を追加しました。 Twitterアカウント @unkode_mania で更新情報をつぶやいてます 障害情報 2012-08-14 障害情報: 19:20 - 21:59 くらいの間、internal server err
iPadOSの特徴となる機能10選。iOSとのちがいがよくわかります
iPadOSの特徴となる機能10選。iOSとのちがいがよくわかります2019.10.18 21:0096,207 David Nield - Gizmodo US ［原文］ （ 松浦悦子/Word Connection JAPAN ） iPadはもっぱらゲームと動画鑑賞にしか使っていないワタクシですが…。 なんでも、iOS 11からiPadでしか使えない機能が登場し、今やiPadで走るオペレーティングシステムは専用のiPadOSに。まったく別のOSになっているとか。このiPadOS（連続性の関係で、バージョンは13から始まりますが）のデビューを記念して、本日はiPhoneにはない、iPadだけのすばらしい機能を紹介します。 1. ホーム画面にウィジェットを追加できるImage: Gizmodo USiPadOSがAndroidになった！という雰囲気。ホーム画面の最初のページを右方向にスワイ
2018年なぜ私達はコンテナ/Dockerを使うのか | iret.media
2017年にもうコンテナの未来・一つのカタチはもう確定したと言え、今更感があるものの、改めてDockerとコンテナについて。 今更こんなことを書くのは、情報が溢れてくる今こそ、正しく理解し、正しい順序で学習することが重要だと切に思うから。 内容についてのお断り How Toはかきません あくまでも2018年時点の私見 目新しい情報はない、2016年頃に書けたレベル Dockerをこう使えとか、こうするのがいいとかの話ではなく、コンテナとDockerに関して大きな視点で現時点で私の考えを書きます。また、私自身はかなりのコンテナ推進派です。 Dockerをよくわかっている人には意味のない記事となります。 コンテナ(Docker)のメリット 何故コンテナがいいのか、コンテナをある程度の学習コストを払ってでもやる理由 コンテナとDocker コンテナ技術はDockerが生まれる前から存在する技術で
SVGファイルとは？基礎知識と作成・変換方法を解説｜ferret [フェレット]
多くのホームページが活用している「SVG（エスブイジー）ファイル」。具体的にどの様なフォーマットなのかご存知でしょうか。 SVGファイルのメリットは、拡大縮小しやすく編集性・汎用性が高いこと。でも「何となく使っている」「実はあんまりどのようなものか知らない」「なぜSVGなの？」と感じている方も少なくないでしょう。 そこで本記事では、SVGの特徴やその他のフォーマットとの違い、作成方法などについて詳しく解説します。 SVG（エスブイジー）ファイルとはなにか？ 「SVGファイル（スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics）」はの歴史は意外にも古く、2001年頃に勧告された技術です。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、一種の画像フォーマットになります。 引用元：今こそ取り組むS
![SVGファイルとは？基礎知識と作成・変換方法を解説｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c1044997c38f72020170dae282a443ce6cd7864c/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F8445%2Fog_image%2Fdefault-d8edf2f9b5b2b651d90216773c15980f.png)
pythonによる画像処理入門 - webエンジニアの日常
はじめに 今回はpythonによる画像処理のお話です。 普段仕事ではRubyメインなのですが、最近趣味でpythonを勉強しはじめ、画像を加工するのが意外と簡単だと分かったので、簡単な画像処理について書いてみました。 pythonについてはまだまだ勉強中なので、python的にはこうは書かない、これだと処理が遅い、コードが汚いなどなどありましたら、コメントで教えていただけると幸いです。 また、以下のコードではpythonのライブラリ、numpy, pillowを使用しています。 著者の環境ではwindows10上でAnaconda3を使用しているため別途インストールは不要でしたが、実行する際は必要に応じてインストールをお願いします。 画像処理の概要 画像の加工は単純に各ピクセルの色を画像の端から端まで順番に変更することで実現しています。 そこで、まずは画像ファイルを読み込み、操作しやすいよ
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
思ったより簡単！WordPressのサムネイルを別サイズも含め作り直す方法！！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。プログラマーの卓司です。 今回はWordPressのサムネイルを再度、別のサイズも含めて作成する方法をまとめます。 0. 前段 先日、某WEBサイトの機能改修でサムネイルの画像サイズが微妙に異なるものを利用したいとの要望がありました。 『お。サイズ変えたいんだ。widthとheightいじってさくっとおわらせちゃお。』 WordPress中々さわる機会がなかったので、ソースを読んでびっくり。 サムネイル出力は <?php the_post_thumbnail('large-feature'); ?> と。。。 『え？画像サイズ変えりゃ済むもんじゃないんですか？』 有識者様に相談した所、新たに使いたいサムネイルのサイズを定義して、再度サムネイルを作成し、それを参照するのだそうで。。。 WordPress一年生の僕には『うわっ、面倒。。。』と少し抵抗がありました。 しかし、やってみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch
Pixabay／無料画像
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
