Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1351864

    Hi,
    Original image uploaded into the Medialibrary:
    100KB
    1580 x 860px

    Enfold registered image size “1500×758”:
    600KB

    The Enfold image has SIX times more pageload / filesize then the original.
    This for sure is nothing that makes any sense.

    Questions:
    1: Ho do i stop this behaviour?
    2: How do i fix this for all the 4160 images i already uploaded?

    #1351873

    Looked deeper:

    This is what i added:

    
    [av_gallery ids='27745' style='thumbnails' preview_size='no scaling' crop_big_preview_thumbnail='avia-gallery-big-no-crop-thumb' thumb_size='portfolio_small' columns='5' imagelink='lightbox' link_dest='' lightbox_text='caption' lazyload='animations_off' img_scrset='' html_lazy_loading='enabled' alb_description='' id='' custom_class='' template_class='' av_uid='av-rgbict4' sc_version='1.0' admin_preview_bg='']

    This is what i get and this is definitely not what it supposed to be
    One image added, got 4 different in my HTML that bloats my pageload

    <a href="http://127.0.0.1/wp-content/uploads/testimage-97-1.jpg" data-rel='gallery-1' data-prev-img='http://127.0.0.1/wp-content/uploads/testimage-97-1.jpg' class='lightbox ' data-onclick='4' title='' itemprop="thumbnailUrl" ><img loading="lazy" class="wp-testimage-27902 avia-img-lazy-loading-27902" data-avia-tooltip='' src="http://127.0.0.1/wp-content/uploads/testimage-97-1-260x185.jpg" width="260" height="185" title='' alt='' /><div class='big-prev-fake'><img loading="lazy" class="wp-testimage-27902 avia-img-lazy-loading-27902" width="1583" height="800" src="http://127.0.0.1/wp-content/uploads/testimage-97-1.jpg" title='' alt='' srcset="http://127.0.0.1/wp-content/uploads/testimage-97-1.jpg 1583w, http://127.0.0.1/wp-content/uploads/testimage-97-1-1030x521.jpg 1030w, http://127.0.0.1/wp-content/uploads/testimage-97-1-80x40.jpg 80w, http://127.0.0.1/wp-content/uploads/testimage-97-1-768x388.jpg 768w, http://127.0.0.1/wp-content/uploads/testimage-97-1-1536x776.jpg 1536w, http://127.0.0.1/wp-content/uploads/testimage-97-1-1500x758.jpg 1500w, http://127.0.0.1/wp-content/uploads/testimage-97-1-705x356.jpg 705w" sizes="(max-width: 1583px) 100vw, 1583px" /></div></a>

    1: When i add a masonry gallery with “portfolio smalll 260 x 185” i see a gallery with thumbnails.
    Every thumb should be 260 x 185. Right?

    2: When the thumbnail is linked via lightbox with the big image, the image should be loaded when a user clicks on it (because this is what a link does)
    Not before, Right?

    Weird:
    – About 50% of all images do not show the original image like i defined in my functions.php
    They are like image-1500×710.jpg” or 1500×550″ or “1500×786″ or 1500×758”

    This is absolutely not understandable

    This is the code i found in some other thread where the user wanted to see the images in the lightbox in original size and so i want too:

    // Bilder in Galerie in Lightbox in Originalgröße anzeigen
    function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta){
        $link = wp_get_attachment_image_src($attachment->ID, "full");
        return $link;
    }
    add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);
    
    function avia_change_masonry_thumbnail_link($size) {
      return "full";
    }
    add_filter('avf_avia_builder_masonry_lightbox_img_size', 'avia_change_masonry_thumbnail_link', 10, 1);
    #1355178

    Hi!

    Please go to Enfold theme options > Performance and disable “Responsive Images” to remove srcset from HTML then please refer to Ismael’s post here – https://kriesi.at/support/topic/image-file-sizes-2/#post-1325856.

    Regards,
    Yigit

    #1355193

    Hello Yigit,
    Sorry, but i didnt get it.
    Problem one:
    Filesize of small version is bigger than the original.
    You gave me the solution described in Ismaels post
    (Although i dont understand how a smaller version can have bigger filesize than the big one – but OK. )

    Problem two:
    Although i defined in my functions.php that the modal window / lightbox should only load the original, precompressed file Enfold seems to generate at least 4 versions.

    Can we, for a better understanding, walk through the single questions?
    1: Is the code i have in my functions.php (see above) correct?
    2: Why does Enfold still generate multiple versions?
    3: Is this conclusion correct?: “The more responsiveness, the more pageload“?

    Your advices:
    1: There are three “checkboxes” (Which arent in fact checkboxes).
    Which one do i have to disable?
    2: When a “checkbox” is already blue and the added text says “Check to ENable theme support for responsive images ” it is very confusing.
    (Unfortunately this kind of misleading translation is seen often in your theme)
    Please tell me which “checkbox” i need to set and if i need to set it on “blue” or “grey” and please let me know what happens when i do.
    3: Ismaels Post did not answer my second question:
    How do i fix this for all the 4160 images i already uploaded?”
    What will happen with all these unwanted image versions when i disable “Responsive images”?
    Will they disappear from my server by disabling?
    If not – how do i get them removed from the server? I dont want my webspace bloat by unused files.

    Kind regards
    Elvira

    #1355204

    This is the old story – often discussed here on board. On uploading images to the media library – the images are uncompressed ( jpgs do have that indeed – a compression ratio ) and then the new file-sizes generated by Enfold are calculated on that uncompressed source. Because Enfold code does not compress these generated files – the file-size is for the bigger images (1500px x 630px etc. ) often higher than the uploaded optimized jpgs.

    Now what can we do against this. – We can change that behavior on Enfold by a child-theme functions.php snippet:

    add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
    add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
    function avf_set_quality_mod($quality) { $quality = 55; return $quality;}

    Unfortunately, this snippet does not affect existing images in the media library. Here you would have to recalculate the thumbnails all over again. There are some plug-ins for this. I use the one provided by shortpixel. : Link

    svgs – and i guess pngs will be skipped.

    After recalculation you can remove the plugin. The snippet above will then compress each uploaded new image.

    PS: Sorry – i did not follow Yigits link – so it only differs in the amount of compression. That is up to you what you need. If you are a photographer with f.e. fine color – gradients ( like skin tones ) or sharp contrasts you had to choose a less compression level.

    see here an older post of mine with the plugin illustration: https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1271808
    in addition it gives you a code to hamper generating of all enfold image_sizes. But read comments on the code to understand that it is not advisable to suppress all image_sizes.

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