page_speed_res_top

SOY CMSで表示直前で画像のリサイズ表示を行う


先日、ページの表示速度を向上するために、

トップページのサムネイルの生成をサーバ側でやらせてみたけんだけど、


resize_has_alpha


ところどころ、

黒いサムネイルが生成されていた。


本来ここに表示されるべき画像が、


aec

陰イオン交換容量AEC


これで、

GIMPで作成した画像はリサイズしちゃいけないのかなぁ…

なんていろいろ考えみたら原因がわかった。

GIMP - GNU Image Manipulation Program


この画像はPNG形式で保存され、

アルファチャンネルが背景透過の値で設定されているんだった。


SOY CMSに搭載されているリサイズの機能には、

背景が透過されているものは許可されていないらしい。


透過された画像をすべて修正するのはだるい。

ということで、透過された画像も正常にリサイズされる様に修正してみた。


とりあえず、

PNGのりサイズに関しての処理をまとめてみると、

※/インストールディレクトリ/common/im.inc.php


$srcImage = imagecreatefrompng(画像のパス);

//サイズに関する情報を取得
$imageSize = array("幅", "高さ");
$width = ***;
$height = ***;

//変換
$dstImage = imagecreatetruecolor($width,$height);

imagecopyresampled(
$dstImage,$srcImage,
0, 0, 0, 0,
$width, $height, $imageSize[0], $imageSize[1]
);

$savepath = "画像のキャッシュを保管するパス";
$savetype = _get_extension($savepath);
imagepng($dstImage,$savepath);

こんな感じ。


これだと透過されている箇所が黒になってしまう。

ということで、


$srcImage = imagecreatefrompng(画像のパス);

//サイズに関する情報を取得
$imageSize = array("幅", "高さ");
$width = ***;
$height = ***;

//変換
$dstImage = imagecreatetruecolor($width,$height);

imagealphablending($dstImage, false);
imagesavealpha($dstImage, true);

imagecopyresampled(
$dstImage,$srcImage,
0, 0, 0, 0,
$width, $height, $imageSize[0], $imageSize[1]
);

$savepath = "画像のキャッシュを保管するパス";
$savetype = _get_extension($savepath);
imagepng($dstImage,$savepath);

imagecreatetruecolorの実行後に太字で書いてある2行の処理を追加してみた。


変更して実行してみると、


resize_has_alpha1


無事、期待通りの画像が表示された。


修正内容は下記のULR先でダウンロードできます。

SOY CMS フォーラム • トピックの表示 - 【隠し機能】サーバ側で画像のリサイズを利用して、Googleの内部SEOのスコアを上げました


追記

今回はGDでのリサイズしか対応していません。

ImageMagickの処理がどうなっているのかは知りません。