Web」カテゴリーアーカイブ

Twitter投稿時にJPEGに変換されないPNG画像の条件

ウェブ担当の嶋です。

Twitter社は、「2019年2月11日以降、投稿画像の処理方法を変更した」とアナウンスしました。

これまでも、Twitterに投稿したPNG画像はサーバー側で加工されてしまうと言われてきましたが、今回はTwitter社が開発者フォーラムで「サーバー側で画像処理するよ」と明言したことになります。

英文で、かつ技術的な内容を含むため非常に難解ですが、かいつまんで言うと

  • 投稿画像が多く、それを保存しておくサーバーの維持が大変
  • 特に高解像度のPNGはファイルサイズが大きく負担が大きい
  • そのため大きいPNG画像はJPEGに変換することにした

という感じです。

普段の投稿がスマホで撮った猫や美味しそうなケーキの写真という方々には影響のない話ですが、イラストレーターやデザイナーさんにとっては重要なアナウンスです。

Twitter社もすべてのPNG画像を変換します、と言ったわけではありません。特定の条件を満たすPNG画像は変換をせずにそのまま投稿できるようにしたそうです。

実は今回のケース、一部の人にとっては「PNG投稿時の制限緩和」にも該当する内容になっています。このエントリーではその特定の条件についての解説と、投稿できるPNG画像の作成方法についてご説明します。

なお、断りのない限り本エントリーの情報は2019年3月現在の情報、動作を元に作成しています。

続きを読む

カテゴリー: Web | タグ: , , , , , | 2019/07/18 更新

FacebookのOGP画像にあえて小さい正方形の画像を使うには

ウェブ担当の嶋です。

「OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法」「FacebookのOGP画像の仕様変更 キーワードは『1200px × 630px』と『PNG』」という2つのエントリーで取り上げた「OGP画像」。FacebookでURLをシェアした際に表示される画像をどのデバイスでも余白なく、大きく表示させる手法をご紹介しました。

Facebookから自サイトへの導線、と考えれば画像は目立つ大きい物のほうがいいのですが、状況によっては「あまり大きい画像を使いたくない」というケースもあります。その場合は、小さい正方形の画像を用意することでFacebookのタイムライン上で小さく表示させることができます。

続きを読む

カテゴリー: Facebook | タグ: , | 2018/06/22 更新

FacebookのOGP画像の仕様変更 キーワードは「1200px × 630px」と「PNG」

こんにちは、ウェブ担当の嶋です。2015年もどうぞよろしくお願いいたします。

さて、以前「OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法」というエントリーでFacebookでシェアした時に表示される画像の件を取り上げました。その後Facebookの仕様が変更され、画像の取り扱いが変わりましたので改めて整理してみたいと思います。キーワードは「1200px × 630px」、そして「PNG」です。

続きを読む

カテゴリー: Facebook | タグ: , , , , , , , , , , , , | 2018/06/22 更新

OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法

こんにちは、ウェブ担当の嶋です。

Twitterと並んでSNSの代表格となったFacebook。ウェブテクノロジでは公式ページとともに「OPTPiX SpriteStudio ユーザー助け合い所」というグループも開設し、ユーザー様と情報を相互にやりとりしています。

Facebookは、URLを含む投稿やシェアをすると、自動的にそのURLからタイトル概要画像などを取得して表示してくれます。リンクをクリックする前にどんなサイトなのかなんとなくわかるのは非常に便利なのですが、こういう形でシェアされているのをよく見かけませんか?

share_sample

ページのタイトルや見出しは適切なのですが、サムネイル画像として表示されている画像の左右が切れてしまっています。また、表示されている画像もサイトのトップページを紹介する画像としては適切ではありません

これはOGP(Open Graph Protocol)の設定が行われていないことが原因です。自サイトに多くの人を誘導するためにも、OGP、特に画像に関する部分の設定はしっかりとやっておきたいものです。

※例示としてコミPo! のトップページを使っていますが、実際のページはきちんとOGP設定されてますので、この通りにはなりません。念のため。
※この情報は記事執筆時の情報を元にまとめています。将来的に仕様が変更される可能性がありますのであらかじめご了承ください。

続きを読む

カテゴリー: Facebook | タグ: , | 2018/08/01 更新

「PNG24高圧縮化加工」でFacebookのカバー写真を綺麗なままコンパクトに!

Web担当の嶋です。

昨年末に「Facebookにキレイなカバー写真を投稿するポイント」というエントリーを公開しました。その時の結論としては「256色のPNGにしてアップすると、ロゴもくっきりするしファイルサイズも小さくなる」というものでした。

しかし、アニメ調などベタ塗りの箇所が比較的多いカバー写真であればいいのですが、写真やグラデーションを多用した画像を減色すると、物によっては階調不足が気になる場合もあります。

今回はOPTPiX imesta 7 for Mobile & Socialに試験的に搭載されている機能「PNG24高圧縮化加工」を使って、24bitの画像をFacebookのカバー写真にする、というのを試してみたいと思います。

続きを読む

カテゴリー: Facebook | タグ: , , , | 2018/06/22 更新