Web制作

後輩に喜ばれたTipsシリーズ(1)-CMSからアップした画像が表示されない?

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは。スッキリしないお天気が続き、気がつけばもう9月。
4月からディレクターになったスタッフも、少しずつ成長してきました。
そんな彼女に、ブログに書くネタがないよーとボヤいていたところ、「教えてもらったこといろいろ記事にしてくださいよ!」とリクエストをもらったので、お恥ずかしながら「後輩に教えて喜ばれたTipsシリーズ」を始めることにしました。

web業界に入りたてのみなさんのギモンがちょっとでも解決できる記事になればいいなぁと思います。
では、はじまりはじまり~

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

では早速、今回の問題はこちら。

komatta-80x80
アップロードした画像が表示されないんです…

ブログやwordpressに代表されるCMSを導入して、お客様も意気揚々と投稿できるようになったのに。画像がアップできない…!!
そんなお問い合わせがあったら、どうすればいいでしょうか?

弊社はお客様からの問い合わせを受けたら、まずディレクターが同じような現象が起きないか開発環境でチェックを行います。

不具合が起きる原因として、よくある原因のパターンがいくつかあります。

  • システムが上手く動いていない
  • ブラウザ依存による不具合
  • アップした画像が、設定している容量をオーバーしている(容量オーバーのエラーが出ていない)
  • 画像の拡張子が間違っている、指定した拡張子以外のファイルを上げている

などなど…

そこで、原因がどこにありそうか目星をつけるために、お客様には

  • 使用されているブラウザ
  • アップできなかった画像

を確認します。

それで同じ現象が確認できれば、開発部の方に調査・修正をお願いします。

komatta-80x80

しかし、稀に同じ現象が再現できても、原因が不明な場合があります。
「お客様から頂いた画像はアップできないけど、こちらで用意した画像はアップできるなぁ。容量も拡張子も設定の範囲内なのに…」

そんなときは、次の2つを確認してみましょう!

●落とし穴 その1
アップロードできるファイルの種類にjpgは設定しているがJPGやjpegは設定していなかった!
たまにあります。

●落とし穴 その2●
jpg画像のカラーモードがCMYKだった!
CMYKモードって…?と思ったそこのあなたは一度検索してみましょう。

これは私も盲点で、なかなか原因が分からなかったことがあります。
では、どうやったらCMYKモードかどうか確認できるのでしょう。
それにはいろんな方法があると思いますが、私が使うのは「IrfanView」というソフトです。

私のPCには残念ながらAdobe製品がほとんど入っていませんので、psdやaiデータのサムネイルを見ることが出来ません。
そこで、「IrfanView」を使用してサムネイルを確認しています。

IrfanViewでのカラーモード確認方法

(XPを使っているわけでは…)
無題

画像>画像の情報 を開くと「圧縮形式」の欄に「JPEG(または別の拡張子), CMYK」と書いてあればその画像はCMYKです。
RGBの場合は、「JPEG」としか書いていないようです。

さて!これで原因が分かりました!
あとは、CMYKの画像をアップ出来るようにするか、画像を変換してアップするように伝えるか、その場に応じて対応していくだけ。

ちなみに、一番簡単にカラーモードを変換する方法は、そのjpg画像をペイントで開き、保存し直す だそうです。

(❍‘‿‘❍) ⁄ おさらい \(❍‘‿‘❍)

問題

komatta-80x80
アップロードした画像が表示されないんです…

不具合が起きる原因。

  • システムが上手く動いていない
  • ブラウザ依存による不具合
  • アップした画像が、設定している容量をオーバーしている(容量オーバーのエラーが出ていない)
  • 画像の拡張子が間違っている、指定した拡張子以外のファイルを上げている
  • jpeg,JPEG等がアップ出来ないようになっている
  • jpg画像のカラーモードがCMYKになっている

などです。
他にも出てくればまた更新していきます!

以上です。
少しでも早く原因が突き止められるようになるといいですね!
ではまた!

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ブリッジコーポレーションへの
お問い合わせはこちらから

この記事を書いた人

渡辺

ソリューション事業部 ディレクター

FOLLOW US