updated images for optimization loading

This commit is contained in:
Jacob Delgado 2024-02-01 04:29:24 -08:00
parent 09be87a3d3
commit f9bbe27fa9

View File

@ -31,9 +31,9 @@ const MenuCard = ({ Menu }: any) => {
alt="chili pepper spice"
fill
style={{ objectFit: "cover", objectPosition: "center" }}
quality={100}
className="flex transition-opacity opacity-0 duration-[2s]"
onLoadingComplete={(image) => image.classList.remove("opacity-0")}
quality={75}
sizes="(max-width: 325px) 100vw, (max-width: 1200px) 50vw, 33vw"
className="flex"
/>
</div>
</div>
@ -55,11 +55,12 @@ const MenuCard = ({ Menu }: any) => {
fill
style={{
objectFit: "contain",
objectPosition: "left",
objectPosition: "center",
}}
quality={100}
className="flex transition-opacity opacity-0 duration-[2s]"
onLoadingComplete={(image) => image.classList.remove("opacity-0")}
sizes="(max-width: 25px) 100vw, (max-width: 1200px) 50vw, 33vw"
className="flex"
/>
) : (
<div className="hidden"></div>
@ -74,8 +75,8 @@ const MenuCard = ({ Menu }: any) => {
objectPosition: "right",
}}
quality={100}
className="flex transition-opacity opacity-0 duration-[2s]"
onLoadingComplete={(image) => image.classList.remove("opacity-0")}
sizes="(max-width: 25px) 100vw, (max-width: 325px) 50vw, 33vw"
className="flex"
/>
) : (
<div className="hidden"></div>