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.

I’ve been using the Enfold theme for a number of years and my main project is https://www.westend.com

you can do that very similar to the footer – via the pseudo-container : before

i give a custom-class to the column it belongs to: background-outside
thats what the effect will be. And because that is impossible we transfer the background-image to its pseudo-container:

Setting is that you put in that container a background-image ( your grass – in your case now a white silhouette of grass )
because we do not want to see on page generation a background-image on the column itself we set it to size : zero

.flex_column.background-outside {
  background-size: 0px !important;
}

.flex_column.background-outside::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-image: inherit !important;
  background-repeat: repeat-x;
  background-position: top left;
  visibility: visible;
  top: -60px;
  background-size: auto 80px;
}

the shifting of 60px to top ( -60px ) had to be less than the height of the background-image ( here : 80px )

see: https://enfold.webers-webdesign.de/ryan2/

ps the next examples are made with a custom divider – the first on the column and the last on the color-section before
and because the dividers always face inwards, it was not trivial to orient them outwards in the case of the column.

Dear Enfold Team,
is there in the meanwihle another – enfold integrated – solution to filter masonry galleries, i.e. visitor can select wich group of pics are shown? Or do you still recommend plugins as the one mentioned above?

Thx a lot & best regards Tilman

Your button texts are not even displayed on the Safari desktop! – But when I try to reproduce the situation – my button text is displayed on the Safari desktop. So it must be a problem with one of your settings.

Try this in your quick css if that solves the problem :

try this first: ( maybe an !important is necessary )

.responsive #top .avia-button .avia_button_icon, 
.responsive #top .avia-button .avia_iconbox_title {
    display: inline-block;
    vertical-align: bottom;
}

By the way – the reason why the text in the buttons is not well placed: the font gothambook is the source for this.
and second: maybe your are satisfied with Montserrat – it is preinstalled on Enfold and looks very similar to Gotham !