Merge branch 'main' of https://github.com/Nishantjain10/appwrite-website into docs-sites-integration

Author: Nishantjain10

src/lib/components/BlogCta.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div
-    class="bg relative mt-12 -mb-16 flex min-h-[12rem] items-center justify-center overflow-hidden border-t border-[hsl(var(--web-color-subtle))] py-12"
+    class="bg relative mt-12 -mb-6 flex min-h-[12rem] items-center justify-center overflow-hidden border-t border-[hsl(var(--web-color-subtle))] py-12"
 >
     <div class="flex max-w-3xs flex-col items-center justify-center gap-5 text-center">
         <h2 class="text-label text-primary font-aeonik-pro">{heading}</h2>

src/routes/(init)/init/(assets)/posterIndustryPanel.png

@@ -13,6 +13,8 @@
     import Poster from './(assets)/poster.png';
     import PosterFutureAppwrite from './(assets)/posterFutureOfAppwrite.png';
     import PosterDeploy from './(assets)/posterDeploy.png';
+    import PosterIndustryPanel from './(assets)/posterIndustryPanel.png';
+    import PosterNewImageFormats from './(assets)/posterNewImageFormats.png';
     import Sites from './(assets)/illustrations/sites.svg';
     import Flutter from './(assets)/illustrations/flutter.svg';
     import Formats from './(assets)/illustrations/formats.svg';
@@ -132,16 +134,16 @@
             illustration: Formats,
             description:
                 'We have added support for two new image formats in Appwrite Storage: HEIC and AVIF. This will give you more tools to manage, manipulate, and serve images the way you need.',
-            url: '/blog/post/announcing-new-image-formats',
+            url: '/blog/post/new-image-formats-avif-heic',
             content: [
                 {
-                    title: 'How to use AVIF in Storage',
-                    url: '/blog/pos/avif-in-storage',
+                    title: 'Announcing HEIC and AVIF support: modern image formats now in Appwrite',
+                    url: '/blog/post/new-image-formats-avif-heic',
                     type: 'Blog'
                 },
                 {
-                    title: 'Improve your Appwrite developer experience with dev keys',
-                    url: '/blog/post/developer-experience-dev-keys',
+                    title: 'How to use AVIF in Storage',
+                    url: '/blog/post/avif-in-storage',
                     type: 'Blog'
                 },
                 {
@@ -150,6 +152,19 @@
                     type: 'Docs',
                     label: 'Visit docs'
                 }
+            ],
+            announcementVideo: {
+                url: 'https://www.youtube-nocookie.com/embed/2KAwVoJh8a8',
+                title: 'Announcement Video',
+                poster: PosterNewImageFormats
+            },
+            links: [
+                {
+                    title: 'YouTube Live',
+                    type: 'video',
+                    poster: PosterIndustryPanel,
+                    url: 'https://www.youtube.com/watch?v=PfnKyXo2k6o'
+                }
             ]
         },
         {
@@ -176,6 +191,19 @@
                     type: 'Docs',
                     label: 'Visit docs'
                 }
+            ],
+            announcementVideo: {
+                url: 'https://www.youtube-nocookie.com/embed/2KAwVoJh8a8',
+                title: 'Announcement Video',
+                poster: Poster
+            },
+            links: [
+                {
+                    title: 'YouTube Live',
+                    type: 'video',
+                    poster: PosterFutureAppwrite,
+                    url: 'https://www.youtube.com/watch?'
+                }
             ]
         }
     ];

src/routes/(init)/init/(assets)/posterNewImageFormats.png

