Создание сжатых миниатюр изображений с помощью php.

Количество просмотров: 1238

В современном сайтострое очень важна оптимизация скорости загрузки страниц на устройство клиента. И не смотря на растущую каждый год ширину канала этот вопрос становится все более актуальным. Сайты, с момента своего появления сильно изменились, теперь это не просто текст и таблички. В большинстве своем большинство веб ресурсов превратились в сервисы позволяющие не только получить информацию, но и обработать ее на месте совершив с ней какое-либо действие. Например покупка товара, выбор доставки и прочее прочее. Началась борьба за деньги пользователей, а пользователи в современном мире очень сильно не любят ждать. Каждая лишняя секунда загрузки вашего сайта, это возможность потерять клиента и его деньги, что он так яростно желает потратить. Огромную роль в скорости загрузки играет именно контент, а именно картинки. Как часто бывает, что для миниатюр изображений 200x200px используются полновесные картинки весом по 2-3 мегабайта. Одна картинка еще ничего, но если у вас каталог и таких картинок сотни, то подумайте сколько это все будет грузиться в первый раз клиенту, когда он откроет ваш сайт.

В данной статье мы рассмотрим небольшой скрипт позволяющий создать миниатюры изображений с целью уменьшения их веса и как следствие увеличения скорости загрузки. На боевой проект, это конечно не подойдет, но в качестве примера и указателя куда рыть дальше сойдет. Начнем.

В примере кода ниже мы используем библиотеку GD, если у вас ее нет, то инструкция по установке тут.

Для начала в корне сайта создадим папку minimage, в ней будут храниться миниатюры наших изображений. Сам скрипт положим так же в корень, плюс разместим несколько картинок, у нас это 12.jpg - 17.jpg.

Ниже приведен полный код страницы, достаточно сохранить его под name.php и запустить на сервере. Если вы сделали все как и мы, то он создаст миниатюры, сохранит их в папку minimage и выведет на странице.


<?php
function cimg($file){ // функция принимает на вход файл, можно так же дописать, чтобы принималась и папка с картинками
if(file_exists( __DIR__."/minimage/")){ // проверяем наличие папки 
	$filename=$file;
	$filepath=__DIR__."/minimage/".$file; // путь к миниатюре
	$new_filename="/minimage/".$file;
	
	if(!file_exists( __DIR__."/minimage/".$file)|| filemtime($filename) "> (time()-86400)){ // проверяем наличие мини файла и время изменения исходника
		list($width, $height) = getimagesize($filename);
		$new_width = 188;
		$new_height = 108;

		$imgf=imagecreatetruecolor(188, 108); // создаем холст
		$image = imagecreatefromjpeg($filename);
		imagecopyresampled($imgf, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
		$rez=imagejpeg($imgf,$filepath); 
		imagedestroy($imgf); 

		return $new_filename;

	}

	else { // возвращаем имя мини файла если он уже создан
		return $new_filename;
	}
}
}
?">
<!DOCTYPE html">
<html">
  <head">
    
  </head">
  <body">
    <div id="root"">Создаем сжатые миниатюры</div">
    
    <a href="12.jpg""><img src="<?php echo cimg('12.jpg');?">""></a">
    <a href="12.jpg""><img src="<?php echo cimg('13.jpg');?">""></a">
     <a href="14.jpg""><img src="<?php echo cimg('14.jpg');?">""></a">
      <a href="14.jpg""><img src="<?php echo cimg('15.jpg');?">""></a">
       <a href="14.jpg""><img src="<?php echo cimg('16.jpg');?">""></a">
        <a href="14.jpg""><img src="<?php echo cimg('17.jpg');?">""></a">
     <p"></p">
   
  </body">
</html">

Немного по используемым выше функциям:

  • imagecreatetruecolor — создает новое изображение, мы используем для создание холста
  • imagecreatefromjpeg — создаем новое изображение из файла или по url
  • imagecopyresampled — Копирование и изменение размера изображения с ресемплированием
  • imagejpeg — Выводит изображение в браузер или пишет в файл
  • imagedestroy — уничтожаем изображение после того как сохранили миниатюру.

comments powered by HyperComments

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх