У меня есть дизайн магазина, над которым я работаю, который устанавливает изображения продуктов в качестве фонового изображения, а когда вы наводите курсор, он становится больше с середины и т. Д. У меня все это работает отлично, но изображения слишком большие и вызвать тонну отставания.
Я испробовал несколько вариантов, таких как использование PHP, чтобы уменьшить изображение и немного снизить его качество, но я не могу понять, как получить его из изображения jpeg в php в формат, который CSS будет использовать в качестве фона , поскольку я не просто распечатываю это как изображение на странице и мне нужны CSS-анимации и тому подобное для работы с ним.
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%;
Я бы хотел, чтобы новое php-изображение меньшего размера и качества использовалось в качестве фонового изображения, чтобы оно не занимало столько памяти на странице и не замедляло его, но выводило несколько случайных, казалось бы, испорченных символов ,