Resizetizer saves jpgs as pngs while keeping the jpg extension

[beeradmoore]

Description

Our project has started moving from vector images for icons to having some bitmap (jpg) images displayed for backgrounds. Our workflow is to export a 4x (eg. xxxhdpi) image at 100% jpg quality and then use resizetizer to create the @1x, @2x, @3x, mdpi, hdpi ..., xxxhdpi. You can see an example of how we assumed this worked in the use-case below.

It does produce all of these images as expected. However upon inspection we noticed the image file sizes were rather large. Inspecting the image with previewer on macOS (and then confirmed with hex editor) these .jpg images contain .png data.

The underlying issue here is that RasterFileExtension is .png and never changes from that. Then during the SkiaSharpTools.Resize calls Save, which then explicitly saves SKEncodedImageFormat.Png with quality 100.

I am unsure how csproj and their data works, but I assume it would be possible to pass through jpg and quality through here.

This would likely cross paths with WebP support for resizetizer #29296. I assume the above changes would allow a user to use ExportFormat="webp" to get webp export but then also something along the lines of <MauiResizetizeDefaultFormatForAndroid>webp</MauiResizetizeDefaultFormatForAndroid> would then add support for that.

The missing piece would then be in app how do you easily use "background.jpg" (or "background.heic" if that is a thing) for iOS/macOS and "background.webp" on Android in a single Image call. I would work around that with an converter every where I supply in image source, but if there was a better "does this automatically" method it would be ideal.

Public API Changes

If this is an opt in feature the user would have to explicitly add export format to support backwards compatibility.

<MauiImage Update="Images\background.jpg" BaseSize="100,100" ExportFormat="jpg" />

It is a rabbit hole to go down, because then do you also include Quality="80" to enable specific quality of images.

Intended Use-Case

In this example I use background.jpg.

So for a demo we would add in 400x400 (or larger) background.jpg and set in the csproj that its BaseSize is 100x100.

Now when we compile we would expect the following jpg images:

• background.jpg - 100x100
• background@2x.jpg - 200x200
• background@3x.jpg - 300x300
• mdpi/background.jpg - 100x100
• hdpi/background.jpg - 150x150
• xhdpi/background.jpg - 200x200
• xxhdpi/background.jpg - 300x300
• xxxhdpi/background.jpg - 400x400

[stephenquan]

Have you thought of using font icons such as lucide.ttf (see https://lucide.dev/) or FontAwesome (see https://fontawesome.com/)?

For example:

<ContentPage xmlns:sqm="clr-namespace:SQuan.Helpers.Maui;assembly=SQuan.Helpers.Maui">
    <HorizontalStackLayout Spacing="25">
        <Label FontFamily="{x:Static sqm:LucideIcons.FontFamily}" Text="{x:Static sqm:LucideIcons.File}" />
        <Label FontFamily="{x:Static sqm:LucideIcons.FontFamily}" Text="{x:Static sqm:LucideIcons.Info}" />
        <Label FontFamily="{x:Static sqm:LucideIcons.FontFamily}" Text="{x:Static sqm:LucideIcons.Search}" />
        <Label FontFamily="{x:Static sqm:LucideIcons.FontFamily}" Text="{x:Static sqm:LucideIcons.Pencil}" />
    </HorizontalStackLayout>
<!-- ... -->

[beeradmoore]

@stephenquan , that doesn't make sense.

The issue is large jpg pictures (not icons) should be able to go through resizetizer and come out the other side resized down and remaining a jpg image. Currently it will convert a 400x400 image my_background.jpg to mdpi/my_background.jpg which is 100x100. However despite this being .jpg extension if you look at the data of the file it is indeed PNG.

IMO this is a bug, and people are shipping pngs disguised as jpgs and the rest of the systems are find with it because image loaders know to read the magic bytes at the start of the file to figure out what kind of file it is. The problem is the file size balloons out because saving a jpg as a png is not intended.