1

I've been trying to find solution to my problem for the last couple of weeks without any luck. I've been finding that my theme and WP both fail to create proper responsive images. This especially goes for PNG files, which instead of getting smaller are actually getting bigger in size.

For example if I upload PNG with size 12kb, WP and my theme created files which were 3-4 times bigger in size even though the resolution was smaller than the original file.

Now I managed to disable this adaptive image system in my theme and I have found a way to disable WP creating files by using custom code. However, what I'd like to achieve is to upload my own custom sized images instead of relying on WP or some other piece of code to generate smaller or larger images.

Does anybody know of a solution how to override WP and make it deliver manually uploaded custom sized images with srcset ... I'd like to achieve this firstly because I can make better optimized images of different sizes (compared to algorithms used by WP) and secondly I want my images to be hosted on CDN.

Thanks in advance.

  • Hi. Welcome to WPSE. Please share your code with us so we can improve it. – Jack Johansson Jun 25 '17 at 20:24
1

The reason your generated size have larger size than the original image, is how the compression works.

If you for example upload a low quality image that is 50kb is size, but your WordPress has JPG quality set to 100, then the thumbnails will size larger than the original image, since WordPress is not compressing them. This can be change by using the jpeg_quality filter:

add_filter('jpeg_quality', function($arg){ return 90; });

You can decrease the value (that also reduces quality) to save more space. I'm not aware of any hooks for PNG files, but there are plugins that can manually compress these files for you, such as Compress PNG & JPG images or Compress PNG for WP.

You can manually generate your own responsive images, if you are familiar with how srcset works. Look at this example:

<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(); ?>"
/>

This way you can fully control your images and their behavior based on your theme.

Also, when it comes to responsiveness, you might want to make sure that you have defined a width for your content, so WordPress can decide the breakpoints. This is done by a global value called $content_width:

if(!isset($content_width)) {
    $content_width = 700;
}

Which can be set via your theme's functions.php file.

  • Hi Jack, thanks for your reply. I can't put the code from the theme as it proprietary code (eg it came with the theme itself). However, I have been discussing it with the developer, who then gave me another piece of code to prevent it from generating images. Before I did that though, I tried different qualities, and even dropping it down to 60 it still made PNGs larger in size. Is there really no way to completely disable auto generation of images and just letting it know which images to load from Uploads folder? – KBT Jun 26 '17 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.