页面速度错误:“为缩放图像提供服务”

时间:2012-02-06 作者:Macxim

我在GTmetrix上进行了测试。com和我在页面速度(D或F)方面的成绩很差。更严重的错误如下:

Serve scaled images (grade F):
一些图像URL在HTML或CSS中的大小从1024x539调整为530x279。提供缩放图像可以节省70.3KB(减少73%)。

我该怎么做才能获得更好的成绩?我如何解决这个问题?如何防止HTML中的大小调整?上传到WP较小的图像是否更好?最好的解决方案是什么?

5 个回复
SO网友:Kyle

最好的方法是在上传之前调整它们的大小。

您还可以尝试使用此功能动态调整图像大小。

<?php
/*
 * Resize images dynamically using wp built in functions
 * Victor Teixeira
 *
 * php 5.2+
 *
 * Exemplo de uso:
 * 
 * <?php 
 * $thumb = get_post_thumbnail_id(); 
 * $image = vt_resize( $thumb, \'\', 140, 110, true );
 * ?>
 * <img src="<?php echo $image[url]; ?>" width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" />
 *
 * @param int $attach_id
 * @param string $img_url
 * @param int $width
 * @param int $height
 * @param bool $crop
 * @return array
 */
if ( !function_exists( \'vt_resize\') ) {
    function vt_resize( $attach_id = null, $img_url = null, $width, $height, $crop = false ) {

        // this is an attachment, so we have the ID
        if ( $attach_id ) {

            $image_src = wp_get_attachment_image_src( $attach_id, \'full\' );
            $file_path = get_attached_file( $attach_id );

        // this is not an attachment, let\'s use the image url
        } else if ( $img_url ) {

            $file_path = parse_url( $img_url );
            $file_path = $_SERVER[\'DOCUMENT_ROOT\'] . $file_path[\'path\'];

            // Look for Multisite Path
            if(file_exists($file_path) === false){
                global $blog_id;
                $file_path = parse_url( $img_url );
                if (preg_match("/files/", $file_path[\'path\'])) {
                    $path = explode(\'/\',$file_path[\'path\']);
                    foreach($path as $k=>$v){
                        if($v == \'files\'){
                            $path[$k-1] = \'wp-content/blogs.dir/\'.$blog_id;
                        }
                    }
                    $path = implode(\'/\',$path);
                }
                $file_path = $_SERVER[\'DOCUMENT_ROOT\'].$path;
            }
            //$file_path = ltrim( $file_path[\'path\'], \'/\' );
            //$file_path = rtrim( ABSPATH, \'/\' ).$file_path[\'path\'];

            $orig_size = getimagesize( $file_path );

            $image_src[0] = $img_url;
            $image_src[1] = $orig_size[0];
            $image_src[2] = $orig_size[1];
        }

        $file_info = pathinfo( $file_path );

        // check if file exists
        $base_file = $file_info[\'dirname\'].\'/\'.$file_info[\'filename\'].\'.\'.$file_info[\'extension\'];
        if ( !file_exists($base_file) )
         return;

        $extension = \'.\'. $file_info[\'extension\'];

        // the image path without the extension
        $no_ext_path = $file_info[\'dirname\'].\'/\'.$file_info[\'filename\'];

        $cropped_img_path = $no_ext_path.\'-\'.$width.\'x\'.$height.$extension;

        // checking if the file size is larger than the target size
        // if it is smaller or the same size, stop right here and return
        if ( $image_src[1] > $width ) {

            // the file is larger, check if the resized version already exists (for $crop = true but will also work for $crop = false if the sizes match)
            if ( file_exists( $cropped_img_path ) ) {

                $cropped_img_url = str_replace( basename( $image_src[0] ), basename( $cropped_img_path ), $image_src[0] );

                $vt_image = array (
                    \'url\' => $cropped_img_url,
                    \'width\' => $width,
                    \'height\' => $height
                );

                return $vt_image;
            }

            // $crop = false or no height set
            if ( $crop == false OR !$height ) {

                // calculate the size proportionaly
                $proportional_size = wp_constrain_dimensions( $image_src[1], $image_src[2], $width, $height );
                $resized_img_path = $no_ext_path.\'-\'.$proportional_size[0].\'x\'.$proportional_size[1].$extension;

                // checking if the file already exists
                if ( file_exists( $resized_img_path ) ) {

                    $resized_img_url = str_replace( basename( $image_src[0] ), basename( $resized_img_path ), $image_src[0] );

                    $vt_image = array (
                        \'url\' => $resized_img_url,
                        \'width\' => $proportional_size[0],
                        \'height\' => $proportional_size[1]
                    );

                    return $vt_image;
                }
            }

            // check if image width is smaller than set width
            $img_size = getimagesize( $file_path );
            if ( $img_size[0] <= $width ) $width = $img_size[0];

            // Check if GD Library installed
            if (!function_exists (\'imagecreatetruecolor\')) {
                echo \'GD Library Error: imagecreatetruecolor does not exist - please contact your webhost and ask them to install the GD library\';
                return;
            }

            // no cache files - let\'s finally resize it
            $new_img_path = image_resize( $file_path, $width, $height, $crop );         
            $new_img_size = getimagesize( $new_img_path );
            $new_img = str_replace( basename( $image_src[0] ), basename( $new_img_path ), $image_src[0] );

            // resized output
            $vt_image = array (
                \'url\' => $new_img,
                \'width\' => $new_img_size[0],
                \'height\' => $new_img_size[1]
            );

            return $vt_image;
        }

        // default output - without resizing
        $vt_image = array (
            \'url\' => $image_src[0],
            \'width\' => $width,
            \'height\' => $height
        );

        return $vt_image;
    }
}
把它放在你的主题函数中。php文件。您可以在主题中使用它,如下所示:

<?php $image = vt_resize(get_post_thumbnail_id(), \'\', 277, 115, true); ?>
    <img src="<?php echo $image[url]; ?>"  width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" />
本页概述了您可以采取的一些步骤,以进一步优化您的网站,并基于YSlow的建议。我强烈推荐W3 Total Cache和Yahoo的Smush。it插件。

http://wp.tutsplus.com/tutorials/10-quick-tips-optimizing-speeding-up-your-wordpress-site/

SO网友:Aces

最好让wordpress在第一时间创建上传时所需的所有大小。我总是尽量上传分辨率最高的文件。。

你可以使用http://wordpress.org/extend/plugins/additional-image-sizes-zui/ 要在wordpress媒体库中530x279等处创建图像。。。

SO网友:Geme

您可以使用一个名为“Adaptive Images for WordPress”的插件尝试一个简单的解决方案,该插件以透明和不显眼的方式调整并优化传送到移动设备的图像,从而显著减少总下载时间。它是设备和WordPress网站之间的过滤器。它实际上适用于所有类型的设备屏幕大小,尽管它主要针对移动环境。

SO网友:Md. Ehsanul Haque Kanan

您可以通过在上传之前调整图像大小来解决“服务缩放图像”错误。您可以使用Imsanity. 遵循以下步骤:

安装并激活插件Settings > Imsanity.Convert PNG to JPG 和BMP to JPG 选项,选择Yes.Save Changes 按钮您可以在右侧找到有关这些步骤的更多信息here.

SO网友:user2477139

您可以使用它,它非常有用且简单,可以通过前端直接进行压缩

https://vistosys.com/product/serve-scale-images-plugin/

结束

相关推荐

images are broken

我有一段代码,用于显示来自RSS提要的每篇帖子上的图像,这些图像将从yahoo images search获取,我将把这段代码粘贴到我的单曲中。php文件,这样它就会出现在我的帖子之后,我在其中一个网站上找到了这段代码,这段代码用于获取图像,但不是从yahoo获取图像,而是从不同的feed获取图像我使用的代码如下:- <?php include_once(ABSPATH.WPINC.\'/rss.php\'); // path to include script $f