在为移动网站提供之前更改图像宽度

Question

我有一个桌面版网站，其中使用了 500*500 大小的图片。我在我的移动网站上使用相同的图片。

手机下载如此大的图片需要花费大量时间。如果我在 <img> 中指定 width & height 属性，它只是以指定的大小显示它，但它会下载原始图像。

最好的处理方法是什么？我无法手动更改所有数千张图片的大小并上传到不同的文件夹。

在 css 中分配 max-width 属性是否有效？

Answer 1

对于您的问题，您可以使用一些 JS 计算图像高度 - 宽度并相应地创建 URL 并分配给 img 标签。

假设服务器上的 photos 目录下有一张名为 1.jpg

的照片

photo.php

<?php
require 'ImageResize.php';

header('Content-Type: image/jpeg');
if(file_exists('photos/'.$_GET['id'].'.jpg')){

    $image = new ResizeImage();
    $image->load('photos/'.$_GET['id'].'.jpg');
    $image->resize($_GET['width'], $_GET['height']); //25-width, 30-height
    $image->output();
}

index.html

<img src="photo.php?id=1&width=25&height=30"/>

ImageResize.php

http://pastebin.com/mTRqfgMJ

Answer 2

不，max-width 属性不会改变任何东西：您的浏览器必须下载 src 属性中给出的图像的所有内容才能调整大小。如果你想要一个无尺寸的图片，你用另一个名字和你想要的尺寸创建它，那么 css 可以为你做一个很好的工作。

<!--Replace...-->
<img src=imgurl>
<!--...by:-->
<span id=someid></span>

然后在您的样式表中添加：

#someid{
    display: inline-block;
    height: 500px;
    width: 500px;
    background: url(imgurl) no-repeat;
}
/*next lines are gonna apply only if it's a mobile browser (css3)*/
@media handheld{
    #imgurl{
        height: 250px;
        width: 250px;
        background: url(imgurl_resized_250) no-repeat;
    }
}

使用此代码，跨度将显示您的图片所需的大小。
PS: 您可以在gogole上找到一些可以帮助您调整图片文件夹大小的应用程序，也许Format Factory可以帮助您？

在为移动网站提供之前更改图像宽度

Changing image width before delivering for mobile website

css

php

image