在为移动网站交付之前更改图像宽度答案

【问题标题】：Changing image width before delivering for mobile website在为移动网站交付之前更改图像宽度
【发布时间】：2015-01-06 14:12:23
【问题描述】：

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

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

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

在 css 中分配 max-width 属性可以完成这项工作吗？

【问题讨论】：

为什么 php 不能在脚本中将它们全部更改并放在不同的文件夹中？查看代码示例 - github.com/Intervention/image
是的，这是可能的，让我检查一下。并感谢您的快速回复
如果您使用的是引导 css，请尝试将 class="img-responsive" 赋予图像标签。
@PavithraAshwath 不会只更改图像显示大小而不更改下载大小吗？
css-tricks.com/… 这也可能有用。

标签： php css image

【解决方案1】：

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

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

照片.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

【讨论】：

将新的图像大小也存储在服务器上并在重新处理之前检查该图像大小是否存在不是更有效吗？
答案已经足够好了，唯一的问题是，它不会影响加载时间吗？
不，如果您的服务器足够好，它不应该产生影响，它也会使您的网站响应，如果您使用预定义的图像大小，您最终会做一些自适应网站仅限分辨率。
嘿，名称中带有“空白空间”的图像无法加载，尝试用 %20 替换空白，但没有成功。任何想法为什么它无法加载此类图像？
试试下面，<img src="photo.php?id=image%20with%20space.png&width=25&height=30"/>if(file_exists('photos/'.urldecode($_GET['id'])))

【解决方案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;
    }
}

使用此代码，span 将显示您所需大小的图片。
PS：您可以在 gogole 上找到一些可以帮助您调整图片文件夹大小的应用程序，也许是 @ 987654321@可以帮到你吗？

【讨论】：