Перед вставкой изображения в CSS background-image, предварительно следует подготовить его - масштабировать до нужного размера средствами PHP или JS. Например, на хостинг можно положить скрипт, resize-image.php а путь к изображению указывать так: resize-image.php?pathimage=images/photo1.jpg&width=200&height=200
В результате изображение будет вставляться в background-image уже нужного размера и браузеру не придется его масштабировать самостоятельно(с чем он справляется как вы верно заметили не очень).
Скрипт на PHP может выглядеть так:
<?php
function img_resize($src, $dest, $width, $height, $rgb = 0xFFFFFF, $quality = 100) {
if (!file_exists($src)) {
return false;
}
$size = getimagesize($src);
if ($size === false) {
return false;
}
$format = strtolower(substr($size['mime'], strpos($size['mime'], '/') + 1));
$icfunc = 'imagecreatefrom'.$format;
if (!function_exists($icfunc)) {
return false;
}
if($width==0)if($size[0]<=800)$width=$size[0];else $width=800;
if($size[0]<$width)$width=$size[0];
if($size[1]<$height)$height=$size[1];
$x_ratio = $width / $size[0];
$y_ratio = $height / $size[1];
if ($height == 0) {
$y_ratio = $x_ratio;
$height = $y_ratio * $size[1];
} elseif ($width == 0) {
$x_ratio = $y_ratio;
$width = $x_ratio * $size[0];
}
$ratio = min($x_ratio, $y_ratio);
$use_x_ratio = ($x_ratio == $ratio);
$new_width = $use_x_ratio ? $width : floor($size[0] * $ratio);
$new_height = !$use_x_ratio ? $height : floor($size[1] * $ratio);
$new_left = $use_x_ratio ? 0 : floor(($width - $new_width) / 2);
$new_top = !$use_x_ratio ? 0 : floor(($height - $new_height) / 2);
$isrc = $icfunc($src);
$idest = imagecreatetruecolor($width, $height);
imagefill($idest, 0, 0, $rgb);
imagecopyresampled($idest, $isrc, $new_left, $new_top, 0, 0, $new_width, $new_height, $size[0], $size[1]);
header("Content-type: image/jpeg");
imagejpeg($idest);
imagedestroy($isrc);
imagedestroy($idest);
}
header("Content-type: image/jpeg");
header("Cache-control: public");
header("Expires: " . gmdate("D, d M Y H:i:s", date("U")+(86400*365.25)) . " GMT");
img_resize($_GET['pathimage'], $dest, $_GET['width'], $_GET['height'], $rgb = 0xFFFFFF, $quality = 70);
