A lot of users have allready good image editors to optimize the jpgs for web with the wanted and for each image best compression rate.
Many images are not critical and therefore tolerate higher compression rates.
On uploading images – enfold genereates the calculated formats from the opend jpg and does not set a compression rate. So it is like you save a jpg with zero compression ( in photoshop f.e. quality 12 : maximum )

the original code you can find in functions.php was since line 236:

so you can influence that on setting a compression rate in your child-theme functions.php
( here in my example 65% – but in most cases a 45% will be ok too )

 function av_return_100(){ return 65; }
  add_filter('jpeg_quality', 'av_return_100');
  add_filter('wp_editor_set_quality', 'av_return_100');

Then
Whether a format provided by Enfold ( functions.php lines 178ff ) is generated can be influenced again by means of a snippet in the child-theme functions.php:

Some formats are needed by Enfold because they are used in the backend. The formats you want to keep then comment out analogous to the widget format.

// Disable loads of Enfold & WP image sizes upon upload
add_action('init', 'remove_enfold_image_sizes');
function remove_enfold_image_sizes() {
// do NOT remove widget size, is used in backend portfolio items!
// remove_image_size('widget');
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
  remove_image_size('shop_gallery_thumbnail');
}

and if you like to do that with WP image formats too:

// Remove unneeded WP image sizes
add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' );
// Remove default image sizes here. 
function prefix_remove_default_images( $sizes ) {
// do NOT remove small and medium sizes, they are used in backend Media Library!
// unset( $sizes['small']); // 150px
// unset( $sizes['medium']); // 300px
 unset( $sizes['large']); // 1024px
 unset( $sizes['medium_large']); // 768px
 return $sizes;
}

BUT:
However, if you add this to an existing installation, you would have to recalculate your thumbnails afterwards.
There are small plugins that you can use temporarily for this action. Whereby you should make sure that the omitted formats are also deleted then.

in former times i used this : Force Regenerate Thumbnails
does that on recalculating.

But maybe a newer Plugin will be better – this seems to be from an image expert and will do the job too: reGenerate Thumbnails Advanced

what is your code you inserted to copy right input filed?

Did you pay attention of the jQuery Migrate Plugin settings: load 1.12.4 legacy jQuery

but you can do something that will not disturb those menu-item-ids.
You can give an Id and Alt attribute to the anchor itself.

But i had to find a way that we will not have duplicate ids then – you see the problem if you put this to your child-theme functions.php

the (hamburger menu items anchors will have the same ids – and if the menu-link goes in a one-pager to that ID – . . . . .… etc. pp.
maybe it is on SEO Purpose more important to have only the alt Attribute to that link!!!:
Why must it be an ID that was tracked by Google Analytics? Arn’t there other possibilities.

function set_attributes_to_menu_links(){
?>
<script>
(function($){
  $(document).ready(function(){  
    $('#avia-menu .menu-item a').each(function(){
      var menuName = $(this).find('>.avia-menu-text').text();
      var customID = menuName.replace(/\s+/g, '_').toLowerCase();
      $(this).attr('alt', menuName); 
      $(this).attr('id', customID);    
    });
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_attributes_to_menu_links');

just look to a enfold layout with developer tools of your browser- you can use that html as well:

<div class="flex_column av_one_half first">
	<label>[text* your-name  placeholder "Your first and last name * "] </label> 
</div>
<div class="flex_column av_one_half">
	<label> [email* your-email placeholder "your E-mail address *"] </label>
</div>

<div class="flex_column av_one_full"> <label>[text* your-subject  placeholder "Your Subject *"] </label> </div>

Here on that example it is with placeholder text for the input fields. But this is not necessary.
Just place the given content of contact form 7 inbetween these divs

maybe you style your layout on a post first with only columns in advanced layout builder and look to this post on your browser with dev tools
f.e. this is the needed code for 1/3 – 2/3

<div class="flex_column av_one_third first">
   content from contact form 7
</div>
<div class="flex_column av_two_third">
     content from contact form 7
</div>

and you are shure that you are not affected by this: https://kriesi.at/support/topic/problems-after-updating-to-wordpress-5-6-read-this-first/

to have the shortcode option on polylang first add this to your child-theme functions.php:

function polylang_shortcode($atts, $content = null){
	if (empty($content))
	return '';
	extract( shortcode_atts( array('lang' => ''), $atts ) );
	if (empty($lang))
	return "<h3>You must specify 'lang' using shortcode: polylang</h3>";
	return ($lang == pll_current_language()) ? $content : '';
}
add_shortcode('polylang', 'polylang_shortcode');

after that you can insert this :
[polylang lang="en"]english content[/polylang][polylang lang="de"]deutscher Inhalt[/polylang][polylang lang="nl"]Nederlandse inhoud[/polylang]

on your link on top there is another interesting snippet – it will insert the oportunity to choose the orderby option on each alb.
https://kriesi.at/documentation/enfold/post-slider/#how-to-add-an-orderorderby-option-to-the-blogpost-sliderportfoliomasonry-grid-element
then take two blog posts for the newest posts of “Einsätze” and “Neuigkeiten” and for the last one only the randomized one a post slider?
the two show as grid with one column.

On the postslider you can choose the offset not to show duplicate post on the page.
Randomize only that slider

https://webers-testseite.de/jakob/

PS : mit dem Snippet oben, könnt ihr dann natürlich auch drei post-slider nehmen.
die zusätzlichen Optionen sind unten platziert:

• This reply was modified 5 years, 3 months ago by Guenni007.

mediaelement-and-player.min.js is part of WordPress – so i guess on one of the last updates ( and as i said i did not update to WP5.6) there must be a sourcecode difference to older WP Versions.

these are my two sites ( backgroud-video on slider and on color-section) :
https://webers-testseite.de/mute-unmute-video-slide/
https://webers-testseite.de/mute-unmute/

And you are right – that on safari this did not work – with exactly your error log. i tested this on former times on safari too and it worked. So something must have changed in the source code either Enfolds, WordPress or Safari. These Sites above are from 2019-02-13 and color-section site from : 2018-05-01.
By the way: the domain above is still on WP 5.5.3

If not today when then one should do something good to a Ludwig.
* Ludwig v. Beethoven baptized on 17.12.1770

best whishes from Bonn to the rest of the world ;)

is this an actual Enfold Version?
this is not the actual Version fo TinyMCE !

by the way : how did you insert images here on board – i only see on source-code your links to your posted images.
My images you can see above on the answers.

ok – you got a slideshow – selector is a bit in dependency what kind of Caption you use ( framed etc)

if you only like to have it not vertically centered then Rikards code is to use.
If you want to influence the distance between : avia-caption-title and avia-caption-content
you can use:

.postid-3540  .slideshow_align_caption .avia-caption-title {
    margin-bottom: 20px !important;
}

but the code ( if your postid is correct ) had to work too:
here a testpage with only #top h2

maybe you have activated the option : force inline-svg that will transform all : <img src="image-source.svg" /> to svg itself
then svgs as inline svg needs absolute dimension settings – otherwise they will have 0x0px dimension :

img[src*=".svg"], svg {
    width: 2500px;
    display: block;
}

the front-end width is then done by surrounding container.

i guess you had to help her – she ( or he – could be both with that nick) – only 2 postings on her history. Maybe that is hard stuff for a beginner