@@ -0,0 +1,192 @@
+---
+layout: post
+title: How to use AVIF in Appwrite Storage
+description: Learn how to use AVIF, a new image format that offers better compression without sacrificing image quality, in Appwrite Storage.
+date: 2025-05-22
+cover: /images/blog/avif-in-storage/cover.png
+timeToRead: 6
+author: ebenezer-don
+category: tutorial
+featured: false
+---
+
+Every web developer knows the struggle with image optimization. You want your images to look good, but large file sizes slow down your sites and hurt the user experience. JPEG and WebP have been popular choices for image compression, but they have limitations when it comes to achieving high compression without sacrificing image quality. AVIF offers a solution to this problem.
+
+Built on the [AV1 video codec](https://en.wikipedia.org/wiki/AV1) by the Alliance for Open Media, it gives us much better compression without the quality loss we're used to seeing in highly compressed images.
+
+Now that Appwrite supports [AVIF in Storage](/blog/post/new-image-formats-avif-heic), you can start using it in your projects. This matters because you can reduce image sizes by 50% or more compared to JPEG, while keeping the same visual quality. And for users with browsers that don't support AVIF yet, you can easily fall back to other formats.
+
+Let's learn how AVIF works in Appwrite and look at some real implementation examples.
+
+# What makes AVIF different?
+
+AVIF brings several technical improvements to image compression:
+
+- Achieves [better compression](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) than JPEG and WebP while maintaining quality
+- Preserves more image detail at similar file sizes
+- Includes alpha channel for transparency
+- Works with wide color gamut (supports both HDR and standard color ranges)
+- Supports animations and image sequences
+- Supported by major browsers including Chrome and Firefox
+
+# Implementation in Appwrite
+
+Appwrite's Storage service provides three main ways to work with AVIF:
+
+- Direct AVIF file storage
+- On-demand conversion from other formats
+- Format-specific delivery based on browser support
+
+Let's examine each approach in detail.
+
+## Direct AVIF upload
+
+You can upload AVIF images to Appwrite Storage just like any other supported image format.
+
+Here's an example using the Web SDK:
+
+```js
+import { Client, Storage, ID } from "appwrite";
+
+const client = new Client()
+    .setEndpoint('<https://cloud.appwrite.io/v1>')
+    .setProject('<PROJECT_ID>');
+
+const storage = new Storage(client);
+
+// Upload an AVIF file
+const promise = storage.createFile(
+    '<BUCKET_ID>',
+    ID.unique(),
+    document.getElementById('uploader').files[0]
+);
+
+promise.then(function (response) {
+    console.log(response);
+}, function (error) {
+    console.log(error);
+});
+```
+
+This code handles file upload through a standard form input. The Storage service accepts AVIF files just like any other supported image format, with no special handling required at the upload stage.
+
+## Converting images to AVIF
+
+Appwrite's Storage service can convert your existing images to AVIF format on demand. This means you can transform JPEGs, PNGs, and other formats to AVIF without preprocessing them.
+
+Here's how to implement the conversion:
+
+```js
+import { Client, Storage, ImageGravity, ImageFormat } from "appwrite";
+
+const client = new Client()
+    .setEndpoint('<https://cloud.appwrite.io/v1>')
+    .setProject('<PROJECT_ID>');
+
+const storage = new Storage(client);
+
+const result = storage.getFilePreview(
+    '<BUCKET_ID>',          // bucketId
+    '<FILE_ID>',            // fileId
+    2000,                   // width
+    0,                      // height (maintain aspect ratio)
+    ImageGravity.Center,    // gravity
+    100,                    // quality
+    0,                      // borderWidth
+    '',                     // borderColor
+    0,                      // borderRadius
+    1,                      // opacity
+    0,                      // rotation
+    '',                     // background
+    ImageFormat.Avif        // output format
+);
+```
+
+The quality parameter in getFilePreview ranges from 0-100. AVIF's compression algorithm processes different image types (photographs, illustrations, UI elements) with varying efficiency, so quality settings need to be tested for your specific use case.
+
+The `ImageGravity` enum determines how images are cropped or positioned during resizing - `Center` maintains focus on the middle of the image.
+
+The `ImageFormat` enum specifies the output format, with options including `Avif`, `Webp`, `Jpg`, and `Png`.
+
+## Browser compatibility detection
+
+To ensure the best experience for all users, you should check for AVIF support before serving AVIF images.
+
+Here's a simple way to detect AVIF support:
+
+```js
+async function isAvifSupported() {
+    const avif = new Image();
+    return new Promise((resolve) => {
+        avif.onload = () => resolve(true);
+        avif.onerror = () => resolve(false);
+        avif.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
+    });
+}
+
+// Usage
+if (await isAvifSupported()) {
+    // Serve AVIF images
+} else {
+    // Fallback to WebP or JPEG
+}
+```
+
+This code tries to load a tiny base64-encoded AVIF image in the browser. If the image loads successfully (onload), the browser supports AVIF. If it fails to load (onerror), it means the browser can't decode AVIF images and we need to use a fallback format
+
+## Implementing a format fallback
+
+We can use the `isAvifSupported` function to implement progressive enhancement for image loading. This means using a baseline format (in this case, WebP) and using AVIF for browsers that support it.
+
+Here's an example:
+
+```js
+const storage = new Storage(client);
+
+async function getOptimizedImageUrl(bucketId, fileId) {
+
+    const format = await isAvifSupported() ? ImageFormat.Avif : ImageFormat.WebP;
+
+    return storage.getFilePreview(
+        bucketId,
+        fileId,
+        1200,      // width
+        0,         // height
+        'center',  // gravity
+        90,        // quality
+        0,         // border width
+        '',        // border color
+        0,         // border radius
+        1,         // opacity
+        0,         // rotation
+        '',        // background
+        format     // output format
+    );
+}
+```
+
+Notice that the format variable falls back to WebP if the browser doesn't support AVIF. I've used WebP because it's now widely supported. However, you can choose to fallback to JPEG for an even wider range of compatibility.
+
+# Best practices for using AVIF in Appwrite Storage
+
+When working with AVIF in Appwrite Storage, consider these best practices:
+
+1. **Progressive enhancement**: Always implement fallbacks for browsers that don't support AVIF.
+2. **Quality settings**: AVIF provides good quality even at lower settings. Start with a quality setting of 75-85 and adjust based on your needs.
+3. **Responsive images**: Use appropriate image dimensions for different screen sizes to optimize bandwidth usage.
+4. **Performance monitoring**: Monitor your application's performance metrics after implementing AVIF to ensure it provides the expected benefits.
+5. **Lazy loading**: Consider implementing lazy loading for AVIF images to further optimize page load performance.
+
+# Conclusion
+
+AVIF support in Appwrite Storage is a practical way to make your apps faster without compromising on image quality. The code to implement it is straightforward, and the benefits are real - especially for image-heavy applications.
+
+Start with a few test images, measure the results, and scale up from there. Your users will get faster load times, and you'll cut down on bandwidth costs.
+
+For more details on handling images in Appwrite, check out the [Storage documentation](/docs/products/storage/quick-start).
+
+# Further reading
+
+- [How Appwrite streamlines database operations using hooks](/blog/post/hooks-appwrite-databases?doFollow=true)
+- [5 VS Code extensions that replace entire development tools](/blog/post/5-vs-code-extensions-that-replace-entire-dev-tools?doFollow=true)
+- [Budget caps: How to stop unexpected cloud bills before they happen](/blog/post/budget-caps-stop-unexpected-cloud-bills?doFollow=true)

src/routes/(init)/init/+page.svelte

@@ -132,7 +132,7 @@ Once your site is deployed, you can continue to customize it, link it to a custo
 
 # More resources
 
-- [Appwrite Sites docs](/docs/producst/sites)
+- [Appwrite Sites docs](/docs/products/sites)
 - [Appwrite compared to Vercel](/blog/post/open-source-vercel-alternative)
 - [Appwrite Sites product tour](https://youtu.be/VtDe6hDw91k)
 - [Appwrite Sites video announcement](https://youtu.be/0cERQxFjTW4)

src/routes/blog/post/avif-in-storage/+page.markdoc

@@ -0,0 +1,114 @@
+---
+layout: post
+title: "Announcing HEIC and AVIF support: modern image formats now in Appwrite"
+description: 
+date: 2025-05-22
+cover: /images/blog/new-image-formats.png
+timeToRead: 6
+author: damodar-lohani
+category: product, announcement
+featured: false
+---
+
+We’re excited to share we have added support for two new image formats in Appwrite Storage: **HEIC** and **AVIF.** This will give you more tools to manage, manipulate, and serve images the way you need.
+
+You can generate image previews directly in **.heic** and **.avif** formats, which are natively supported in Appwrite.
+
+No converters. No extra steps. Just fast, flexible image handling built in.
+
+# Native support for next-gen formats
+
+Image performance matters. Whether you're building a high-performance photo app or just optimizing media delivery, modern formats like AVIF and HEIC offer massive benefits: smaller sizes, better quality, and native platform support.
+
+With this update, Appwrite now supports outputting previews in **HEIC** (Apple’s proprietary format) and **AVIF** (a modern open format with excellent compression).
+
+# Why it matters
+
+Previously, if you wanted to serve HEIC or AVIF images from Appwrite, you had to download them, convert them manually, and re-upload or host elsewhere.
+
+Now, the Appwrite Storage preview API can do it all automatically.
+
+This means:
+
+- No more external tools
+- No extra conversion steps
+- No breaking your image pipeline
+
+Just fast, reliable image delivery in the formats you need.
+
+# Built for Apple and beyond
+
+HEIC is Apple’s default image format on iOS. AVIF is increasingly used across modern browsers and devices.
+
+This feature was designed for mobile app developers, especially those targeting iOS and working with native image capture and display. But it’s just as useful for any developer looking to serve modern image formats with better compression and quality.
+
+# How to use it
+
+Use the image preview endpoint as you normally would, just set the desired output format to HEIC or AVIF. It works the same way as existing format conversions like `jpg` or `png`.
+
+You’ll see smaller file sizes, faster load times, and better integration with native apps and devices.
+
+# How to get started
+
+HEIC and AVIF support is available on **Appwrite Cloud** and **self-hosted** installations.
+
+```jsx
+import { Client, Storage, ImageFormat } from "appwrite";
+
+const client = new Client()
+    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
+    .setProject('<PROJECT_ID>');
+
+const storage = new Storage(client);
+
+const resultHeic = storage.getFilePreview(
+    'photos',           // bucket ID
+    'sunset.png',       // file ID
+    1800,               // width, will be resized using this value
+    0,                  // height, ignored when 0
+    'center',           // crop center
+    '90',               // slight compression
+    5,                  // border width
+    'CDCA30',           // border color
+    15,                 // border radius
+    1,                  // full opacity
+    0,                  // no rotation
+    'FFFFFF',           // background color
+    ImageFormat.Heic    // output heic format
+);
+console.log(resultHeic.href);
+
+const resultAvif = storage.getFilePreview(
+    'photos',           // bucket ID
+    'sunset.png',       // file ID
+    1800,               // width, will be resized using this value.
+    0,                  // height, ignored when 0
+    'center',           // crop center
+    '90',               // slight compression
+    5,                  // border width
+    'CDCA30',           // border color
+    15,                 // border radius
+    1,                  // full opacity
+    0,                  // no rotation
+    'FFFFFF',           // background color
+    ImageFormat.Avif    // output avif format
+);
+console.log(resultAvif.href);
+```
+
+[Visit the documentation](/docs/products/storage/images) to learn more.
+
+# Smarter storage for better apps
+
+This feature is part of our ongoing commitment to giving you modern tools that work the way you expect. Whether you're building a media-heavy app, targeting Apple platforms, or just caring about performance, you now have more control and better output without extra overhead.
+
+# More resources
+Take a look at what else we released this week.
+
+- [Appwrite Sites](/blog/post/announcing-appwrite-sites)
+- [Hosting for Flutter web](/blog/post/hosting-flutter-web)
+- [Dev Keys](blog/post/announcing-dev-keys)
+- [Appwrite compared to Vercel](/blog/post/open-source-vercel-alternative)
+- [Appwrite Sites product tour](https://youtu.be/VtDe6hDw91k)
+- [Appwrite Sites video announcement](https://youtu.be/0cERQxFjTW4)
+- [Appwrite Discord server](https://appwrite.io/discord)