Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 30, 2019 at 2:30 pm #1060491
    TanSmi

    Dear team Kriesi,

    I have a big problem with loading times of my site and as I know it is due to that many pictures and I know I have to work on it by myself. So I also will try again to get pictures smaller and everything, but I noticed something, which I do not understand:
    Enfold is creating various image sizes on upload, so I thought the reason behind this is also to choose the best image size based on how big the actual viewport is. So for example if an image is 800px width on desktop view, it should be on a half as big screen also have the size or at least the next available small size. But when I examine sizes with the console it seems like it is always loaded the big image. Can that be true?

    I am attaching a link to the site so you can see what I mean.

    Another example is the news feed thumb picture (in the footer) which is displayed as 28×28 but loaded a waaay to big image. How can I change this?

    I mean, I know for general pictures there is the possibility in screen options to hide on certain screen sizes so I could hide it and make a new element and load this only for smaller image sizes – but is this the propper way to do it?

    Thanks for an input,
    TanSmi

    February 3, 2019 at 7:15 pm #1062352
    Basilis

    Hey TanSmi,

    The images are been generated so they can be used in different sections, portfolio etc etc.

    You can disable any size that you think you do not need from https://kriesi.at/support/topic/disbling-multiple-image-sizes-generation-is-it-detrimental-to-enfold/

    Best regards,
    Basilis

    February 3, 2019 at 8:08 pm #1062385
    TanSmi

    Thank you Basilis,

    but I am not quite sure if you understood what I meant. I know I can disable sizes (and already did) and I also know I can choose different sizes in section etc. but my question is for example if I choose a certain size – let’s say for a gallery picture – how does this size adapt in tablet and mobile view? And can I control this? Or would it be better always to create several elements of the same picture and hide the bigger one in screen options for mobile, hide the smaller one for desktop and so on?

    And another question because of retina displays – should the size chosen for mobile always be doubled?

    Also for some parts actually I cannot define picture sizes like for news feed preview pictures for example. As I said the preview pictures are tiny like 28×28 but I got the impression it is loaded a bigger picture.
    Do you understand my issues?

    Thanks, TanSmi

    February 8, 2019 at 2:36 pm #1064583
    sdeceulaer

    Following this,
    I have been looking for solutions too.

    February 9, 2019 at 11:14 pm #1065027
    Mike

    Hi,
    I took a look into this issue and found a good explanation here with a function, unfortunately, the function in the article didn’t quite match the image sizes in Enfold so I tried to adjust it:

    function armd_resp_img_sizes( $attr, $attachment, $size ) {
    if ( is_array( $size ) ) {
        $attr['sizes'] = $size[0] . 'px';
    } elseif ( $size == 'widget') {
        $attr['sizes'] = '36px';
    } elseif ( $size == 'square') {
        $attr['sizes'] = '180px';
    } elseif ( $size == 'featured') {
        $attr['sizes'] = '1500px';
    } elseif ( $size == 'featured_large') {
        $attr['sizes'] = '1500px';
    } elseif ( $size == 'extra_large' ) {
        $attr['sizes'] = '1500px';
    } elseif ( $size == 'portfolio' ) {
        $attr['sizes'] = '495px';
    } elseif ( $size == 'portfolio_small' ) {
        $attr['sizes'] = '260px';
    } elseif ( $size == 'gallery' ) {
        $attr['sizes'] = '845px';
    } elseif ( $size == 'magazine' ) {
        $attr['sizes'] = '710px';
    } elseif ( $size == 'masonry' ) {
        $attr['sizes'] = '705px';
    } elseif ( $size == 'entry_with_sidebar' ) {
        $attr['sizes'] = '845px';
    } elseif ( $size == 'entry_without_sidebar' ) {
        $attr['sizes'] = '1210px';
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'armd_resp_img_sizes', 25, 3 );

    Best regards,
    Mike

    February 17, 2019 at 11:54 am #1067879
    TanSmi

    Thank you Mike for your try,

    I tried your function, but as it turned out, this leads to an even higher load time of the site so I changed it back again…

    I really don’t get how image sizes are selected and I would love to optimize it so that load times get better, maybe you have another suggestion?

    Kind regards,
    TanSmi

    February 19, 2019 at 3:28 am #1068723
    Mike

    Hi,
    WordPress creates a srcset of images and lets the browser pick the one it wants to use. You could control the image sizes with the Simple Image Size plugin.
    Another option would be to disable the images srcset, Try adding this code to the end of your functions.php file in Appearance > Editor:

    //disable responsive images srcset
function disable_srcset( $sources ) {
    return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );

    Best regards,
    Mike

    February 19, 2019 at 7:52 pm #1069069
    sdeceulaer

    Isn’t the images srcset what you want to be able to load images in the right size according to the browser window? I would not switch it off

    It is default by wordpress
    but it is not used when adding images when using the ALB

    February 20, 2019 at 1:49 am #1069234
    Mike

    Hi,
    The srcset is being used for the news thumbnails in your footer, this is the element we are talking about right? If you want to control the sizes in the srcset then the Simple Image Size plugin will allow you to do this.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.