diff --git a/.github/quickstart/template/image.svg b/.github/quickstart/template/image.svg
index 35eb3cf2..e4a2dc70 100644
--- a/.github/quickstart/template/image.svg
+++ b/.github/quickstart/template/image.svg
@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="480" height="99999" class="<%%= !animated ? 'no-animations' : '' %>">
 
   <defs><style><%%= fonts %></style></defs>
-  <style><%%= style %></style>
+  <style data-optimizable="true"><%%= style %></style>
 
   <foreignObject x="0" y="0" width="100%" height="100%">
     <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9c6c2beb..06df3409 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -227,7 +227,7 @@ The base structure for rendering looks like below:
 <svg xmlns="http://www.w3.org/2000/svg" width="480" height="99999" class="<%= !animated ? 'no-animations' : '' %>">
 
   <defs><style><%= fonts %></style></defs>
-  <style><%= style %></style>
+  <style data-optimizable="true"><%= style %></style>
 
   <foreignObject x="0" y="0" width="100%" height="100%">
     <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
diff --git a/source/templates/classic/image.svg b/source/templates/classic/image.svg
index c9c9287d..7ef05398 100644
--- a/source/templates/classic/image.svg
+++ b/source/templates/classic/image.svg
@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="<%= large ? 960 : columns ? '100%' : 480 %>" height="99999" class="<%= large ? 'large' : columns ? 'columns' : '' %> <%= !animated ? 'no-animations' : '' %>">
 
   <defs><style><%= fonts %></style></defs>
-  <style><%= style %></style>
+  <style data-optimizable="true"><%= style %></style>
 
   <foreignObject x="0" y="0" width="100%" height="100%">
     <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" class="items-wrapper">
diff --git a/source/templates/classic/partials/skyline.ejs b/source/templates/classic/partials/skyline.ejs
index e81d0f96..2187ca0a 100644
--- a/source/templates/classic/partials/skyline.ejs
+++ b/source/templates/classic/partials/skyline.ejs
@@ -23,7 +23,7 @@
               </div>
             </div>
             <% { const n = plugins.skyline.animation.length, width = plugins.skyline.width, height = plugins.skyline.height %>
-              <style>
+              <style data-optimizable="true">
                 @keyframes skyline-animation-frame {
                   100% { transform: translateX(-100%); }
                 }
diff --git a/source/templates/classic/partials/stackoverflow.ejs b/source/templates/classic/partials/stackoverflow.ejs
index 25429253..91802ba7 100644
--- a/source/templates/classic/partials/stackoverflow.ejs
+++ b/source/templates/classic/partials/stackoverflow.ejs
@@ -41,7 +41,7 @@
         </section>
       </div>
       <% if (plugins.stackoverflow.lines) { %>
-        <style>
+        <style data-optimizable="true">
           .stackoverflow .body {
             display: -webkit-box;
             -webkit-box-orient: vertical;
diff --git a/source/templates/repository/image.svg b/source/templates/repository/image.svg
index 5ae88790..07eb95ba 100644
--- a/source/templates/repository/image.svg
+++ b/source/templates/repository/image.svg
@@ -2,7 +2,7 @@
 
   <defs><style><%= fonts %></style></defs>
 
-  <style>
+  <style data-optimizable="true">
     <%= style %>
   </style>
 
diff --git a/source/templates/terminal/image.svg b/source/templates/terminal/image.svg
index 69ac2f66..1002d4f9 100644
--- a/source/templates/terminal/image.svg
+++ b/source/templates/terminal/image.svg
@@ -6,7 +6,7 @@
 
   <defs><style><%= fonts %></style></defs>
 
-  <style>
+  <style data-optimizable="true">
     <%= style %>
       .stdin, .stdout {
         animation-duration: <%= meta.animations.stdin %>s;