CINXE.COM

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <noscript><style>form.antibot * :not(.antibot-message) { display: none !important; }</style> </noscript><style>#block-ae2024-cheeseburgermenu {--cheese-aside-bg-color: rgba( 203, 188, 150, 1);--cheese-aside-text-color: rgba( 0, 0, 0, 1);--cheese-main-bg-color: rgba( 203, 188, 150, 1);--cheese-main-text-color: rgba( 0, 0, 0, 1);--cheese-trigger-color: rgba( 203, 188, 150, 1);--cheese-trigger-bg-color: rgba( 33, 33, 33, 1);--cheese-scrollbar-color: rgba( 180, 245, 253, 1);}</style> <style>@media all and (min-width: 480px) {#block-ae2024-cheeseburgermenutrigger{ display:none; }}</style> <meta name="Generator" content="Drupal 10 (https://www.drupal.org)" /> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/core/misc/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="alternate" hreflang="en" href="https://www.adamevertsson.se/en/articles/automatic-image-compression-drupal" /> <link rel="canonical" href="https://www.adamevertsson.se/en/articles/automatic-image-compression-drupal" /> <link rel="shortlink" href="https://www.adamevertsson.se/en/node/6" /> <title>Automatic image compression in Drupal | adamevertsson.se</title> <link rel="stylesheet" href="/themes/contrib/ae2023/css/simple-css/simple.css"> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/align.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/fieldgroup.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/container-inline.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/clearfix.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/details.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/hidden.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/item-list.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/js.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/nowrap.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/position-container.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/reset-appearance.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/resize.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/system-status-counter.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/system-status-report-counters.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/system-status-report-general-info.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/system/components/tablesort.module.css?sroby2" /> <link rel="stylesheet" media="all" href="/modules/contrib/antibot/css/antibot.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/filter/filter.caption.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/media/filter.caption.css?sroby2" /> <link rel="stylesheet" media="all" href="/modules/contrib/cheeseburger_menu/css/cheeseburger_menu.css?sroby2" /> <link rel="stylesheet" media="all" href="/core/themes/stable9/css/core/assets/vendor/normalize-css/normalize.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/contrib/ae2023/css/components/node.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/action-links.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/breadcrumb.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/button.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/container-inline.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/custom.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/details.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/exposed-filters.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/field.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/form.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/icons.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/inline-form.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/item-list.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/link.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/links.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/menu.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/more-link.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/pager.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/tabledrag.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/tableselect.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/tablesort.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/tabs.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/textarea.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/ui-dialog.css?sroby2" /> <link rel="stylesheet" media="all" href="/themes/custom/ae2024/css/components/messages.css?sroby2" /> </head> <body class="path-node page-node-type-article"> <a href="#main-content" class="visually-hidden focusable skip-link"> Skip to main content </a> <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas> <div class="layout-container"> <header role="banner"> <div class="region region-header"> <div id="block-ae2024-site-branding" class="block block-system block-system-branding-block"> <a href="/en" rel="home" class="site-logo"> <img src="/themes/contrib/ae2023/images/logos/logo_white.svg" alt="Home" fetchpriority="high" /> </a> <div class="site-slogan">A blog that brings order to the creative chaos.</div> </div> <nav role="navigation" aria-labelledby="block-ae2024-mainmenu-menu" id="block-ae2024-mainmenu" class="block block-menu navigation menu--main-menu"> <h2 class="visually-hidden" id="block-ae2024-mainmenu-menu">Main menu</h2> <ul class="menu"> <li class="menu-item"> <a href="/en/tag/drupal" data-drupal-link-system-path="taxonomy/term/1">Drupal</a> </li> <li class="menu-item"> <a href="https://www.adamevertsson.se/sv" title="To the Swedish version of the site">Swedish</a> </li> <li class="menu-item"> <a href="/en/about-adam-evertsson" data-drupal-link-system-path="node/9">About Adam</a> </li> </ul> </nav> <div style="display: none;" class="block-cheeseburgermenu-container block-cheeseburgermenu-container--with-navigation block block-cheeseburger-menu" id="block-ae2024-cheeseburgermenu"> <div class="cheeseburger-menu__side-menu"> <div class="cheeseburger-menu__side-trigger" data-cheeseburger-close="true"><?xml version="1.0" encoding="utf-8"?>  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g id="Bounding_Boxes"> <path fill="none" d="M0,0h24v24H0V0z"/> </g> <g id="Rounded"> <path d="M18.3,5.71L18.3,5.71c-0.39-0.39-1.02-0.39-1.41,0L12,10.59L7.11,5.7c-0.39-0.39-1.02-0.39-1.41,0l0,0 c-0.39,0.39-0.39,1.02,0,1.41L10.59,12L5.7,16.89c-0.39,0.39-0.39,1.02,0,1.41h0c0.39,0.39,1.02,0.39,1.41,0L12,13.41l4.89,4.89 c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L13.41,12l4.89-4.89C18.68,6.73,18.68,6.09,18.3,5.71z"/> </g> </svg> </div> </div> <div class="cheeseburger-menu__main-navigation-area"> <div data-cheeseburger-id="menu-main" > <ul class="cheeseburger-menu__mainmenu"> <li class="menu-link cheeseburger-menu__item main__item"> <a class="cheeseburger-menu__item-label" href="/en/tag/drupal"> <span>Drupal</span> </a> </li> <li class="menu-link cheeseburger-menu__item main__item"> <a class="cheeseburger-menu__item-label" href="/en/about-adam-evertsson"> <span>Om Adam</span> </a> </li> <li class="menu-link cheeseburger-menu__item main__item"> <a class="cheeseburger-menu__item-label" href="https://www.adamevertsson.se/en"> <span>English</span> </a> </li> </ul> </div> </div> </div> <div id="block-ae2024-cheeseburgermenutrigger" class="block block-cheeseburger-menu block-cheeseburger-menu-trigger"> <div class="block-cheeseburgermenu__trigger-element" data-cheeseburger-id="block-ae2023-cheeseburgermenu"> <span></span> <span></span> <span></span> </div> </div> </div> </header> <div class="region region-highlighted"> <div data-drupal-messages-fallback class="hidden"></div> </div> <main role="main"> <a id="main-content" tabindex="-1"></a> <div class="layout-content"> <div class="region region-content"> <div id="block-ae2024-content" class="block block-system block-system-main-block"> <article data-history-node-id="6" class="node node--type-article node--promoted node--view-mode-full"> <div class="node__content"> <div class="field field--name-field-topimage field--type-entity-reference field--label-hidden field__item"> <img loading="lazy" src="/sites/default/files/styles/wide/public/2023-09/plastic-bottles-115069_1920.jpg.webp?itok=QpN1xZRv" width="1090" height="659" alt="Compressed plastic bottles" class="image-style-wide" /> </div> <h1 class="page-title"> Automatic image compression in Drupal </h1> <footer class="node__meta"> <div class="node__submitted"> Published by Adam Evertsson on <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2020-02-11T14:06:00+01:00" title="Tuesday, February 11, 2020 - 14:06" class="datetime">Tue, 02/11/2020 - 14:06</time> </span> </div> </footer> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>"A picture is worth more than a thousand words". True, but a large picture will make your webpage slower, which will affect your SEO in a negative way. And eat away at your servers space, megabyte after megabyte.</p><p>There are several ways to remedy such a behaviour, but one way is to use image compression services to save space. With online services or programs on your computer you can remove unnecessary information and compress images with sometimes up to 80% gain.</p><p>Here I'm going to show you how to integrate the TinyPNG service in your Drupal installation which automatically compresses your images.</p><h2>TinyPNG</h2><p>There are many different services on the internet, but one of the best I have found is TinyPNG - and it's supereasy to implement on your Drupal site.</p><p>It's also super easy to see if you can benefit from using their service. If you visit their Page Analyzer and enter your site url, you will be presented with statistics. If you are over 25% savings, I would suggest you start using a compression service.</p><article class="media media--type-image media--view-mode-default"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"> <img loading="lazy" src="/sites/default/files/styles/large/public/2023-09/page%20analyzer%20tinypng.png?itok=CwD1JKiH" width="480" height="190" alt="Statistics over how much your website can benefit from using an image compression service, in this case TinyPNG" class="image-style-large"> </div> </div> </article> <h2>Step 1: Installing the Drupal module</h2><p>By using composer to install the module and the TinyPNG library, it's super easy to get started.</p><p>Type</p><pre>composer require drupal/tinypng</pre><p>in your terminal. Composer downloads the module, places it in the correct folder and downloads its dependency - TinyPNG PHP Library - and places it in the vendor folder.</p><p>Head into your Drupal website and click Extend in the menu. Scroll down (or filter) to TinyPNG and activate the module. </p><h2>Step 2: Getting an API key</h2><p>API Key? What's that? Well, to make TinyPNG accept the requests from your website to the service you need an API key. It's a way of saying "howdy, can I get some service". It's also a way for TinyPNG to track how many images you get compressed per month. Don't worry, you get 500 for free every month, so unless you upload more that that, you're in the clear</p><p>If you should send more than 500 requests then you won't get access to the service until next month - or if you pay for the service. </p><p>For normal use, 500 requests should be enough.</p><p>Getting an API key couldn't be simpler. Just visit the developer section of Tinypng.com and enter your name and email. </p><p>You get an email with a link. Click it, and - boom! - you're in. On the page you can see your API key and also a counter that lets you know how many requests TinyPNG has processed using your unique API key.</p><article class="media media--type-image media--view-mode-default"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"> <img loading="lazy" src="/sites/default/files/styles/large/public/2023-09/tinypng_api_page.png?itok=5FVxoVa9" width="480" height="274" alt="Screenshot from TinyPNG's developer page with an API key" class="image-style-large"> </div> </div> </article> <h2>Step 3: Make the magic work in Drupal</h2><p>Click the <strong>Configuration</strong> link in Drupal's menu and look under <strong>Media</strong>. There you find <strong>TinyPNG Settings</strong>. Click it.</p><p>Now it's time to copy the API code you got from the TinyPNG service. Paste it into the field on the settings page and hit <strong>Save configuration</strong>.</p><article class="media media--type-image media--view-mode-default"> <div class="field field--name-field-media-image field--type-image field--label-visually_hidden"> <div class="field__label visually-hidden">Image</div> <div class="field__item"> <img loading="lazy" src="/sites/default/files/styles/large/public/2023-09/tinypng-settings.png?itok=7Bx7dAX0" width="480" height="263" alt="Screenshot from the settings page of TinyPNG inside Drupal" class="image-style-large"> </div> </div> </article> <h2>Step 4: Choose your compression method</h2><p>The module facilitates two different kinds of image compression: on upload or via Drupal's own Image Styles - or both. I myself use the uploading kind since I then know that I won't reach the monthly limit through the API. If I would use the image style version, then I could reach - and pass - the limit in a fast way since I manage a site with a lot of images. Sure, I don't need to use the image action on every single Image style I have in Drupal, but I sure would be tempted to do so. </p><p>If you choose to use the TinyPNG API whn uploading you get two options under <strong>Integration method</strong>: Download and Upload. They are the same, the only thing to remember is to use Upload on your local installation and Download on your live server. The help text says it all: "The download method requires that your site is hosted in a server accessible through the internet. The upload method is required on localhost." Though, personally, the names could be better. But anyway, it does the job.</p><h2>Step 5: Save some megabytes</h2><p>Well, actually there isn't a step 5. After installing the module with its dependencies, entering your API key there isn't much more. Just sit back, relax and watch the images shrink when uploading and/or showing them to the users making their experience on your website faster and better.</p><h2>Some numbers</h2><p>Here is also a comparison before and after using TinyPNG.</p><table><tbody><tr><td><strong>Type</strong></td><td> </td><td><strong>Before compression</strong></td><td> </td><td><strong>After compression</strong></td><td> </td><td><strong>Saved, %</strong></td></tr><tr><td>Image 1, PNG</td><td> </td><td>1.1 Mb</td><td> </td><td>267 Kb</td><td> </td><td>75%</td></tr><tr><td>Image 2, PNG</td><td> </td><td>1.1 Mb</td><td> </td><td>287 Kb</td><td> </td><td>75%</td></tr><tr><td>Image 3, PNG</td><td> </td><td>1.2 Mb</td><td> </td><td>269 Kb</td><td> </td><td>77%</td></tr><tr><td>Image 4, PNG</td><td> </td><td>985.7 Kb</td><td> </td><td>274.0 Kb</td><td> </td><td>72%</td></tr><tr><td>Image 5, PNG</td><td> </td><td>5.6 Mb</td><td> </td><td>1.5 Mb</td><td> </td><td>73%</td></tr><tr><td>Image 6, JPG</td><td> </td><td>3.5 Mb</td><td> </td><td>524 Kb</td><td> </td><td>84%</td></tr><tr><td>Image 7, JPG</td><td> </td><td>197 Kb</td><td> </td><td>104 Kb</td><td> </td><td>47%</td></tr></tbody></table></div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/en/tag/drupal" hreflang="und">drupal</a></div> <div class="field__item"><a href="/en/tag/modules" hreflang="und">modules</a></div> <div class="field__item"><a href="/en/tag/tinypng" hreflang="und">tinypng</a></div> <div class="field__item"><a href="/en/tag/image-compression" hreflang="und">image compression</a></div> </div> </div> <div id="prevnext"> <div id="prevnext-previous" class="prevnext-element previous"> <a href="/en/articles/drupalcamp-gothenburg-2012-10-years-later">Previous</a> </div> <div id="prevnext-next" class="prevnext-element next"> <a href="/en/articles/drupal-tricks-removing-rss-icon-drupal-and-getting-know-views-little-bit">Next</a> </div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <form class="comment-comment-form comment-form antibot" data-drupal-selector="comment-form" data-action="/en/comment/reply/node/6/comment" action="/antibot" method="post" id="comment-form" accept-charset="UTF-8"> <noscript> <div class="antibot-no-js antibot-message antibot-message-warning">You must have JavaScript enabled to use this form.</div> </noscript> <div class="field--type-text-long field--name-comment-body field--widget-text-textarea js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-wrapper" id="edit-comment-body-wrapper"> <div class="js-text-format-wrapper text-format-wrapper js-form-item form-item"> <div class="js-form-item form-item js-form-type-textarea form-type-textarea js-form-item-comment-body-0-value form-item-comment-body-0-value"> <label for="edit-comment-body-0-value" class="js-form-required form-required">Comment</label> <div class="form-textarea-wrapper"> <textarea class="js-text-full text-full form-textarea required resize-vertical" data-media-embed-host-entity-langcode="sv" data-drupal-selector="edit-comment-body-0-value" id="edit-comment-body-0-value" name="comment_body[0][value]" rows="5" cols="60" placeholder="" required="required" aria-required="true"></textarea> </div> </div> <div class="js-filter-wrapper js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-0-format" id="edit-comment-body-0-format"><div data-drupal-selector="edit-comment-body-0-format-help" id="edit-comment-body-0-format-help" class="js-form-wrapper form-wrapper"><a href="/en/filter/tips" target="_blank" data-drupal-selector="edit-comment-body-0-format-help-about" id="edit-comment-body-0-format-help-about">About text formats</a></div> <div class="js-filter-guidelines js-form-wrapper form-wrapper" data-drupal-selector="edit-comment-body-0-format-guidelines" id="edit-comment-body-0-format-guidelines"><div data-drupal-format-id="restricted_html" class="filter-guidelines-item filter-guidelines-restricted_html"> <h4 class="label">Restricted HTML</h4> <ul class="tips"> <li>Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id></li> <li>Lines and paragraphs break automatically.</li> <li>Web page addresses and email addresses turn into links automatically.</li> </ul> </div> </div> </div> </div> </div> <input autocomplete="off" data-drupal-selector="form-cvnbicruh-tx-hzbwdfpt4s75mpipvry3rllhf1qdbo" type="hidden" name="form_build_id" value="form-cVNBiCrUH-tX-hZbwdFpT4s75mPIPVRY3rLLhf1QDBo" /> <input data-drupal-selector="edit-comment-comment-form" type="hidden" name="form_id" value="comment_comment_form" /> <input data-drupal-selector="edit-antibot-key" type="hidden" name="antibot_key" value="" /> <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name"> <label for="edit-name">Your name</label> <input data-drupal-default-value="Anonymous" data-drupal-selector="edit-name" type="text" id="edit-name" name="name" value="" size="30" maxlength="60" class="form-text" /> </div> <div class="field--type-email field--name-field-e-mail field--widget-email-default js-form-wrapper form-wrapper" data-drupal-selector="edit-field-e-mail-wrapper" id="edit-field-e-mail-wrapper"> <div class="js-form-item form-item js-form-type-email form-type-email js-form-item-field-e-mail-0-value form-item-field-e-mail-0-value"> <label for="edit-field-e-mail-0-value" class="js-form-required form-required">E-mail</label> <input data-drupal-selector="edit-field-e-mail-0-value" type="email" id="edit-field-e-mail-0-value" name="field_e_mail[0][value]" value="" size="60" maxlength="254" placeholder="" class="form-email required" required="required" aria-required="true" /> </div> </div> <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Save" class="button button--primary js-form-submit form-submit" /> </div> </form> </section> </div> </article> </div> </div> </div> <aside class="layout-sidebar-first" role="complementary"> </aside> </main> </div> </div> <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","pathPrefix":"en\/","currentPath":"node\/6","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"fitvids":{"selectors":".video-filter\r,iframe","custom_vendors":["iframe[src^=\u0022https:\/\/youtu.be\u0022]"],"ignore_selectors":""},"ajaxTrustedUrl":{"\/en\/comment\/reply\/node\/6\/comment":true},"antibot":{"forms":{"comment-form":{"id":"comment-form","key":"8p7j68CoBiN3vf9f-cTcpUeQeOZZtAdiOr3uTkNbdVZ"}}},"user":{"uid":0,"permissionsHash":"7fe8a1d301900dc4138d19200e8271ba63fda239fcb1affbff4174b3d3da1aff"}}</script> <script src="/core/assets/vendor/jquery/jquery.min.js?v=3.7.1"></script> <script src="/core/assets/vendor/once/once.min.js?v=1.0.1"></script> <script src="/core/misc/drupalSettingsLoader.js?v=10.4.2"></script> <script src="/core/misc/drupal.js?v=10.4.2"></script> <script src="/core/misc/drupal.init.js?v=10.4.2"></script> <script src="/modules/contrib/antibot/js/antibot.js?sroby2"></script> <script src="/modules/contrib/cheeseburger_menu/js/cheeseburger_menu.js?v=1.x"></script> <script src="/core/modules/filter/filter.js?v=10.4.2"></script> <script src="/libraries/fitvids/jquery.fitvids.js?v=10.4.2"></script> <script src="/modules/contrib/fitvids/js/init-fitvids.js?v=10.4.2"></script> </body> </html>