降低php中图像的大小和质量，并用作CSS背景图像

Question

I have a shop design I am working on that sets the images of the products as a div background, and when you hover it makes it bigger from the middle, etc. I have all that working great but the images are too big and cause a ton of lag.

I have tried a couple of options, like using PHP to make the image smaller and slightly lower quality but I can't figure out how to get it from a jpeg image in php to a format that CSS will use as a background, since I am not just printing it out as an image on a page and need CSS animations and such to work with it.

background:url(
<?php
if(!$i['Image']){

}else{ 
$im = $i['Image'];
$image = "../Images/ShopIMG" . $im . ".jpeg"; 
}
$source_image = imagecreatefromjpeg($image);
$source_imagex = imagesx($source_image);
$source_imagey = imagesy($source_image);
$dest_imagex = 300;
$dest_imagey = 200;
$dest_image = imagecreatetruecolor($dest_imagex, $dest_imagey);
imagecopyresampled($dest_image, $source_image, 0, 0, 0, 0, $dest_imagex, 
$dest_imagey, $source_imagex, $source_imagey);
$imageData = imagejpeg($dest_image,NULL,80);
$src = 'data: '.mime_content_type($dest_image).';base64,'.$imageData;
echo($image);
?>) no-repeat center center;
background-size: 115%;

I would like the new php image in a smaller size and quality be used as the background image, so it doesn't take as much memory on the page and slow it down but it prints out a bunch of random seemingly broken characters.

Answer 1

Splitting the image and uploading a lower quality first solved my issue. Thank you Dharman.