読者です 読者をやめる 読者になる 読者になる

空飛ぶ機械学習

機械学習やWebプログラミングのお話

画像サイズがバラバラのギャラリーと画像のminify

知人に依頼された仕事で、画像サイズがバラバラ(横長や縦長、大小さまざま)なときの画像ギャラリーの作成に悩む。

画像の枚数が少なければSlickとか使ったスライダーでいいと思っていたんだけど、20枚近くあるもんだから微妙な感じ。自分の中では6枚くらいまでならスライダー、16枚くらいまでならサムネイル表示系のギャラリーという考え。

スライダーは画像サイズバラバラでも中央に合わせればそれっぽいから良いんだけど、枚数が多いと画像の表示回数の差が開きすぎる印象。だからある程度増えたらいわゆる画像ギャラリーにすれば解決なんだけど、画像サイズが整っていないと汚く思える。

こういうときの画像サイズはどうするべきなんだろうか。考えた対策は次の3つ。

  1. スライダーで画像をランダムに表示する作戦
    • 各画像の表示回数のばらつきを減らす
  2. Pinterest的なUIにする作戦
    • 縦長な画像の対策がメイン
    • 画像はそれなりの大きさで一覧できる
  3. 無理やり並べて画像ギャラリーにす作戦
    • パッと見は整って見える
    • クリックかマウスオーバーで画像拡大

色々迷った結果、Pinterestチックな画像ギャラリーが作れるsnapGalleryを選択。縦長画像をそれっぽく並べればマージンもあまり気にならないように出来た。ただちょっと縦に長くなるので、悩みは継続中。

そして、画像が大きすぎて読み込みが遅い問題も発生。圧縮せねば。 自分のプロジェクトだったらGulp使って自動で各種minifyをするんだけど、今回の仕事は単なるWebページなのでちまちまやりますか。