某些设备上的图像模糊

Question

我的问题基本上是，此页面上的图像 - https://sawa-architecture.org/projects/ - 加载模糊，我找不到解决方案。虽然最初是模糊的（似乎只在较旧的 mac 和 pc 上，但当我在项目上应用过滤器时，图像再次清晰。

我尝试使用 wp-optimise 压缩图像。此外，尝试使用较小的图像，但没有解释为什么在我运行过滤器时加载正常。所以我很确定这一定与我的过滤器代码有关。

全部 name) ?>" 勾选/>name ?> 申请

    <div id="response">

             <?php wp_reset_postdata(); if ( have_posts() ) : ?>

                    <div class="container">

                                    <div class="container-grid projects-grid">

                                            <?php
                                            /* Start the Loop */
                                            while ( have_posts() ) :
                                                the_post();?>

                                                        <div class="grid-item">
                                                                <a href="<?= the_permalink() ?>">
                                                                    <?php
                                                                    if ( has_post_thumbnail() ) {
                                                                            the_post_thumbnail('thumbnail');
                                                                    }?>
                                                                    <h3><?= the_title() ?></h3>
                                                                </a>
                                                        </div>

                                            <?php endwhile;?>

                         </div><!--end container-grid-->

                     </div><!--end container-fluid-->
            <?php endif;  ?>

            </div>
    </div><!--end response-->

Answer 1

这个

    <div id="response">

                 <?php wp_reset_postdata(); if ( have_posts() ) : ?>

                        <div class="container">

                                        <div class="container-grid projects-grid">

                                                <?php
                                                /* Start the Loop */
                                                while ( have_posts() ) :
                                                    the_post();?>

                                                            <div class="grid-item">
                                                                    <a href="<?= the_permalink() ?>">
                                                                        <?php
                                                                        if ( has_post_thumbnail() ) {
                                                                                //the_post_thumbnail('thumbnail');
  the_post_thumbnail( 'medium' ); 
                                                                        }?>
                                                                        <h3><?= the_title() ?></h3>
                                                                    </a>
                                                            </div>

                                                <?php endwhile;?>

                             </div><!--end container-grid-->

                         </div><!--end container-fluid-->
                <?php endif;  ?>

                </div>
        </div><!--end response-->

更多关于：

//Default WordPress
the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

阅读文档https://developer.wordpress.org/reference/functions/the_post_thumbnail/