WP响应式图像-上传自定义图像大小

时间:2017-06-25 作者:KBT

在过去的几周里,我一直在努力寻找解决问题的方法,但运气不好。我发现我的主题和WP都无法创建正确的响应图像。这尤其适用于PNG文件,这些文件不但没有变小,反而变大了。

例如,如果我上传大小为12kb的PNG,WP和我的主题创建的文件的大小是原来文件的3-4倍,即使分辨率比原来的文件小。

现在,我在我的主题中禁用了这个自适应图像系统,并且找到了一种通过使用自定义代码禁用WP创建文件的方法。然而,我想要实现的是上传我自己定制大小的图像,而不是依赖WP或其他代码来生成更小或更大的图像。

是否有人知道一种解决方案如何覆盖WP并使其提供手动上载的自定义大小的图像srcset ... 我想实现这一点,首先是因为我可以制作不同大小的更好的优化图像(与WP使用的算法相比),其次我希望我的图像托管在CDN上。

提前谢谢。

1 个回复
SO网友:Johansson

生成的大小比原始图像大的原因是压缩的工作方式。

例如,如果上载的低质量图像大小为50kb,但WordPress的JPG质量设置为100,则缩略图的大小将大于原始图像,因为WordPress没有压缩缩略图。可以使用jpeg_quality 过滤器:

add_filter(\'jpeg_quality\', function($arg){ return 90; });
您可以减小该值(这也会降低质量)以节省更多空间。我不知道PNG文件有什么挂钩,但有一些插件可以为您手动压缩这些文件,例如Compress PNG & JPG imagesCompress PNG for WP.

如果您熟悉如何生成自己的响应图像,则可以手动生成自己的响应图像srcset 作品看看这个例子:

<img 
    src="<?php get_the_post_thumbnail_url( $post_id,\'thumbnail\' ); ?>"
    srcset="
        <?php the_post_thumbnail_url( \'medium\' ); ?> 700w, 
        <?php the_post_thumbnail_url( \'large\' );?> 1600w" 
    sizes="
        (max-width:700px) 700px,
        (min-width:701px) 1600px" 
    alt="<?php the_title(); ?>"
/>
这样,您可以根据主题完全控制图像及其行为。

此外,在响应性方面,您可能需要确保为内容定义了宽度,以便WordPress可以决定断点。这是由一个名为$content_width:

if(!isset($content_width)) {
    $content_width = 700;
}
可通过主题设置functions.php 文件

结束

相关推荐

Responsive Images

是否有本机功能可以根据屏幕分辨率显示帖子缩略图或图库图像的正确响应图像大小?通常我使用:1、自定义图像大小:function customImageSetup () { add_theme_support( \'post-thumbnails\' ); add_image_size(\'grid_1 mini square\', 60, 60, TRUE); add_image_size(\'grid_2\', 160); add_image_size(\'