Skip to content

Commit 930e20c

Browse files
RomeliumRomelium
committed
perf(web): improve performance and accessibility
1 parent 2858077 commit 930e20c

File tree

5 files changed

+37
-27
lines changed

5 files changed

+37
-27
lines changed

‎web/public/examples.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
.example p span {
3131
font-style: normal;
32-
color: #777;
32+
color: #595959;
3333
display: inline;
3434
white-space: nowrap;
3535
}
@@ -44,4 +44,10 @@ h2 {
4444
.example {
4545
min-width: 120px;
4646
}
47+
}
48+
49+
@media (prefers-color-scheme: dark) {
50+
.binary-img {
51+
background-color: white;
52+
}
4753
}

‎web/public/examples.html‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
<title>FrameSVG Examples</title>
88
<link rel="stylesheet" href="examples.css">
99
<link rel="stylesheet" href="style.css">
10+
<link rel="preconnect" href="https://raw.githubusercontent.com" />
11+
<meta name="description"
12+
content="Convert animated GIFs to animated SVGs with framesvg, a command-line tool and Python library. Leverages VTracer for true vector output, offering scalability and potential file size reduction.">
1013
</head>
1114

1215
<body>
@@ -20,50 +23,50 @@ <h1>FrameSVG Examples</h1>
2023
<h2>Coding Examples</h2>
2124
<div class="example-group">
2225
<div class="example">
23-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock Git.gif"
26+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock Git.gif"
2427
alt="Animated GIF showing code being written on Git">
2528
<p>Converted SVG (<span>Loading...</span>)</p>
2629
</div>
2730
<div class="example">
28-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock Git.svg"
31+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock Git.svg"
2932
alt="Animated SVG showing code being written on Git">
3033
<p>Converted SVG (<span>Loading...</span>)</p>
3134
</div>
3235
</div>
3336

3437
<div class="example-group">
3538
<div class="example">
36-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock GitHub.gif"
39+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock GitHub.gif"
3740
alt="Animated GIF showing code being written on Github">
3841
<p>Converted SVG (<span>Loading...</span>)</p>
3942
</div>
4043
<div class="example">
41-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock GitHub.svg"
44+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock GitHub.svg"
4245
alt="Animated SVG showing code being written on Github">
4346
<p>Converted SVG (<span>Loading...</span>)</p>
4447
</div>
4548
</div>
4649

4750
<div class="example-group">
4851
<div class="example">
49-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock VSCode.gif"
52+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock VSCode.gif"
5053
alt="Animated GIF showing code being written on VSCode">
5154
<p>Converted SVG (<span>Loading...</span>)</p>
5255
</div>
5356
<div class="example">
54-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock VSCode.svg"
57+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock VSCode.svg"
5558
alt="Animated SVG showing code being written on VSCode">
5659
<p>Converted SVG (<span>Loading...</span>)</p>
5760
</div>
5861
</div>
5962
<div class="example-group">
6063
<div class="example">
61-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock Sublime.gif"
64+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock Sublime.gif"
6265
alt="Animated GIF showing code being written on Sublime">
6366
<p>Converted SVG (<span>Loading...</span>)</p>
6467
</div>
6568
<div class="example">
66-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock Sublime.svg"
69+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Code Coding GIF by EscuelaDevRock Sublime.svg"
6770
alt="Animated SVG showing code being written on Sublime">
6871
<p>Converted SVG (<span>Loading...</span>)</p>
6972
</div>
@@ -72,36 +75,36 @@ <h2>Coding Examples</h2>
7275
<h2>More Examples</h2>
7376
<div class="example-group">
7477
<div class="example">
75-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Good_Morning_GIF_by_Hello_All.gif"
78+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Good_Morning_GIF_by_Hello_All.gif"
7679
alt="Animated GIF of Good Morning greeting" />
7780
<p>Converted SVG (<span>Loading...</span>)</p>
7881
</div>
7982
<div class="example">
80-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Good_Morning_GIF_by_Hello_All.svg"
83+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Good_Morning_GIF_by_Hello_All.svg"
8184
alt="Animated SVG of Good Morning greeting" />
8285
<p>Converted SVG (<span>Loading...</span>)</p>
8386
</div>
8487
</div>
8588
<div class="example-group">
8689
<div class="example">
87-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/icon_loading_GIF.gif"
90+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/icon_loading_GIF.gif"
8891
alt="Animated GIF of a loading icon" />
8992
<p>Converted SVG (<span>Loading...</span>)</p>
9093
</div>
9194
<div class="example">
92-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/icon_loading_GIF.svg"
95+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/icon_loading_GIF.svg"
9396
alt="Animated SVG of a loading icon" />
9497
<p>Converted SVG (<span>Loading...</span>)</p>
9598
</div>
9699
</div>
97100
<div class="example-group">
98101
<div class="example">
99-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/voila hands GIF by brontron.gif"
102+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/voila hands GIF by brontron.gif"
100103
alt="Animated GIF of hands doing a voila gesture" />
101104
<p>Original GIF (<span>Loading...</span>)</p>
102105
</div>
103106
<div class="example">
104-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/voila hands GIF by brontron.svg"
107+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/voila hands GIF by brontron.svg"
105108
alt="Animated SVG of hands doing a voila gesture" />
106109
<p>Converted SVG (<span>Loading...</span>)</p>
107110
</div>
@@ -115,31 +118,32 @@ <h2>Complex Examples (Transparent Backgrounds)</h2>
115118

