在响应式Web应用程序中使用动态图像

Question

I am working on responsive web application. My designer used 370x700px Images in static pages. It works perfectly with responsive with the css and js code for images including this width:100% height:auto .

In this site I am uploading product images from the admin panel.In without responsive website I was creating different size of thumbnails, but In this case I am worried that should I create thumbnail of size 370x700px ? These images are too big to load and i have to load 10 images on one page. minimum size of the image is 150kb. so 150*10 = 1500kb only for images except other contents. These are the small images, big images resolution is around 700x1800px which I will show on product detail page in zoom section.

Is there any other way to do it? should I create 370*700px thumbnail images from admin panel?

Answer 1

Here is some old code I wrote that will resize any image from a DB. It still uses the deprecated mysql_* but that is easy enough for you to update.

It is designed to take $GET arguments, img (the row on the db corresponding to the image), min,max,height,width. Depending on which of those are set, it will either fix an absolute value or try to fit the image to a size you need. This will allow you to upload one image only then resize that dynamically for your pages.

    $sql=sprintf("SELECT image,filetype,width,height FROM image WHERE imageline='%s'",mysql_real_escape_string($_GET['img']));
$result=mysql_query($sql,$dbh);
$row=mysql_fetch_assoc($result);
$filetype=($row['filetype']!="")?$row['filetype']:"image/jpeg";
$content=base64_decode($row['image']);
$newheight=0;
$newwidth=0;
if($row['height']==0||$row['width']==0)
    {

    header("Content-type: $filetype");
    echo ($content);
    die;
    }

if($_GET['max']>0)
    {
    if($row['height']>=$row['width'])
        {
        $_GET['height']=($_GET['max']>$row['height'])?$row['height']:$_GET['max'];
        $_GET['width']=0;
        }
    if($row['width']>$row['height'])
        {
        $_GET['width']=($_GET['max']>$row['width'])?$row['width']:$_GET['max'];
        $_GET['height']=0;
        }
    }

if($_GET['min']>0)
    {
    if($row['height']<=$row['width'])
        {
        $_GET['height']=$_GET['min'];
        $_GET['width']=0;
        }
    if($row['width']<$row['height'])
        {
        $_GET['width']=$_GET['min'];
        $_GET['height']=0;
        }
    }

if($_GET['height']>0&&$_GET['width']==0)
    {
    $newheight=$_GET['height'];
    $newwidth=$row['width']*($_GET['height']/$row['height']);

    }
if($_GET['height']>0&&$_GET['width']>0)
    {
    $newheight=$_GET['height'];
    $newwidth=$_GET['width'];
    }
if($_GET['width']>0&&$_GET['height']==0)
    {
    $newwidth=$_GET['width'];
    $newheight=$row['height']*($_GET['width']/$row['width']);   
    }

if($newheight>0&&$newwidth>0)
    {
    $newheight=floor($newheight);
    $newwidth=floor($newwidth); 
    $image=imagecreatefromstring($content);
    $newimage=imagecreatetruecolor($newwidth, $newheight);
    imagecopyresampled($newimage, $image, 0, 0, 0, 0, $newwidth, $newheight,$row['width'], $row['height']);
    header("Content-type: image/jpeg");
    imagejpeg($newimage);
    die;
    }
header("Content-type: $filetype");

echo ($content);

Answer 2

You can do a php script that can resize the images in the fly and use it something like this

/image-resizer.php?source=path-to-the-image-here&width=x&height=x