- Single page optimised HTML-CSS website to display a grid of images and achieve a perfect lighthouse score
- Note: to open web links in a new window use: ctrl+click on link
- Built with HTML and CSS. No Javascript.
- Perfect performance, Perfect scores on accessibility, best practices and SEO.
- CSS and HTML are minimised to reduce initial render/First Contentful Paint time.
.
- HyperText Markup Language HTML
- Cascading Style Sheets CSS styling
- JPG to WebP Converter to create new image formats that result in a higher Lighthouse score
- PurifyCSS Online - remove unused CSS code from your stylesheets
- Online CSS Minifier Tool and Compressor
- Open index.html using Visual Studio Live Server. Changes are updated automatically on server.
- index.html extract showing how new format webp images are marked up in HTML
<!--image 1-->
<div class="gallery__item">
<picture>
<source type="image/webp" width="640" height="432" srcset="img/webp/Murcia.webp" alt="Murcia"
class="gallery__img" loading="lazy" />
<source type="image/jpeg" width="640" height="432" srcset="img/jpg/Murcia.jpg" alt="Murcia"
class="gallery__img" loading="lazy" />
<img src="img/jpg/Murcia.jpg" width="640" height="432" alt="Murcia" class="gallery__img"
loading="lazy" />
</picture>
<p class="gallery__title"><a href="https://www.turismodemurcia.es" target="_blank"
rel="noopener noreferrer">Murcia</a>, 51km</p>
</div>- Lighthouse score perfect
- Status: Working.
- To-Do: Image sizes can be reduced to improve loading time
- W3 Schools: How TO - Responsive Image Grid
- Stackoverflow: css grid layout make image fill space of column and row
- This project is licensed under the MIT License - see the LICENSE file for details.
- Repo created by ABateman, email:
gomezbateman@yahoo.com