При вставке изображения через background очень сильно теряется качество, появляется зернистость. пиксельные края элементов и тд. Как решить проблему?

Question

[kroha3000]

есть ссылка-блок. В неё вставляется изображение по средствам background через css

Исходный размер изображение предугадать не возможно. То есть не известен.

Растягивание изображения внутри ссылки-блока идёт background-size: cover;

Размер исходных изображений всегда разный. И на много больше размеров ссылки-блока. Появляется зернистость, рваные края графики изображений и тд. Как лечится или исправляется подобное?

Answer 1

[Роман]

Перед вставкой изображения в 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);

Comments

[kroha3000]

Спасибо, попробую