feat(images): convert all images to WebP with 87% size reduction
- Convert 34 images (PNG/JPG) to WebP at quality 80 - Total savings: 21.6 MB → 2.8 MB (87% reduction) - Add <picture> elements with WebP source + original fallback - Add loading=lazy to all below-the-fold images - Update lightbox to serve WebP images with error fallback
This commit is contained in:
@@ -46,6 +46,11 @@ $(function () {
|
||||
// Lightbox – gallery grid items
|
||||
$(document).on("click", ".grid-item", function () {
|
||||
var src = $(this).data("img") || $(this).find("img").attr("src");
|
||||
$("#lightboxImg").on("error", function () {
|
||||
// WebP fallback: try original format
|
||||
var fallback = src.replace(/\.webp$/, src.endsWith('.webp') ? '.png' : '.jpg');
|
||||
if ($(this).attr('src') !== fallback) $(this).attr('src', fallback);
|
||||
});
|
||||
$("#lightboxImg").attr("src", src);
|
||||
$("#lightbox").addClass("open");
|
||||
$("body").css("overflow", "hidden");
|
||||
@@ -54,6 +59,10 @@ $(function () {
|
||||
// Lightbox – floor plan images in Raumaufteilung
|
||||
$(document).on("click", ".floor-plan img[data-img]", function () {
|
||||
var src = $(this).data("img");
|
||||
$("#lightboxImg").on("error", function () {
|
||||
var fallback = src.replace(/\.webp$/, '.png');
|
||||
if ($(this).attr('src') !== fallback) $(this).attr('src', fallback);
|
||||
});
|
||||
$("#lightboxImg").attr("src", src);
|
||||
$("#lightbox").addClass("open");
|
||||
$("body").css("overflow", "hidden");
|
||||
|
||||
Reference in New Issue
Block a user