Изменение размера изображения в php только для просмотра

Я использую простой класс PHP, который имеет несколько вариантов изменения размера. Вы можете легко сохранить эскизы с помощью этого класса. Как сказал @jeroen, вам нужно сделать это только один раз, и их можно кэшировать. Это просто требует библиотеки PHP5 и GD. Вот пример использования:

// *** Include the class include("resize-class.php"); // *** 1) Initialise / load image $resizeObj = new resize('sample.jpg'); // *** 2) Resize image (options: exact, portrait, landscape, auto, crop) $resizeObj -> resizeImage(150, 150, 'crop'); // *** 3) Save image ('image-name', 'quality [int]') $resizeObj -> saveImage('sample-resized.jpg', 100); 

И это тот класс:

 <?php Class resize { // *** Class variables private $image; private $width; private $height; private $imageResized; function __construct($fileName) { // *** Open up the file $this->image = $this->openImage($fileName); // *** Get width and height $this->width = imagesx($this->image); $this->height = imagesy($this->image); } ## -------------------------------------------------------- private function openImage($file) { // *** Get extension $extension = strtolower(strrchr($file, '.')); switch($extension) { case '.jpg': case '.jpeg': $img = @imagecreatefromjpeg($file); break; case '.gif': $img = @imagecreatefromgif($file); break; case '.png': $img = @imagecreatefrompng($file); break; default: $img = false; break; } return $img; } ## -------------------------------------------------------- public function resizeImage($newWidth, $newHeight, $option="auto") { // *** Get optimal width and height - based on $option $optionArray = $this->getDimensions($newWidth, $newHeight, $option); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; // *** Resample - create image canvas of x, y size $this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight); imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height); // *** if option is 'crop', then crop too if ($option == 'crop') { $this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight); } } ## -------------------------------------------------------- private function getDimensions($newWidth, $newHeight, $option) { switch ($option) { case 'exact': $optimalWidth = $newWidth; $optimalHeight= $newHeight; break; case 'portrait': $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; break; case 'landscape': $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); break; case 'auto': $optionArray = $this->getSizeByAuto($newWidth, $newHeight); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; break; case 'crop': $optionArray = $this->getOptimalCrop($newWidth, $newHeight); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; break; } return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function getSizeByFixedHeight($newHeight) { $ratio = $this->width / $this->height; $newWidth = $newHeight * $ratio; return $newWidth; } private function getSizeByFixedWidth($newWidth) { $ratio = $this->height / $this->width; $newHeight = $newWidth * $ratio; return $newHeight; } private function getSizeByAuto($newWidth, $newHeight) { if ($this->height < $this->width) // *** Image to be resized is wider (landscape) { $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); } elseif ($this->height > $this->width) // *** Image to be resized is taller (portrait) { $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; } else // *** Image to be resizerd is a square { if ($newHeight < $newWidth) { $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); } else if ($newHeight > $newWidth) { $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; } else { // *** Sqaure being resized to a square $optimalWidth = $newWidth; $optimalHeight= $newHeight; } } return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function getOptimalCrop($newWidth, $newHeight) { $heightRatio = $this->height / $newHeight; $widthRatio = $this->width / $newWidth; if ($heightRatio < $widthRatio) { $optimalRatio = $heightRatio; } else { $optimalRatio = $widthRatio; } $optimalHeight = $this->height / $optimalRatio; $optimalWidth = $this->width / $optimalRatio; return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight) { // *** Find center - this will be used for the crop $cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 ); $cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 ); $crop = $this->imageResized; //imagedestroy($this->imageResized); // *** Now crop from center to exact requested size $this->imageResized = imagecreatetruecolor($newWidth , $newHeight); imagecopyresampled($this->imageResized, $crop , 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight); } ## -------------------------------------------------------- public function saveImage($savePath, $imageQuality="100") { // *** Get extension $extension = strrchr($savePath, '.'); $extension = strtolower($extension); switch($extension) { case '.jpg': case '.jpeg': if (imagetypes() & IMG_JPG) { imagejpeg($this->imageResized, $savePath, $imageQuality); } break; case '.gif': if (imagetypes() & IMG_GIF) { imagegif($this->imageResized, $savePath); } break; case '.png': // *** Scale quality from 0-100 to 0-9 $scaleQuality = round(($imageQuality/100) * 9); // *** Invert quality setting as 0 is best, not 9 $invertScaleQuality = 9 - $scaleQuality; if (imagetypes() & IMG_PNG) { imagepng($this->imageResized, $savePath, $invertScaleQuality); } break; // ... etc default: // *** No extension - No save. break; } imagedestroy($this->imageResized); } ## -------------------------------------------------------- } ?> 

Вы загружаете изображение, сначала изменяете его размер так, чтобы его минимальная сторона составляла 150, затем вы обрезаете до 150 ширины / высоты относительно центра. Затем вы просто выводите изображение:

 WideImage::load('yourfile.png/jpg/...') ->resize(150, 150, 'outside', 'any') ->crop('center', 'center', 150, 150) ->output('png'); 

Здесь вы найдете исходный код, документацию, онлайн-демонстрации и документацию API: WideImage .

Дайте мне знать, если у вас есть вопросы.

Здесь очень просто использовать класс http://timthumb.googlecode.com/svn/trunk/timthumb.php, вот параметры http://viralpatel.net/blogs/resize-image-dynamically-php/ I проверенные работы отлично работают

Пример: <img src = "/ script / timthumb.php? src = / some / path / myimage.png & w = 100 & h = 80" alt = "измененное изображение" />

Почему бы просто не сделать это с помощью CSS и не использовать сервер для какой-либо обработки? Есть несколько способов сделать это с помощью CSS. Метод Clip – это тот, который я использовал раньше, и поиск по Google принесет вам несколько результатов. Вот один сайт, который охватывает эту скважину

Я бы сохранил миниатюры, так что вам нужно сделать это один раз, и их можно кэшировать. Если ваше соотношение сторон исправлено, я бы уменьшил их размер до 200×200 (здесь есть несколько ответов php, поэтому я пропущу его). Если соотношение сторон меняется, я бы использовал безопасное значение, чтобы оно всегда покрывало ваш блок 150×150 (например, 300×300).

Затем я установил миниатюру в качестве фонового изображения для окна изображения в css, и вы получите именно тот эффект, который вы хотите:

 .img_box { background-repeat: no-repeat; background-position: center center; background-image: url(/path/to/image); } 

Чтобы улучшить опыт для браузеров, поддерживающих css3, вы можете установить:

 background-size: cover; 

к коробке, чтобы она соответствовала точно (поддерживая соотношение сторон).

 <?php $output_width =80; $output_height=80; if(isset($_GET['height'])){ $output_height=$_GET['height']; } if(isset($_GET['width'])){ $output_width=$_GET['width']; } $path = ( (isset($_REQUEST['path']))? $_REQUEST['path'] : ""); //echo $path;exit; $size_arr = getimagesize($path); if ($size_arr[2]==IMAGETYPE_GIF) $image = imagecreatefromgif($path); else if ($size_arr[2]==IMAGETYPE_JPEG) $image = imagecreatefromjpeg($path); else if ($size_arr[2]==IMAGETYPE_PNG) $image = imagecreatefrompng($path); else die_default_image(); $tmpname = tempnam( sys_get_temp_dir() , "phptmp"); resize_image($tmpname, $image, $size_arr, $output_width, $output_height); header('Content-Type: image/jpg'); header('Content-Disposition: inline; filename="'.basename($path).'"'); echo file_get_contents( $tmpname ); unlink( $tmpname ); die(''); function die_default_image() { //43byte 1x1 transparent pixel gif header("content-type: image/gif"); echo base64_decode("R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); } function resize_image($thumbname, $image, $size_arr, $max_width, $max_height)//maintain aspect ratio { $width = $max_width; $height = $max_height; list($width_orig, $height_orig, $img_type) = $size_arr; $ratio_orig = $width_orig/$height_orig; if ($width/$height > $ratio_orig) { $width = floor($height*$ratio_orig); } else { $height = floor($width/$ratio_orig); } // Resample $tempimg = imagecreatetruecolor($width, $height); imagecopyresampled($tempimg, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig); imagejpeg($tempimg, $thumbname, 80); } if (!function_exists('sys_get_temp_dir')) { function sys_get_temp_dir() { if (!empty($_ENV['TMP'])) { return realpath($_ENV['TMP']); } if (!empty($_ENV['TMPDIR'])) { return realpath( $_ENV['TMPDIR']); } if (!empty($_ENV['TEMP'])) { return realpath( $_ENV['TEMP']); } $tempfile=tempnam(uniqid(rand(),TRUE),''); if (file_exists($tempfile)) { unlink($tempfile); return realpath(dirname($tempfile)); } } } ?> 

Сохраните файл как imageresize.php и поместите этот файл в свою папку с изображениями и просто используйте код, подобный этому, чтобы показать изображение

 <img src="<?=base_url().'uploads/imageresize.php?path='.$image."&width=150 &height=150";?>" /> 

вы можете использовать этот код для показа изображений разных размеров.

Вот мой класс Resize Resize. Класс может получить результат, который вы хотите (обрезка / центрирование обрезки / и т. Д.) … и многое другое 😉

Я не все объясняю, но если у вас есть вопросы, просто спросите меня.

 <?php final class Img { /** * Usage: * Img::resizeImage( 'sample.png', null, array( 'x' => 150, 'y' => 150 ) ) * Outputs a Image * * Img::resizeImage( 'sample.png', 'crop.jpg', array( 'x' => 200, 'y' => 200 ) ) * Saves a Image * * @static * @param string $source * @param null|string $destination * @param array $options * @return void * @throws Exception */ public static function resizeImage( $source, $destination = null, $options = array() ) { if( !file_exists( $source ) || ( is_string( $destination ) && !is_writable( dirname( $destination ) ) ) ) { throw new Exception( 'Quelldatei existiert nicht oder Zielverzeichnis ist nicht beschreibbar.' ); } #@ini_set ('memory_limit', '64M' ); $defaultOptions = array( 'x' => 100, 'y' => 100, 'maxX' => 1000, 'maxY' => 1000, 'zoom_crop' => 1, 'quality' => 90, 'align' => 'c', // [c]enter, [b]ottom, [t]op, [l]eft, [r]ight 'filters' => '', 'sharpen' => 0, 'canvas' => 'ffffff', ); $options = array_merge( $defaultOptions, $options ); $sData = getimagesize( $source ); $origType = $sData[2]; $mimeType = $sData['mime']; if( !preg_match( '/^image\/(?:gif|jpg|jpeg|png)$/i', $mimeType ) ) { throw new Exception( 'The image being resized is not a valid gif, jpg or png.' ); } if( !function_exists( 'imagecreatetruecolor' ) ) { throw new Exception( 'GD Library Error: imagecreatetruecolor does not exist' ); } if( function_exists( 'imagefilter' ) && defined( 'IMG_FILTER_NEGATE' ) ) { $imageFilters = array ( 1 => array (IMG_FILTER_NEGATE, 0), 2 => array (IMG_FILTER_GRAYSCALE, 0), 3 => array (IMG_FILTER_BRIGHTNESS, 1), 4 => array (IMG_FILTER_CONTRAST, 1), 5 => array (IMG_FILTER_COLORIZE, 4), 6 => array (IMG_FILTER_EDGEDETECT, 0), 7 => array (IMG_FILTER_EMBOSS, 0), 8 => array (IMG_FILTER_GAUSSIAN_BLUR, 0), 9 => array (IMG_FILTER_SELECTIVE_BLUR, 0), 10 => array (IMG_FILTER_MEAN_REMOVAL, 0), 11 => array (IMG_FILTER_SMOOTH, 0), ); } $destX = min( $options['x'], $options['maxX'] ); $destY = min( $options['y'], $options['maxY'] ); switch( $mimeType ) { case 'image/jpg': case 'image/jpeg': case 'image/pjgpg': $image = imagecreatefromjpeg( $source ); break; case 'image/png': $image = imagecreatefrompng( $source ); break; case 'image/gif': $image = imagecreatefromgif( $source ); break; } if( !isset( $image ) ) { throw new Exception( 'Could not open Image' ); } $width = imagesx( $image ); $height = imagesy( $image ); $originX = $originY = 0; if( $destX > 0 && $destY == 0 ) { $destY = floor( $height * ( $destX / $width ) ); } else if( $destY > 0 && $destX == 0 ) { $destX = floor( $width * ( $destY / $height ) ); } // scale down and add borders if( $options['zoom_crop'] == 3 ) { $finalY = $height * ( $destX / $width ); if( $finalY > $destY ) { $destX = $width * ( $destY / $height ); } else { $destY = $finalY; } } $canvas = imagecreatetruecolor( $destX, $destY ); imagealphablending( $canvas, false ); if( strlen( $options['canvas'] ) < 6 ) { $options['canvas'] = 'ffffff'; } $canvasColorR = hexdec( substr( $options['canvas'], 0, 2 ) ); $canvasColorG = hexdec( substr( $options['canvas'], 2, 2 ) ); $canvasColorB = hexdec( substr( $options['canvas'], 2, 2 ) ); // transparentes bild erstellen $color = imagecolorallocatealpha( $canvas, $canvasColorR, $canvasColorG, $canvasColorB, 127 ); imagefill( $canvas, 0, 0, $color ); // scale down and add borders if( $options['zoom_crop'] == 2 ) { $finalY = $height * ( $destX / $width ); if( $finalY > $destY ) { $originX = $destX / 2; $destX = $width * ( $destY / $height ); $originX = round( $originX - ( $destX / 2 ) ); } else { $originY = $destY / 2; $destY = $finalY; $originY = round( $originY - ( $destY / 2 ) ); } } // restore transparency blending imagesavealpha( $canvas, true ); if( $options['zoom_crop'] > 0 ) { $srcX = $srcY = 0; $srcW = $width; $srcH = $height; $cmpX = $width / $destX; $cmpY = $height / $destY; // calculate x or y coordinate and width or height of source if( $cmpX > $cmpY ) { // breitformat $srcW = round( $width / $cmpX * $cmpY ); $srcX = round( ( $width - ( $width / $cmpX * $cmpY ) ) / 2 ); } elseif( $cmpY > $cmpX ) { $srcH = round( $height / $cmpY * $cmpX ); $srcY = round( ( $height - ( $height / $cmpY * $cmpX ) ) / 2 ); } // pos cropping if( strlen( $options['align'] ) ) { if( strpos( $options['align'], 't') !== false) { $srcY = 0; } if( strpos( $options['align'], 'b') !== false) { $srcY = $height - $srcH; } if( strpos( $options['align'], 'l') !== false) { $srcX = 0; } if( strpos( $options['align'], 'r') !== false) { $srcX = $width - $srcW; } } imagecopyresampled( $canvas, $image, $originX, $originY, $srcX, $srcY, $destX, $destY, $srcW, $srcH ); } else { imagecopyresampled( $canvas, $image, 0, 0, 0, 0, $destX, $destY, $width, $height ); } // @todo filtermöglichkeit über optionen ausbessern if( strlen( $options['filters'] ) && function_exists( 'imagefilter' ) && defined( 'IMG_FILTER_NEGATE' ) ) { // apply filters to image $filterList = explode( '|', $options['filters'] ); foreach( $filterList as $fl ) { $filterSettings = explode (',', $fl); if (isset ($imageFilters[$filterSettings[0]])) { for ($i = 0; $i < 4; $i ++) { if (!isset ($filterSettings[$i])) { $filterSettings[$i] = null; } else { $filterSettings[$i] = (int) $filterSettings[$i]; } } switch ($imageFilters[$filterSettings[0]][1]) { case 1: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1]); break; case 2: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2]); break; case 3: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2], $filterSettings[3]); break; case 4: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0], $filterSettings[1], $filterSettings[2], $filterSettings[3], $filterSettings[4]); break; default: imagefilter ($canvas, $imageFilters[$filterSettings[0]][0]); break; } } } } if( $options['sharpen'] > 0 && function_exists( 'imageconvolution' ) ) { $sharpenMatrix = array ( array (-1,-1,-1), array (-1,16,-1), array (-1,-1,-1), ); $divisor = 8; $offset = 0; imageconvolution( $canvas, $sharpenMatrix, $divisor, $offset ); } //Straight from WordPress core code. Reduces filesize by up to 70% for PNG's if( ( IMAGETYPE_PNG == $origType || IMAGETYPE_GIF == $origType ) && function_exists( 'imageistruecolor' ) && !imageistruecolor( $image ) && imagecolortransparent( $image ) > 0 ) { imagetruecolortopalette( $canvas, false, imagecolorstotal( $image ) ); } if( null === $destination ) { header( "Cache-Control: no-store, no-cache, must-revalidate" ); header( "Cache-Control: post-check=0, pre-check=0", false); header( "Pragma: no-cache" ); header( "Expires: Sat, 26 Jul 1997 05:00:00 GMT" ); header( "Last-Modified: " . date( "D, d MYH:i:s" ) . " GMT" ); } switch( $mimeType ) { case 'image/jpg': case 'image/jpeg': case 'image/pjgpg': if( null === $destination ) { header("Content-type: image/jpeg"); } @imagejpeg( $canvas, $destination, $options['quality'] ); break; case 'image/png': if( null === $destination ) { header("Content-type: image/png"); } @imagepng( $canvas, $destination, floor( $options['quality'] * 0.09 ) ); break; case 'image/gif': if( null === $destination ) { header("Content-type: image/gif"); } @imagegif( $canvas, $destination ); break; default: throw new Exception( 'Fehler beim schreiben' ); break; } imagedestroy( $canvas ); imagedestroy( $image ); } } 

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

 $src=imagecreatefromjpg("file.jpg"); $dest=imagecreatetruecolor($destwidth,$destheight); $src1=imagecopyresized($dest,$src,0,0,0,0,$destwidth,$destheight,$widthresource,$heightresource); echo imagejpeg($dest); 

изменение параметров imagecopyresized, которые установлены на 0,0,0,0, обрезает ваше изображение с x1, y1 до x2, y2 Надеюсь, что это поможет

У меня есть сценарий оболочки, который делает именно то, что вам нужно с ImageMagick :

 #!/bin/sh SOURCE='/path/to/img' FILE='myfile.jpg' convert $SOURCE/$FILE -thumbnail 150x150^\> -quality 85% \ -gravity center -extent 150x150 ${SOURCE}150/$FILE 

• Это изменяется на коробку, покрывающую 150×150 – значение ^ после 150x150 имеет важное значение!
• Параметр -thumbnail всю метаинформацию, за исключением цветовых профилей, и выполняется очень быстро.
• Затем он разрезает коробку с 150×150 от центра ( -gravity center -extent 150x150 – -gravity center -extent 150x150 ) – именно то, что вы хотите.
• Кроме того, я установил -quality 85% которая должна быть достаточной, при этом значительно уменьшая размер файла.
• В этом примере я беру изображение из каталога img и пишу эскиз с тем же именем файла в каталог img150 рядом с ним.

Эксперимент для достижения наилучших результатов.

Я получил помощь от:
http://www.imagemagick.org/Usage/files/
http://www.imagemagick.org/Usage/resize/
http://www.imagemagick.org/script/command-line-options.php#thumbnail

Как уже упоминалось, это можно сделать с помощью CSS, если вы не сохраняете изображение. Хотя время загрузки будет повреждено (загрузка изображения 800×600 или загрузка изображения 150×150).

HTML:

 <div class="imgHold"> <img src="imgSrc.jpg" /> </div> 

CSS:

 div{ overflow:hidden; } img{ width:150px; height:200px; margin-top:-25px; } 

вы можете сделать это с помощью jquery. Я предполагаю, что у вас есть имя класса для изображений, которые вы хотите показать обрезанным. например, это может быть «.cropmyimage», вот код:

 var objheight = 150; var objwidth = 150; $(".cropmyimage").each(function(){ var elem = $(this); elem.wrap("<div class='cropperdiv'></div>"); var t = new Image(); t.src = elem.attr("src"); t.onload = function(){ var ratio1 = objwidth/objheight; var ratio2 = t.width/t.height; var newheight=0; var newwidth=0; if(ratio1 < ratio2){ newheight = parseInt(objheight); newwidth = parseInt(objheight * ratio2); }else{ newheight = parseInt(objwidth / ratio2); newwidth = "width",objwidth; } elem.width(newwidth).height(newheight).css("margin-left",(objwidth-newwidth)/2).css("margin-top",(objheight-newheight)/2); } elem.parent("div.cropperdiv").css("overflow","hidden").width(objwidth).height(objheight); }); 

Посмотрите на WideImage, библиотеку PHP с открытым исходным кодом для управления изображениями. Может получиться простым

 WideImage::load('pic.jpg')->resize(150, 150, 'outside')->output('jpg'); 

http://wideimage.sourceforge.net/

Это именно то, что вы ищете, и один шаг вперед, кеширование больших пальцев:

Проверьте http://phpthumb.gxdlabs.com/

Вы можете использовать этот скрипт как script.php? Img = image.jpg & size = 100, в этом случае они находятся в одной и той же папке скрипта.

  <?php require_once '/path/to/ThumbLib.inc.php'; $filename = $_GET['img']; $path = "/upload/item/"; $thumb = $_GET['size']; // Just let specific values $sizeThumb = array('20','40','50','80','100','120','150'); if(in_array($thumb,$sizeThumb)){ $maxWidth = $thumb; $maxHeight = $thumb; } else { header('Status: 404 Not Found'); die; } $pathUrl = _ROOT_FOLDER.'/thumbs/autothumb-'.$thumb.'-'.$filename; if(!file_exists(_ROOT_FOLDER.$path.$filename)) { header('Status: 404 Not Found'); die; } if(!file_exists($pathUrl) ){ $max = PhpThumbFactory::create(_ROOT_FOLDER.$path.$filename); $max->adaptiveResize($maxWidth,$maxHeight)->save($pathUrl); } header('Content-type: image/jpeg'); readfile($pathUrl); ?> 

Я думаю, что простое решение без стресса и процесса работы будет с css:

1) Применить класс, который даст вам обрезанное изображение. Сделайте это с помощью отрицательного поля. Я не использовал точную маржу, используя ее, как вам нужно. 2) На hover перезапишите атрибут marging, чтобы он дал вам реальное изображение.

 css: <style> .crop:hover{ margin:0; } .crop { margin:-100px -15px -40px -55px; } </style> 

HTML:

 <img class="crop" src="image.jpg" /> 

просто используйте <img src='source' width="150" height="150" /> он изменит размер изображения. хотя это не будет предпочтительнее, потому что это накладывает нагрузку на браузер.