Replace SVG rocket images with real launch photos
· 7 months ago
bcb243c0077cf093c4f0fa155ffa61045c5d5897
Parent:
5b53a8f32
Updated the rocket cards to use actual launch or pad photos from Wikimedia Commons instead of SVG illustrations for Starship, New Glenn, Falcon Heavy, Falcon 9, Ariane 6, Vulcan Centaur, Angara A5, and Long March 5. Added lazy loading and descriptive alt text for each image to improve realism and accessibility.
1 file changed +9 −9
- orbital-rockets-comparison.html +9 −9
Diff
--- a/orbital-rockets-comparison.html +++ b/orbital-rockets-comparison.html @@ -598,7 +598,7 @@ <!-- Starship --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Starship" data-category="super" data-payload="150000" data-height="121.3" data-year="2023"> <div class="rocket-card"> - <svg class="rocket-image" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg"><rect fill="#FF6B35" width="200" height="300"/><polygon points="100,20 70,50 130,50" fill="#FF8C5A"/><rect x="80" y="60" width="40" height="180" fill="#FFA55C"/><circle cx="100" cy="100" r="12" fill="#1AC8ED"/><rect x="75" y="240" width="15" height="50" fill="#333"/><rect x="110" y="240" width="15" height="50" fill="#333"/><text x="100" y="280" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Starship</text></svg> + <img class="rocket-image" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/SpaceX_Starship_ignition_during_IFT-5.jpg" alt="SpaceX Starship ignites during IFT-5 test flight"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Starship</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> <div class="stat-row"> @@ -642,7 +642,7 @@ <!-- New Glenn --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="New Glenn" data-category="heavy" data-payload="45000" data-height="98" data-year="2025"> <div class="rocket-card"> - <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/New_Glenn_rocket_on_mobile_launcher_%28cropped%29.png/440px-New_Glenn_rocket_on_mobile_launcher_%28cropped%29.png" alt="Blue Origin New Glenn" class="rocket-image"> + <img class="rocket-image" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/c/cb/New_Glenn_launch_signals_new_era_for_Space_Launch_Complex_36_%288832113%29.jpg" alt="New Glenn heavy-lift vehicle rendering at Space Launch Complex 36"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> New Glenn</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> Blue Origin (United States)</p> <div class="stat-row"> @@ -686,7 +686,7 @@ <!-- Falcon Heavy --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Falcon Heavy" data-category="super" data-payload="63800" data-height="70" data-year="2018"> <div class="rocket-card"> - <svg class="rocket-image" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg"><rect fill="#333" width="200" height="300"/><rect x="60" y="50" width="20" height="160" fill="#666"/><rect x="85" y="30" width="30" height="180" fill="#FF6B35"/><rect x="120" y="50" width="20" height="160" fill="#666"/><polygon points="100,30 85,10 115,10" fill="#FF8C5A"/><circle cx="100" cy="80" r="8" fill="#1AC8ED"/><rect x="75" y="240" width="10" height="45" fill="#333"/><rect x="115" y="240" width="10" height="45" fill="#333"/><text x="100" y="280" text-anchor="middle" fill="white" font-size="10" font-weight="bold">Falcon Heavy</text></svg> + <img class="rocket-image" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/5/59/Falcon_Heavy_Demo_Mission_%2840126461851%29.jpg" alt="SpaceX Falcon Heavy lifting off during demo mission"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Falcon Heavy</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> <div class="stat-row"> @@ -730,7 +730,7 @@ <!-- Falcon 9 --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Falcon 9" data-category="medium" data-payload="22800" data-height="70" data-year="2010"> <div class="rocket-card"> - <svg class="rocket-image" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg"><rect fill="#222" width="200" height="300"/><rect x="85" y="35" width="30" height="190" fill="#FF6B35"/><polygon points="100,35 85,10 115,10" fill="#FF8C5A"/><circle cx="100" cy="85" r="9" fill="#1AC8ED"/><rect x="90" y="240" width="20" height="50" fill="#333"/><text x="100" y="280" text-anchor="middle" fill="white" font-size="12" font-weight="bold">Falcon 9</text></svg> + <img class="rocket-image" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/2/2b/SpaceX_Demo-2_Launch_%28NHQ202005300044%29_%28cropped%29.jpg" alt="Falcon 9 launching NASA's Crew Dragon Demo-2 mission"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Falcon 9</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> <div class="stat-row"> @@ -774,7 +774,7 @@ <!-- Ariane 6 --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Ariane 6" data-category="heavy" data-payload="21650" data-height="63" data-year="2024"> <div class="rocket-card"> - <svg class="rocket-image" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg"><rect fill="#4A90E2" width="200" height="300"/><rect x="80" y="45" width="40" height="170" fill="#4A90E2"/><polygon points="100,45 80,15 120,15" fill="#6FA8DC"/><rect x="60" y="215" width="16" height="70" fill="#333"/><rect x="124" y="215" width="16" height="70" fill="#333"/><rect x="100" y="215" width="4" height="50" fill="#666"/><text x="100" y="280" text-anchor="middle" fill="white" font-size="11" font-weight="bold">Ariane 6</text></svg> + <img class="rocket-image" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/7/71/Ariane_6_on_pad.jpg" alt="Ariane 6 standing on the Guiana Space Centre launch pad"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Ariane 6</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> ArianeGroup (Europe)</p> <div class="stat-row"> @@ -818,7 +818,7 @@ <!-- Vulcan Centaur --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Vulcan Centaur" data-category="heavy" data-payload="27200" data-height="61.6" data-year="2024"> <div class="rocket-card"> - <svg class="rocket-image" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg"><rect fill="#6B5B95" width="200" height="300"/><rect x="82" y="40" width="36" height="180" fill="#8B7BB8"/><polygon points="100,40 82,10 118,10" fill="#9B8BC8"/><circle cx="100" cy="90" r="8" fill="#1AC8ED"/><rect x="70" y="240" width="14" height="50" fill="#333"/><rect x="116" y="240" width="14" height="50" fill="#333"/><text x="100" y="280" text-anchor="middle" fill="white" font-size="9" font-weight="bold">Vulcan</text></svg> + <img class="rocket-image" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/9/98/Peregrine_launch_%28cropped2%29.jpg" alt="ULA Vulcan Centaur lifting Peregrine Mission One"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Vulcan Centaur</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> ULA (United States)</p> <div class="stat-row"> @@ -862,7 +862,7 @@ <!-- Angara A5 --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Angara A5" data-category="heavy" data-payload="24500" data-height="55.4" data-year="2014"> <div class="rocket-card"> - <svg class="rocket-image" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg"><rect fill="#1F1F3D" width="200" height="300"/><rect x="82" y="50" width="36" height="160" fill="#3F3F5D"/><polygon points="100,50 82,20 118,20" fill="#5F5F7D"/><circle cx="100" cy="95" r="7" fill="#1AC8ED"/><rect x="65" y="220" width="16" height="70" fill="#333"/><rect x="119" y="220" width="16" height="70" fill="#333"/><text x="100" y="280" text-anchor="middle" fill="white" font-size="11" font-weight="bold">Angara</text></svg> + <img class="rocket-image" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Launch_of_the_Angara-A5_from_the_Plesetsk_cosmodrome_%282025-06-19%29_%28cropped%29.jpg" alt="Angara A5 lifting off from Russia's Plesetsk Cosmodrome"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Angara A5</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> Khrunichev (Russia)</p> <div class="stat-row"> @@ -905,7 +905,7 @@ <!-- Long March 5 --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Long March 5" data-category="heavy" data-payload="25000" data-height="56.97" data-year="2016"> <div class="rocket-card"> - <svg class="rocket-image" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg"><rect fill="#C60C30" width="200" height="300"/><rect x="83" y="45" width="34" height="175" fill="#E61C3F"/><polygon points="100,45 83,15 117,15" fill="#FF2C4F"/><circle cx="100" cy="95" r="8" fill="#1AC8ED"/><rect x="72" y="230" width="13" height="60" fill="#333"/><rect x="115" y="230" width="13" height="60" fill="#333"/><text x="100" y="280" text-anchor="middle" fill="white" font-size="10" font-weight="bold">Long March</text></svg> + <img class="rocket-image" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Launch_of_Tianhe_Core_Module_2_%28Cropped%29.jpg" alt="Long March 5 launching the Tianhe core module from Wenchang"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Long March 5</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> CALT (China)</p> <div class="stat-row"> @@ -1044,4 +1044,4 @@ } </script> </body> -</html> \ No newline at end of file +</html>