116119
<div class="example-group">
117120
<div class="example">
118-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/black and white loop GIF by Sculpture.gif"
121+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/black and white loop GIF by Sculpture.gif"
119122
alt="Animated GIF of a black and white loop pattern">
120123
<p>Converted SVG (<span>Loading...</span>)</p>
121124
</div>
122125
<div class="example">
123-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/black and white loop GIF by Sculpture.svg"
126+
<img class="binary-img" loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/black and white loop GIF by Sculpture.svg"
124127
alt="Animated SVG of a black and white loop pattern">
125128
<p>Converted SVG (<span>Loading...</span>)</p>
126129
</div>
127130
</div>
128131

129132
<div class="example-group">
130133
<div class="example">
131-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Black And White Loop GIF by Pi-Slices.gif"
134+
<img loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Black And White Loop GIF by Pi-Slices.gif"
132135
alt="Animated GIF of another black and white loop pattern">
133136
<p>Converted SVG (<span>Loading...</span>)</p>
134137
</div>
135138
<div class="example">
136-
<img src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Black And White Loop GIF by Pi-Slices.svg"
139+
<img class="binary-img" loading="lazy" width="400" height="400" src="https://raw.githubusercontent.com/Romelium/FrameSVG/main/images/Black And White Loop GIF by Pi-Slices.svg"
137140
alt="Animated SVG of another black and white loop pattern">
138141
<p>Converted SVG (<span>Loading...</span>)</p>
139142
</div>
140143
</div>
141144

142145
<footer>
146+
<p><a href="/">View Web Converter</a></p>
143147
<p>Find details, examples, and source code on <a href="https://github.com/Romelium/FrameSVG" target="_blank"
144148
rel="noopener noreferrer">GitHub</a>.</p>
145149
</footer>

‎web/public/examples.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ async function getFileSize(url, element) {
2121
// Select all example groups
2222
const exampleGroups = document.querySelectorAll('.example-group');
2323

24-
exampleGroups.forEach(group => {
24+
exampleGroups.forEach(async group => {
2525
// Within each group, find the GIF and SVG elements
2626
const gifExample = group.querySelector('.example:first-child');
2727
const svgExample = group.querySelector('.example:last-child');

‎web/public/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<h1>FrameSVG: Animated GIF to Animated SVG</h1>
2020
<p>Convert your animated GIFs to scalable, animated SVGs.</p>
2121

22-
<input type="file" id="gifInput" accept="image/gif">
22+
<input type="file" id="gifInput" accept="image/gif" aria-label="Gif File Input">
2323
<div id="status"></div>
2424

2525
<h2>Parameters</h2>
@@ -86,12 +86,12 @@ <h2>Parameters</h2>
8686

8787
<button id="convertButton">Convert</button>
8888
<div id="preview"></div>
89-
<a id="downloadLink" style="display: none;">Download SVG</a>
89+
<a id="downloadLink" style="display: none;" aria-label="Download link of animated SVG">Download SVG</a>
9090

9191
<footer>
92-
<p><a href="examples.html">View Examples</a></p>
92+
<p><a href="examples.html" aria-label="View Examples">View Examples</a></p>
9393
<p>Find details, examples, and source code on <a href="https://github.com/Romelium/FrameSVG" target="_blank"
94-
rel="noopener norrer">GitHub</refea>.</p>
94+
rel="noopener norrer" aria-label="View GitHub of FrameSVG">GitHub</a>.</p>
9595
</footer>
9696
</div>
9797
<script src="script.js"></script>

‎web/public/style.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ input[type="number"] {
5252

5353

5454
button {
55-
background-color: #007bff;
55+
background-color: #0037FF;
5656
color: white;
5757
border: none;
5858
cursor: pointer;
@@ -150,7 +150,6 @@ button:hover {
150150
footer {
151151
text-align: center;
152152
border-top: 1px solid #ccc;
153-
width: 95%;
154153
max-width: 1000px;
155154
box-sizing: border-box;
156155

@@ -160,8 +159,9 @@ footer a {
160159
color: blue;
161160
text-decoration: none;
162161
}
162+
163163
footer a:hover {
164-
text-decoration: underline;
164+
text-decoration: underline;
165165
}
166166

167167
@media (prefers-color-scheme: dark) {

0 commit comments

Comments
 (0)