diff --git a/app/Http/Controllers/Admin/EmailController.php b/app/Http/Controllers/Admin/EmailController.php
index f008b03b..6058e3e2 100644
--- a/app/Http/Controllers/Admin/EmailController.php
+++ b/app/Http/Controllers/Admin/EmailController.php
@@ -50,7 +50,7 @@ public function store(Request $request): RedirectResponse
             'recipient_email' => ['required_if:recipient_type,single', 'nullable', 'email', 'max:255'],
             'subject' => ['required', 'string', 'max:255'],
             'body' => ['required', 'string'],
-            'image' => ['sometimes', 'nullable', 'image', 'max:5120'],
+            'image' => ['sometimes', 'nullable', 'image', 'mimes:jpg,jpeg,png,webp', 'max:5120'],
         ]);
 
         $subject = $validated['subject'];
diff --git a/app/Http/Controllers/AuthController.php b/app/Http/Controllers/AuthController.php
index 7f93907e..ae35768b 100644
--- a/app/Http/Controllers/AuthController.php
+++ b/app/Http/Controllers/AuthController.php
@@ -140,7 +140,7 @@ public function completeOnboarding(Request $request)
                 new CleanText,
             ],
             'school' => ['required', 'string', 'max:255', new CleanText],
-            'image' => ['sometimes', 'nullable', 'image', 'max:5120'],
+            'image' => ['sometimes', 'nullable', 'image', 'mimes:jpg,jpeg,png,webp', 'max:5120'],
         ], [
             'school.required' => 'Please enter your school, college, or institution name.',
             'username.regex' => 'Username can only contain letters, numbers, and underscores.',
diff --git a/app/Http/Requests/Blog/StoreBlogRequest.php b/app/Http/Requests/Blog/StoreBlogRequest.php
index 94cf2e1a..aa6f87c1 100644
--- a/app/Http/Requests/Blog/StoreBlogRequest.php
+++ b/app/Http/Requests/Blog/StoreBlogRequest.php
@@ -38,7 +38,7 @@ public function rules(): array
                 'nullable',
                 'image',
                 'mimes:jpg,jpeg,png,webp',
-                'max:10240',
+                'max:5120',
             ],
 
             'is_published' => ['required', 'boolean'],
diff --git a/app/Http/Requests/Blog/UpdateBlogRequest.php b/app/Http/Requests/Blog/UpdateBlogRequest.php
index 8e4ceff6..e8e4d048 100644
--- a/app/Http/Requests/Blog/UpdateBlogRequest.php
+++ b/app/Http/Requests/Blog/UpdateBlogRequest.php
@@ -60,7 +60,7 @@ public function rules(): array
                 'nullable',
                 'image',
                 'mimes:jpg,jpeg,png,webp',
-                'max:10240',
+                'max:5120',
             ],
 
             'is_published' => [
diff --git a/app/Http/Requests/Notice/UpdateNoticeRequest.php b/app/Http/Requests/Notice/UpdateNoticeRequest.php
index ecce88e4..40ef9d27 100644
--- a/app/Http/Requests/Notice/UpdateNoticeRequest.php
+++ b/app/Http/Requests/Notice/UpdateNoticeRequest.php
@@ -25,7 +25,7 @@ public function rules(): array
         return [
             'title' => ['required', 'string', 'max:255'],
             'message' => ['required', 'string'],
-            'image' => ['nullable', 'image', 'mimes:jpg,jpeg,png,webp', 'max:10240'],
+            'image' => ['nullable', 'image', 'mimes:jpg,jpeg,png,webp', 'max:5120'],
             'remove_image' => ['nullable', 'boolean'],
             'show_button' => ['required', 'boolean'],
             'button_title' => ['nullable', 'required_if:show_button,true', 'string', 'max:100'],
diff --git a/app/Http/Requests/Profile/UpdateProfileRequest.php b/app/Http/Requests/Profile/UpdateProfileRequest.php
index 96a4be11..6cd6c95c 100644
--- a/app/Http/Requests/Profile/UpdateProfileRequest.php
+++ b/app/Http/Requests/Profile/UpdateProfileRequest.php
@@ -35,7 +35,7 @@ public function rules(): array
                 Rule::unique('users', 'username')->ignore($this->user()->id),
                 new CleanText,
             ],
-            'file' => ['sometimes', 'nullable', 'image', 'max:2048'],
+            'file' => ['sometimes', 'nullable', 'image', 'mimes:jpg,jpeg,png,webp', 'max:5120'],
             'about' => ['sometimes', 'nullable', 'string', 'max:1000', new CleanText],
             'institution' => ['sometimes', 'nullable', 'string', 'max:255', new CleanText],
             'facebook' => ['sometimes', 'nullable', 'string', 'max:255'],
diff --git a/app/Http/Requests/Resource/BulkImageStoreRequest.php b/app/Http/Requests/Resource/BulkImageStoreRequest.php
index bbfca6ec..a9aad0ce 100644
--- a/app/Http/Requests/Resource/BulkImageStoreRequest.php
+++ b/app/Http/Requests/Resource/BulkImageStoreRequest.php
@@ -27,7 +27,7 @@ public function rules(): array
             'custom_titles' => 'required|array|max:20',
             'custom_titles.*' => 'required|string|max:100',
             'files' => 'required|array|min:1|max:20',
-            'files.*' => 'required|image|max:10240', // 10MB Limit
+            'files.*' => 'required|image|mimes:jpg,jpeg,png,webp|max:5120',
         ];
     }
 }
diff --git a/app/Http/Requests/Resource/StoreResourceRequest.php b/app/Http/Requests/Resource/StoreResourceRequest.php
index e3df0594..72f882d9 100644
--- a/app/Http/Requests/Resource/StoreResourceRequest.php
+++ b/app/Http/Requests/Resource/StoreResourceRequest.php
@@ -32,8 +32,8 @@ public function rules(): array
             'file' => [
                 'nullable',
                 'file',
-                'max:10000',
-                'mimes:jpg,jpeg,png',
+                'max:5120',
+                'mimes:jpg,jpeg,png,webp',
                 Rule::requiredIf($this->resource_type === 'image'),
             ],
 
diff --git a/app/Http/Requests/Resource/UpdateResourceRequest.php b/app/Http/Requests/Resource/UpdateResourceRequest.php
index 934391b6..aed5893d 100644
--- a/app/Http/Requests/Resource/UpdateResourceRequest.php
+++ b/app/Http/Requests/Resource/UpdateResourceRequest.php
@@ -23,8 +23,8 @@ public function rules(): array
             'file' => [
                 'nullable',
                 'file',
-                'max:10000',
-                'mimes:jpg,jpeg,png',
+                'max:5120',
+                'mimes:jpg,jpeg,png,webp',
                 Rule::requiredIf(
                     $this->resource_type === 'image'
                         && ! $this->route('resource')->file_path
diff --git a/app/Http/Requests/User/StoreUserRequest.php b/app/Http/Requests/User/StoreUserRequest.php
index 82d38140..9d34b96c 100644
--- a/app/Http/Requests/User/StoreUserRequest.php
+++ b/app/Http/Requests/User/StoreUserRequest.php
@@ -32,7 +32,7 @@ public function rules(): array
             'role' => ['nullable', 'string'],
             'permissions' => ['nullable', 'array'],
             'permissions.*' => ['string', 'exists:permissions,name'],
-            'file' => ['nullable', 'image', 'max:2048'],
+            'file' => ['nullable', 'image', 'mimes:jpg,jpeg,png,webp', 'max:5120'],
             'about' => ['nullable', 'string', 'max:1000', new CleanText],
             'title' => ['nullable', 'string', 'max:255', new CleanText],
             'institution' => ['nullable', 'string', 'max:255', new CleanText],
diff --git a/app/Http/Requests/User/UpdateUserRequest.php b/app/Http/Requests/User/UpdateUserRequest.php
index 060bf0c3..5cf27228 100644
--- a/app/Http/Requests/User/UpdateUserRequest.php
+++ b/app/Http/Requests/User/UpdateUserRequest.php
@@ -38,7 +38,7 @@ public function rules(): array
                 new CleanText,
             ],
             'email' => ['sometimes', 'email', 'unique:users,email,'.$user->id],
-            'file' => ['sometimes', 'nullable', 'image', 'max:2048'],
+            'file' => ['sometimes', 'nullable', 'image', 'mimes:jpg,jpeg,png,webp', 'max:5120'],
             'about' => ['sometimes', 'nullable', 'string', 'max:1000', new CleanText],
             'title' => ['sometimes', 'nullable', 'string', 'max:255', new CleanText],
             'institution' => ['sometimes', 'nullable', 'string', 'max:255', new CleanText],
diff --git a/resources/js/components/ImageUpload.vue b/resources/js/components/ImageUpload.vue
new file mode 100644
index 00000000..4560ae4b
--- /dev/null
+++ b/resources/js/components/ImageUpload.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { Upload, X, Loader2, Sparkles } from 'lucide-vue-next';
+import { ref, computed, watch } from 'vue';
+import { useImageUpload } from '@/lib/useImageUpload';
+
+const props = withDefaults(
+    defineProps<{
+        modelValue?: File | null;
+        currentImageUrl?: string | null;
+        label?: string;
+        helpText?: string;
+        shape?: 'rectangle' | 'square' | 'circle';
+        maxOriginalSizeMB?: number;
+        disabled?: boolean;
+        showSizeReduction?: boolean;
+    }>(),
+    {
+        modelValue: null,
+        currentImageUrl: null,
+        label: '',
+        helpText: 'JPG, PNG, WEBP (Auto-optimized)',
+        shape: 'rectangle',
+        maxOriginalSizeMB: 20,
+        disabled: false,
+        showSizeReduction: true,
+    },
+);
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', file: File | null): void;
+    (e: 'change', file: File | null): void;
+    (e: 'clear'): void;
+}>();
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const isDragging = ref(false);
+
+const {
+    file,
+    previewUrl,
+    isCompressing,
+    error,
+    originalSizeFormatted,
+    compressedSizeFormatted,
+    processFile,
+    clear: clearUploadState,
+} = useImageUpload({
+    maxOriginalSizeMB: props.maxOriginalSizeMB,
+    onCompressed: (compressed) => {
+        emit('update:modelValue', compressed);
+        emit('change', compressed);
+    },
+});
+
+const activePreview = computed(() => {
+    return previewUrl.value || props.currentImageUrl || null;
+});
+
+const triggerPicker = () => {
+    if (props.disabled || isCompressing.value) {
+        return;
+    }
+
+    fileInputRef.value?.click();
+};
+
+const handleFileInput = async (event: Event) => {
+    const target = event.target as HTMLInputElement;
+
+    if (target.files && target.files[0]) {
+        await processFile(target.files[0]);
+        target.value = '';
+    }
+};
+
+const handleDrop = async (event: DragEvent) => {
+    isDragging.value = false;
+
+    if (props.disabled || isCompressing.value) {
+        return;
+    }
+
+    if (event.dataTransfer?.files && event.dataTransfer.files[0]) {
+        await processFile(event.dataTransfer.files[0]);
+    }
+};
+
+const removeImage = (event: Event) => {
+    event.stopPropagation();
+    clearUploadState();
+    emit('update:modelValue', null);
+    emit('change', null);
+    emit('clear');
+};
+
+watch(
+    () => props.modelValue,
+    (val) => {
+        if (!val && file.value) {
+            clearUploadState();
+        }
+    },
+);
+</script>
+
+<template>
+    <div class="w-full">
+        <!-- Optional Label -->
+        <label
+            v-if="label"
+            class="mb-1.5 block text-sm font-medium text-slate-700 dark:text-gray-300"
+        >
+            {{ label }}
+        </label>
+
+        <!-- Hidden File Input -->
+        <input
+            ref="fileInputRef"
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            class="hidden"
+            :disabled="disabled || isCompressing"
+            @change="handleFileInput"
+        />
+
+        <!-- Circle Shape (for Avatars) -->
+        <div
+            v-if="shape === 'circle'"
+            class="relative inline-block"
+            @click="triggerPicker"
+        >
+            <div
+                class="group relative flex h-28 w-28 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-dashed border-slate-300 bg-slate-50 transition-all hover:border-indigo-500 dark:border-gray-700 dark:bg-gray-800"
+                :class="{
+                    'border-indigo-500 ring-2 ring-indigo-500/20': isDragging,
+                    'cursor-not-allowed opacity-60': disabled || isCompressing,
+                }"
+                @dragover.prevent="isDragging = true"
+                @dragleave.prevent="isDragging = false"
+                @drop.prevent="handleDrop"
+            >
+                <img
+                    v-if="activePreview && !isCompressing"
+                    :src="activePreview"
+                    alt="Preview"
+                    class="h-full w-full object-cover"
+                />
+
+                <div
+                    v-else-if="!isCompressing"
+                    class="flex flex-col items-center justify-center p-2 text-center text-slate-400 dark:text-gray-500"
+                >
+                    <Upload
+                        class="h-6 w-6 transition-transform group-hover:scale-110"
+                    />
+                    <span class="mt-1 text-xs font-medium">Upload</span>
+                </div>
+
+                <!-- Compressing Overlay -->
+                <div
+                    v-if="isCompressing"
+                    class="absolute inset-0 flex flex-col items-center justify-center bg-white/80 dark:bg-gray-900/80"
+                >
+                    <Loader2
+                        class="h-6 w-6 animate-spin text-indigo-600 dark:text-indigo-400"
+                    />
+                </div>
+            </div>
+
+            <!-- Remove Button -->
+            <button
+                v-if="activePreview && !isCompressing && !disabled"
+                type="button"
+                title="Remove image"
+                class="absolute top-0 right-0 flex h-6 w-6 items-center justify-center rounded-full bg-red-600 text-white shadow hover:bg-red-700"
+                @click="removeImage"
+            >
+                <X class="h-3.5 w-3.5" />
+            </button>
+        </div>
+
+        <!-- Box / Rectangle Shape -->
+        <div
+            v-else
+            class="group relative flex cursor-pointer flex-col items-center justify-center overflow-hidden rounded-xl border-2 border-dashed transition-all"
+            :class="[
+                shape === 'square'
+                    ? 'aspect-square max-w-xs'
+                    : 'min-h-[160px] w-full',
+                isDragging
+                    ? 'border-indigo-500 bg-indigo-50/50 dark:bg-indigo-950/20'
+                    : 'border-slate-300 bg-slate-50/70 hover:border-indigo-400 hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-800/50 dark:hover:border-gray-600 dark:hover:bg-gray-800',
+                activePreview ? 'p-2' : 'p-6',
+                disabled || isCompressing
+                    ? 'pointer-events-none opacity-70'
+                    : '',
+            ]"
+            @click="triggerPicker"
+            @dragover.prevent="isDragging = true"
+            @dragleave.prevent="isDragging = false"
+            @drop.prevent="handleDrop"
+        >
+            <!-- Preview with Image Loaded -->
+            <div
+                v-if="activePreview && !isCompressing"
+                class="relative flex w-full items-center justify-center overflow-hidden rounded-lg"
+            >
+                <img
+                    :src="activePreview"
+                    alt="Preview"
+                    class="max-h-64 w-auto rounded-lg object-contain"
+                />
+
+                <!-- Overlay on hover -->
+                <div
+                    class="absolute inset-0 flex items-center justify-center bg-slate-900/40 opacity-0 transition-opacity group-hover:opacity-100"
+                >
+                    <span
+                        class="rounded-lg bg-white/90 px-3 py-1.5 text-xs font-semibold text-slate-800 shadow dark:bg-gray-800 dark:text-gray-200"
+                    >
+                        Click or drop to replace
+                    </span>
+                </div>
+
+                <!-- Remove Button -->
+                <button
+                    type="button"
+                    title="Remove image"
+                    class="absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded-full bg-slate-900/75 text-white backdrop-blur transition-all hover:bg-red-600"
+                    @click="removeImage"
+                >
+                    <X class="h-4 w-4" />
+                </button>
+            </div>
+
+            <!-- Empty Dropzone State -->
+            <div
+                v-else-if="!isCompressing"
+                class="flex flex-col items-center justify-center text-center"
+            >
+                <div
+                    class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600 transition-transform group-hover:scale-110 dark:bg-indigo-950/50 dark:text-indigo-400"
+                >
+                    <Upload class="h-6 w-6" />
+                </div>
+                <p
+                    class="text-sm font-medium text-slate-700 dark:text-gray-300"
+                >
+                    <span
+                        class="text-indigo-600 hover:underline dark:text-indigo-400"
+                        >Click to upload</span
+                    >
+                    or drag and drop
+                </p>
+                <p
+                    v-if="helpText"
+                    class="mt-1 text-xs text-slate-500 dark:text-gray-400"
+                >
+                    {{ helpText }}
+                </p>
+            </div>
+
+            <!-- Compressing State -->
+            <div
+                v-if="isCompressing"
+                class="flex flex-col items-center justify-center py-6 text-center"
+            >
+                <Loader2
+                    class="h-8 w-8 animate-spin text-indigo-600 dark:text-indigo-400"
+                />
+                <p
+                    class="mt-2.5 text-sm font-medium text-slate-700 dark:text-gray-300"
+                >
+                    Optimizing image...
+                </p>
+                <p class="text-xs text-slate-500 dark:text-gray-400">
+                    Scaling & compressing to WebP for faster loading
+                </p>
+            </div>
+        </div>
+
+        <!-- Size Reduction Badge -->
+        <div
+            v-if="
+                showSizeReduction &&
+                originalSizeFormatted &&
+                compressedSizeFormatted &&
+                !isCompressing
+            "
+            class="mt-2 flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400"
+        >
+            <Sparkles class="h-3.5 w-3.5" />
+            <span>
+                Optimized:
+                <span class="text-slate-400 line-through">{{
+                    originalSizeFormatted
+                }}</span>
+                &rarr;
+                <span class="font-semibold">{{ compressedSizeFormatted }}</span>
+            </span>
+        </div>
+
+        <!-- Error Message -->
+        <p
+            v-if="error"
+            class="mt-1.5 text-xs font-medium text-red-600 dark:text-red-400"
+        >
+            {{ error }}
+        </p>
+    </div>
+</template>
diff --git a/resources/js/components/admin/BulkImageModal.vue b/resources/js/components/admin/BulkImageModal.vue
index 2e62efa0..be2c40ac 100644
--- a/resources/js/components/admin/BulkImageModal.vue
+++ b/resources/js/components/admin/BulkImageModal.vue
@@ -7,9 +7,11 @@ import {
     Hash,
     Loader2,
     AlertCircle,
+    X,
 } from 'lucide-vue-next';
 import { ref, computed, watch, onUnmounted } from 'vue';
 import BaseModal from '@/components/BaseModal.vue';
+import { compressImagesSequentially } from '@/lib/imageCompression';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -28,6 +30,8 @@ const isDragging = ref(false);
 const fileLimitError = ref('');
 const errorMessage = ref('');
 const isSaving = ref(false);
+const isCompressing = ref(false);
+const compressionStatusText = ref('');
 const uploadProgress = ref<number | null>(null);
 const isProcessingServer = ref(false);
 
@@ -52,10 +56,16 @@ const processedTitles = computed(() => {
     });
 });
 
+const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+
 const addFiles = (files: FileList | File[]) => {
+    if (isSaving.value || isCompressing.value) {
+        return;
+    }
+
     fileLimitError.value = '';
     const imageFiles = Array.from(files).filter((file) =>
-        file.type.startsWith('image/'),
+        ALLOWED_IMAGE_TYPES.includes(file.type),
     );
 
     if (imageFiles.length === 0) {
@@ -78,6 +88,10 @@ const addFiles = (files: FileList | File[]) => {
 };
 
 const handleFileSelect = (event: Event) => {
+    if (isSaving.value || isCompressing.value) {
+        return;
+    }
+
     const input = event.target as HTMLInputElement;
 
     if (input.files?.length) {
@@ -89,12 +103,20 @@ const handleFileSelect = (event: Event) => {
 const handleDrop = (event: DragEvent) => {
     isDragging.value = false;
 
+    if (isSaving.value || isCompressing.value) {
+        return;
+    }
+
     if (event.dataTransfer?.files?.length) {
         addFiles(event.dataTransfer.files);
     }
 };
 
 const removeFile = (index: number) => {
+    if (isSaving.value || isCompressing.value) {
+        return;
+    }
+
     if (selectedFiles.value[index]) {
         URL.revokeObjectURL(selectedFiles.value[index].previewUrl);
         selectedFiles.value.splice(index, 1);
@@ -103,17 +125,23 @@ const removeFile = (index: number) => {
 };
 
 const clearAll = () => {
+    if (isSaving.value || isCompressing.value) {
+        return;
+    }
+
     selectedFiles.value.forEach((item) => URL.revokeObjectURL(item.previewUrl));
     selectedFiles.value = [];
     fileLimitError.value = '';
     errorMessage.value = '';
     isSaving.value = false;
+    isCompressing.value = false;
+    compressionStatusText.value = '';
     uploadProgress.value = null;
     isProcessingServer.value = false;
 };
 
 const handleClose = () => {
-    if (isSaving.value) {
+    if (isSaving.value || isCompressing.value) {
         return;
     }
 
@@ -124,7 +152,7 @@ const handleClose = () => {
 watch(
     () => props.isOpen,
     (open) => {
-        if (!open) {
+        if (!open && !isSaving.value && !isCompressing.value) {
             clearAll();
         }
     },
@@ -134,22 +162,61 @@ onUnmounted(() => {
     clearAll();
 });
 
-const submitForm = () => {
-    if (selectedFiles.value.length === 0 || isSaving.value) {
+const submitForm = async () => {
+    if (
+        selectedFiles.value.length === 0 ||
+        isSaving.value ||
+        isCompressing.value
+    ) {
         return;
     }
 
     isSaving.value = true;
+    errorMessage.value = '';
+
+    let filesToUpload = selectedFiles.value.map((item) => item.file);
+
+    // If any file is larger than 300KB, optimize sequentially
+    const needsOptimization = filesToUpload.some((f) => f.size > 300 * 1024);
+
+    if (needsOptimization) {
+        isCompressing.value = true;
+        compressionStatusText.value = 'Preparing images...';
+        filesToUpload = await compressImagesSequentially(
+            filesToUpload,
+            (processed, total) => {
+                compressionStatusText.value = `Optimizing image ${processed} of ${total} to WebP...`;
+            },
+        );
+        isCompressing.value = false;
+    }
+
+    // Verify modal was not closed/cancelled during compression
+    if (!props.isOpen || selectedFiles.value.length === 0) {
+        isSaving.value = false;
+
+        return;
+    }
+
+    // Post-compression 5MB check
+    const oversized = filesToUpload.find((f) => f.size > 5 * 1024 * 1024);
+
+    if (oversized) {
+        errorMessage.value = `ছবি "${oversized.name}" অপটিমাইজ করার পরও ৫MB এর বেশি। অনুগ্রহ করে ছোট ছবি নির্বাচন করুন।`;
+        isSaving.value = false;
+
+        return;
+    }
+
     uploadProgress.value = 0;
     isProcessingServer.value = false;
-    errorMessage.value = '';
 
     const payload: Record<string, any> = {
         node_id: props.node.id,
         naming_strategy: namingStrategy.value,
         naming_prefix: namingPrefix.value,
         start_number: startNumber.value,
-        files: selectedFiles.value.map((item) => item.file),
+        files: filesToUpload,
         custom_titles: processedTitles.value,
     };
 
@@ -249,13 +316,18 @@ const submitForm = () => {
                             type="file"
                             id="modal-bulk-image-upload"
                             multiple
-                            accept="image/jpeg,image/png,image/jpg,image/webp,image/gif"
+                            accept="image/jpeg,image/png,image/jpg,image/webp"
                             class="hidden"
+                            :disabled="isSaving || isCompressing"
                             @change="handleFileSelect"
                         />
                         <label
                             for="modal-bulk-image-upload"
                             class="flex cursor-pointer flex-col items-center justify-center"
+                            :class="{
+                                'cursor-not-allowed opacity-60':
+                                    isSaving || isCompressing,
+                            }"
                         >
                             <div
                                 class="mb-2 rounded-full border border-slate-200 bg-white p-2.5 text-indigo-600 shadow-2xs dark:border-gray-700 dark:bg-gray-800 dark:text-indigo-400"
@@ -383,7 +455,8 @@ const submitForm = () => {
                         <button
                             type="button"
                             @click="clearAll"
-                            class="flex cursor-pointer items-center gap-1 font-medium text-rose-600 hover:text-rose-700"
+                            :disabled="isSaving || isCompressing"
+                            class="flex cursor-pointer items-center gap-1 font-medium text-rose-600 hover:text-rose-700 disabled:cursor-not-allowed disabled:opacity-50"
                         >
                             <Trash2 class="h-3 w-3" />
                             <span>Clear all</span>
@@ -409,7 +482,8 @@ const submitForm = () => {
                                 <button
                                     type="button"
                                     @click="removeFile(index)"
-                                    class="absolute top-1 right-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-slate-900/70 text-white backdrop-blur-xs transition hover:bg-rose-600"
+                                    :disabled="isSaving || isCompressing"
+                                    class="absolute top-1 right-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-slate-900/70 text-white backdrop-blur-xs transition hover:bg-rose-600 disabled:cursor-not-allowed disabled:opacity-50"
                                 >
                                     <X class="h-3 w-3" />
                                 </button>
@@ -427,9 +501,22 @@ const submitForm = () => {
                 </div>
             </div>
 
+            <!-- Compression Status Bar -->
+            <div
+                v-if="isCompressing"
+                class="border-t border-slate-100 bg-indigo-50/70 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-indigo-950/30"
+            >
+                <div
+                    class="flex items-center gap-2 text-xs font-medium text-indigo-600 dark:text-indigo-400"
+                >
+                    <Loader2 class="h-3.5 w-3.5 animate-spin" />
+                    <span>{{ compressionStatusText }}</span>
+                </div>
+            </div>
+
             <!-- Upload Progress Bar -->
             <div
-                v-if="isSaving && uploadProgress !== null"
+                v-if="!isCompressing && isSaving && uploadProgress !== null"
                 class="border-t border-slate-100 bg-slate-50/80 px-4 py-3 sm:px-6 dark:border-gray-800 dark:bg-gray-900/80"
             >
                 <div class="mb-1.5 flex items-center justify-between text-xs">
diff --git a/resources/js/components/admin/CreateResourceModal.vue b/resources/js/components/admin/CreateResourceModal.vue
index 70c7ec39..d023b8ef 100644
--- a/resources/js/components/admin/CreateResourceModal.vue
+++ b/resources/js/components/admin/CreateResourceModal.vue
@@ -12,6 +12,7 @@ import {
 } from 'lucide-vue-next';
 import { ref, computed, watch } from 'vue';
 import BaseModal from '@/components/BaseModal.vue';
+import { compressImage } from '@/lib/imageCompression';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -67,6 +68,7 @@ const content = ref('');
 const externalUrl = ref('');
 const file = ref<File | null>(null);
 const isSaving = ref(false);
+const isCompressing = ref(false);
 const errorMessage = ref('');
 
 const requiresFile = computed(() => resourceType.value === 'image');
@@ -91,6 +93,7 @@ const initForm = () => {
 
     errorMessage.value = '';
     isSaving.value = false;
+    isCompressing.value = false;
 };
 
 watch(
@@ -102,16 +105,51 @@ watch(
     },
 );
 
-const handleFileSelect = (event: Event) => {
+const handleFileSelect = async (event: Event) => {
     const target = event.target as HTMLInputElement;
 
     if (target.files && target.files[0]) {
-        file.value = target.files[0];
+        const raw = target.files[0];
+        errorMessage.value = '';
+
+        const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+
+        if (!allowed.includes(raw.type)) {
+            errorMessage.value =
+                'Please select a valid JPG, PNG, or WEBP image.';
+            target.value = '';
+
+            return;
+        }
+
+        try {
+            isCompressing.value = true;
+            let resultFile: File;
+
+            try {
+                resultFile = await compressImage(raw);
+            } catch {
+                resultFile = raw;
+            }
+
+            if (resultFile.size > 5 * 1024 * 1024) {
+                errorMessage.value =
+                    'The optimized image is still larger than 5MB. Please choose a smaller image.';
+                file.value = null;
+                target.value = '';
+
+                return;
+            }
+
+            file.value = resultFile;
+        } finally {
+            isCompressing.value = false;
+        }
     }
 };
 
 const handleClose = () => {
-    if (isSaving.value) {
+    if (isSaving.value || isCompressing.value) {
         return;
     }
 
@@ -119,7 +157,7 @@ const handleClose = () => {
 };
 
 const submitForm = () => {
-    if (!title.value.trim() || isSaving.value) {
+    if (!title.value.trim() || isSaving.value || isCompressing.value) {
         return;
     }
 
@@ -320,31 +358,42 @@ const submitForm = () => {
                             type="file"
                             id="resource_file_upload"
                             class="hidden"
+                            :disabled="isCompressing || isSaving"
                             @change="handleFileSelect"
-                            accept="image/jpeg,image/png,image/jpg"
+                            accept="image/jpeg,image/png,image/jpg,image/webp"
                         />
                         <label
                             for="resource_file_upload"
                             class="flex cursor-pointer flex-col items-center justify-center"
+                            :class="{
+                                'cursor-not-allowed opacity-60':
+                                    isCompressing || isSaving,
+                            }"
                         >
                             <div
                                 class="mb-1.5 rounded-full border border-slate-200 bg-white p-2 text-slate-500 shadow-2xs dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
                             >
-                                <Upload class="h-4 w-4" />
+                                <Loader2
+                                    v-if="isCompressing"
+                                    class="h-4 w-4 animate-spin text-indigo-600 dark:text-indigo-400"
+                                />
+                                <Upload v-else class="h-4 w-4" />
                             </div>
                             <span
                                 class="text-xs font-medium text-indigo-600 dark:text-indigo-400"
                             >
                                 {{
-                                    file
-                                        ? file.name
-                                        : 'Choose image file or drag here'
+                                    isCompressing
+                                        ? 'Optimizing image...'
+                                        : file
+                                          ? file.name
+                                          : 'Choose image file or drag here'
                                 }}
                             </span>
                             <span
                                 class="mt-0.5 text-[10px] text-slate-400 dark:text-gray-500"
                             >
-                                Max size: 10MB (JPG, JPEG, PNG)
+                                Max size: 20MB (JPG, PNG, WEBP — auto-optimized)
                             </span>
                         </label>
                     </div>
@@ -386,7 +435,7 @@ const submitForm = () => {
 
                 <button
                     type="submit"
-                    :disabled="isSaving || !title.trim()"
+                    :disabled="isSaving || isCompressing || !title.trim()"
                     class="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-2xs transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
                 >
                     <Loader2 v-if="isSaving" class="h-3.5 w-3.5 animate-spin" />
diff --git a/resources/js/lib/imageCompression.ts b/resources/js/lib/imageCompression.ts
new file mode 100644
index 00000000..a7130ad7
--- /dev/null
+++ b/resources/js/lib/imageCompression.ts
@@ -0,0 +1,254 @@
+export interface CompressOptions {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+    targetFormat?: 'image/webp' | 'image/jpeg' | 'image/png';
+    skipThresholdKB?: number;
+}
+
+const DEFAULT_OPTIONS: Required<CompressOptions> = {
+    maxWidth: 2048,
+    maxHeight: 2048,
+    quality: 0.85,
+    targetFormat: 'image/webp',
+    skipThresholdKB: 300,
+};
+
+/**
+ * Checks if a file is an image that should be compressed.
+ * GIFs (to preserve animation) and SVGs (vector graphics) are excluded.
+ */
+export function isCompressibleImage(file: File): boolean {
+    if (!file.type.startsWith('image/')) {
+        return false;
+    }
+
+    const uncompressibleTypes = ['image/gif', 'image/svg+xml'];
+
+    return !uncompressibleTypes.includes(file.type);
+}
+
+/**
+ * Formats bytes into human-readable string (e.g. 1.2 MB, 450 KB).
+ */
+export function formatFileSize(bytes: number): string {
+    if (bytes === 0) {
+        return '0 B';
+    }
+
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+/**
+ * Calculates scaled dimensions while preserving aspect ratio (never upscales).
+ */
+function calculateDimensions(
+    originalWidth: number,
+    originalHeight: number,
+    maxWidth: number,
+    maxHeight: number,
+): { width: number; height: number } {
+    let width = originalWidth;
+    let height = originalHeight;
+
+    if (width > maxWidth) {
+        height = Math.round((height * maxWidth) / width);
+        width = maxWidth;
+    }
+
+    if (height > maxHeight) {
+        width = Math.round((width * maxHeight) / height);
+        height = maxHeight;
+    }
+
+    return { width, height };
+}
+
+/**
+ * Loads an image from a File into an ImageBitmap or HTMLImageElement,
+ * correctly applying EXIF orientation.
+ */
+async function loadImageSource(file: File): Promise<{
+    source: ImageBitmap | HTMLImageElement;
+    width: number;
+    height: number;
+    cleanup: () => void;
+}> {
+    if (typeof createImageBitmap === 'function') {
+        try {
+            // Modern standard: automatically handles EXIF orientation
+            const bitmap = await createImageBitmap(file, {
+                imageOrientation: 'from-image',
+            });
+
+            return {
+                source: bitmap,
+                width: bitmap.width,
+                height: bitmap.height,
+                cleanup: () => bitmap.close(),
+            };
+        } catch {
+            // Fall back to Image element if createImageBitmap with options fails
+        }
+    }
+
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const url = URL.createObjectURL(file);
+
+        img.onload = () => {
+            resolve({
+                source: img,
+                width: img.naturalWidth,
+                height: img.naturalHeight,
+                cleanup: () => URL.revokeObjectURL(url),
+            });
+        };
+
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error(`Failed to load image: ${file.name}`));
+        };
+
+        img.src = url;
+    });
+}
+
+/**
+ * Compresses a single image file on the client side using HTML5 Canvas.
+ * Converts to WebP format (or JPEG fallback) and reduces dimensions to max 2048px.
+ */
+export async function compressImage(
+    file: File,
+    options: CompressOptions = {},
+): Promise<File> {
+    // 1. Skip non-raster or already tiny files
+    if (!isCompressibleImage(file)) {
+        return file;
+    }
+
+    const opts = { ...DEFAULT_OPTIONS, ...options };
+
+    // If file is already smaller than the skip threshold and within bounds, skip
+    if (
+        file.size <= opts.skipThresholdKB * 1024 &&
+        file.type === opts.targetFormat
+    ) {
+        return file;
+    }
+
+    let sourceObj: {
+        source: ImageBitmap | HTMLImageElement;
+        width: number;
+        height: number;
+        cleanup: () => void;
+    } | null = null;
+    let canvas: HTMLCanvasElement | null = null;
+
+    try {
+        sourceObj = await loadImageSource(file);
+        const { width, height } = calculateDimensions(
+            sourceObj.width,
+            sourceObj.height,
+            opts.maxWidth,
+            opts.maxHeight,
+        );
+
+        canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) {
+            return file;
+        }
+
+        // Draw image onto canvas
+        ctx.drawImage(sourceObj.source, 0, 0, width, height);
+
+        // Convert canvas to Blob
+        const blob = await new Promise<Blob | null>((resolve) => {
+            canvas!.toBlob((b) => resolve(b), opts.targetFormat, opts.quality);
+        });
+
+        if (!blob) {
+            // If WebP export failed, fallback to JPEG
+            const fallbackBlob = await new Promise<Blob | null>((resolve) => {
+                canvas!.toBlob((b) => resolve(b), 'image/jpeg', opts.quality);
+            });
+
+            if (!fallbackBlob || fallbackBlob.size >= file.size) {
+                return file;
+            }
+
+            const newName = file.name.replace(/\.[^/.]+$/, '') + '.jpg';
+
+            return new File([fallbackBlob], newName, { type: 'image/jpeg' });
+        }
+
+        // Only use compressed file if it's actually smaller than the original
+        if (blob.size >= file.size) {
+            return file;
+        }
+
+        const extension =
+            opts.targetFormat === 'image/webp'
+                ? '.webp'
+                : opts.targetFormat === 'image/png'
+                  ? '.png'
+                  : '.jpg';
+        const newName = file.name.replace(/\.[^/.]+$/, '') + extension;
+
+        return new File([blob], newName, { type: opts.targetFormat });
+    } catch (err) {
+        console.warn(
+            `[compressImage] Failed to compress ${file.name}, using original:`,
+            err,
+        );
+
+        return file;
+    } finally {
+        // Explicitly clean up memory
+        if (sourceObj) {
+            sourceObj.cleanup();
+        }
+
+        if (canvas) {
+            canvas.width = 0;
+            canvas.height = 0;
+            canvas = null;
+        }
+    }
+}
+
+/**
+ * Sequentially compresses an array of images one by one.
+ * This guarantees peak RAM on budget mobile devices never exceeds ~80MB,
+ * completely preventing out-of-memory browser tab crashes.
+ */
+export async function compressImagesSequentially(
+    files: File[],
+    onProgress?: (processed: number, total: number, currentFile: File) => void,
+    options: CompressOptions = {},
+): Promise<File[]> {
+    const total = files.length;
+    const results: File[] = [];
+
+    for (let i = 0; i < total; i++) {
+        const file = files[i];
+        onProgress?.(i + 1, total, file);
+
+        const compressed = await compressImage(file, options);
+        results.push(compressed);
+
+        // Small yield to browser event loop to let garbage collection occur
+        await new Promise((resolve) => setTimeout(resolve, 10));
+    }
+
+    return results;
+}
diff --git a/resources/js/lib/useImageUpload.ts b/resources/js/lib/useImageUpload.ts
new file mode 100644
index 00000000..265a28d1
--- /dev/null
+++ b/resources/js/lib/useImageUpload.ts
@@ -0,0 +1,138 @@
+import { ref, onUnmounted } from 'vue';
+import { compressImage, formatFileSize } from './imageCompression';
+import type { CompressOptions } from './imageCompression';
+
+export interface UseImageUploadOptions {
+    maxOriginalSizeMB?: number; // Max size the file picker will accept before compression (default: 20MB)
+    maxCompressedSizeMB?: number; // Max size allowed after compression (default: 5MB)
+    allowedTypes?: string[]; // Allowed MIME types
+    compressOptions?: CompressOptions;
+    onCompressed?: (file: File) => void;
+    onError?: (errorMsg: string) => void;
+}
+
+export function useImageUpload(options: UseImageUploadOptions = {}) {
+    const maxOriginalSizeMB = options.maxOriginalSizeMB ?? 20;
+    const maxCompressedSizeMB = options.maxCompressedSizeMB ?? 5;
+    const allowedTypes = options.allowedTypes ?? [
+        'image/jpeg',
+        'image/png',
+        'image/webp',
+    ];
+
+    const file = ref<File | null>(null);
+    const previewUrl = ref<string | null>(null);
+    const isCompressing = ref(false);
+    const error = ref<string | null>(null);
+    const originalSizeFormatted = ref<string | null>(null);
+    const compressedSizeFormatted = ref<string | null>(null);
+
+    const cleanupPreview = () => {
+        if (previewUrl.value && previewUrl.value.startsWith('blob:')) {
+            URL.revokeObjectURL(previewUrl.value);
+            previewUrl.value = null;
+        }
+    };
+
+    const clear = () => {
+        cleanupPreview();
+        file.value = null;
+        error.value = null;
+        originalSizeFormatted.value = null;
+        compressedSizeFormatted.value = null;
+        isCompressing.value = false;
+    };
+
+    const processFile = async (rawFile: File): Promise<File | null> => {
+        error.value = null;
+
+        // 1. Validate file type
+        if (!allowedTypes.includes(rawFile.type)) {
+            const msg = 'অনুমোদিত ফরম্যাট: JPG, PNG, WEBP।';
+            error.value = msg;
+            options.onError?.(msg);
+
+            return null;
+        }
+
+        // 2. Validate original size before compression (e.g. max 20MB)
+        if (rawFile.size > maxOriginalSizeMB * 1024 * 1024) {
+            const msg = `ফাইলের আকার ${maxOriginalSizeMB}MB এর চেয়ে কম হতে হবে।`;
+            error.value = msg;
+            options.onError?.(msg);
+
+            return null;
+        }
+
+        originalSizeFormatted.value = formatFileSize(rawFile.size);
+        cleanupPreview();
+
+        try {
+            isCompressing.value = true;
+            let resultFile: File;
+
+            try {
+                resultFile = await compressImage(
+                    rawFile,
+                    options.compressOptions,
+                );
+            } catch (err: any) {
+                console.error(
+                    '[useImageUpload] Compression error, using original:',
+                    err,
+                );
+                resultFile = rawFile;
+            }
+
+            // Enforce max size on the final compressed file
+            if (resultFile.size > maxCompressedSizeMB * 1024 * 1024) {
+                const msg = `ছবিটির আকার ${maxCompressedSizeMB}MB এর চেয়ে কম হতে হবে।`;
+                error.value = msg;
+                options.onError?.(msg);
+
+                return null;
+            }
+
+            compressedSizeFormatted.value = formatFileSize(resultFile.size);
+            file.value = resultFile;
+            previewUrl.value = URL.createObjectURL(resultFile);
+
+            options.onCompressed?.(resultFile);
+
+            return resultFile;
+        } finally {
+            isCompressing.value = false;
+        }
+    };
+
+    const handleFileInput = async (event: Event): Promise<File | null> => {
+        const target = event.target as HTMLInputElement;
+
+        if (!target.files || target.files.length === 0) {
+            return null;
+        }
+
+        const selected = target.files[0];
+        const result = await processFile(selected);
+        // Reset input value so re-selecting the same file triggers change
+        target.value = '';
+
+        return result;
+    };
+
+    onUnmounted(() => {
+        cleanupPreview();
+    });
+
+    return {
+        file,
+        previewUrl,
+        isCompressing,
+        error,
+        originalSizeFormatted,
+        compressedSizeFormatted,
+        processFile,
+        handleFileInput,
+        clear,
+    };
+}
diff --git a/resources/js/pages/Forum/Create.vue b/resources/js/pages/Forum/Create.vue
index cc3aca08..b5accd82 100644
--- a/resources/js/pages/Forum/Create.vue
+++ b/resources/js/pages/Forum/Create.vue
@@ -12,6 +12,7 @@ import {
     Loader2,
 } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
+import { compressImage } from '@/lib/imageCompression';
 
 interface NodeItem {
     id: number;
@@ -85,29 +86,75 @@ const setCurriculum = (curriculum: 'hsc' | 'ssc') => {
     form.node_id = '';
 };
 
+const isCompressingImage = ref(false);
+const imageError = ref('');
+
+const processSelectedImage = async (rawFile: File) => {
+    imageError.value = '';
+
+    const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+
+    if (!allowed.includes(rawFile.type)) {
+        imageError.value = 'অনুমোদিত ফরম্যাট: JPG, PNG, WEBP।';
+
+        return;
+    }
+
+    try {
+        isCompressingImage.value = true;
+        let resultFile: File;
+
+        try {
+            resultFile = await compressImage(rawFile, {
+                maxWidth: 2048,
+                maxHeight: 2048,
+                quality: 0.85,
+            });
+        } catch {
+            resultFile = rawFile;
+        }
+
+        if (resultFile.size > 5 * 1024 * 1024) {
+            imageError.value =
+                'ছবিটি অপটিমাইজ করার পরও ৫MB এর বেশি। অনুগ্রহ করে ছোট ছবি নির্বাচন করুন।';
+
+            return;
+        }
+
+        form.image = resultFile;
+
+        if (imagePreview.value) {
+            URL.revokeObjectURL(imagePreview.value);
+        }
+
+        imagePreview.value = URL.createObjectURL(resultFile);
+    } finally {
+        isCompressingImage.value = false;
+    }
+};
+
 const handleFileChange = (e: Event) => {
     const target = e.target as HTMLInputElement;
 
     if (target.files && target.files[0]) {
-        const file = target.files[0];
-        form.image = file;
-        imagePreview.value = URL.createObjectURL(file);
+        processSelectedImage(target.files[0]);
     }
 };
 
 const handleFileDrop = (e: DragEvent) => {
     if (e.dataTransfer?.files && e.dataTransfer.files[0]) {
         const file = e.dataTransfer.files[0];
+        const allowed = ['image/jpeg', 'image/png', 'image/webp'];
 
-        if (file.type.startsWith('image/')) {
-            form.image = file;
-            imagePreview.value = URL.createObjectURL(file);
+        if (allowed.includes(file.type)) {
+            processSelectedImage(file);
         }
     }
 };
 
 const removeImage = () => {
     form.image = null;
+    imageError.value = '';
 
     if (imagePreview.value) {
         URL.revokeObjectURL(imagePreview.value);
@@ -120,6 +167,10 @@ const removeImage = () => {
 };
 
 const handleOpenModal = () => {
+    if (isCompressingImage.value) {
+        return;
+    }
+
     // Basic frontend checks before modal
     if (!form.title.trim()) {
         form.post('/forum'); // trigger inertia validation errors if fields are empty
@@ -132,7 +183,7 @@ const handleOpenModal = () => {
 };
 
 const submit = () => {
-    if (!modalConfirmed.value) {
+    if (isCompressingImage.value || !modalConfirmed.value) {
         return;
     }
 
@@ -362,7 +413,7 @@ const submit = () => {
                     >
                         Attach Image
                         <span class="text-xs font-normal text-slate-400"
-                            >(Optional, Max 5MB)</span
+                            >(Optional, Max 20MB, auto-optimized)</span
                         >
                     </label>
 
@@ -372,6 +423,7 @@ const submit = () => {
                             type="file"
                             id="post-image-file"
                             accept="image/jpeg,image/png,image/jpg,image/webp"
+                            :disabled="isCompressingImage"
                             @click="
                                 (e) =>
                                     ((e.target as HTMLInputElement).value = '')
@@ -385,19 +437,32 @@ const submit = () => {
                             @dragenter.prevent
                             @drop.prevent="handleFileDrop"
                             class="flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-6 text-center transition hover:border-indigo-500 hover:bg-indigo-50/20 dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-indigo-500"
+                            :class="{
+                                'cursor-not-allowed opacity-60':
+                                    isCompressingImage,
+                            }"
                         >
+                            <Loader2
+                                v-if="isCompressingImage"
+                                class="mb-2 h-6 w-6 animate-spin text-indigo-600 dark:text-indigo-400"
+                            />
                             <Upload
+                                v-else
                                 class="mb-2 h-6 w-6 text-slate-400 dark:text-gray-500"
                             />
                             <span
                                 class="text-xs font-semibold text-slate-700 dark:text-gray-300"
                             >
-                                Click or drag to upload an image
+                                {{
+                                    isCompressingImage
+                                        ? 'Optimizing image...'
+                                        : 'Click or drag to upload an image'
+                                }}
                             </span>
                             <span
                                 class="mt-1 text-[11px] text-slate-400 dark:text-gray-500"
                             >
-                                JPG, PNG, WEBP up to 5MB
+                                JPG, PNG, WEBP up to 20MB (auto-optimized)
                             </span>
                         </label>
                     </div>
@@ -419,6 +484,10 @@ const submit = () => {
                         </button>
                     </div>
 
+                    <p v-if="imageError" class="mt-1.5 text-xs text-rose-500">
+                        {{ imageError }}
+                    </p>
+
                     <p
                         v-if="form.errors.image"
                         class="mt-1.5 text-xs text-rose-500"
@@ -439,7 +508,7 @@ const submit = () => {
                     </Link>
                     <button
                         type="submit"
-                        :disabled="form.processing"
+                        :disabled="form.processing || isCompressingImage"
                         class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-6 py-2.5 text-xs font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50"
                     >
                         <Send class="h-4 w-4" />
@@ -572,7 +641,11 @@ const submit = () => {
                             <button
                                 type="button"
                                 @click="submit"
-                                :disabled="!modalConfirmed || form.processing"
+                                :disabled="
+                                    !modalConfirmed ||
+                                    form.processing ||
+                                    isCompressingImage
+                                "
                                 class="inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-4 py-2 text-xs font-semibold text-white shadow-xs transition hover:bg-indigo-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50"
                             >
                                 <Loader2
diff --git a/resources/js/pages/Forum/Show.vue b/resources/js/pages/Forum/Show.vue
index 66465bb7..22ed861b 100644
--- a/resources/js/pages/Forum/Show.vue
+++ b/resources/js/pages/Forum/Show.vue
@@ -31,6 +31,7 @@ import ImageViewerModal from '@/components/ImageViewerModal.vue';
 import Pagination from '@/components/Pagination.vue';
 import UserListItem from '@/components/UserListItem.vue';
 import VerifiedBadge from '@/components/VerifiedBadge.vue';
+import { compressImage } from '@/lib/imageCompression';
 import { useAuth } from '@/lib/useAuth';
 import { getCsrfToken } from '@/lib/useCsrf';
 import { formatTimeAgo } from '@/lib/useDate';
@@ -374,19 +375,62 @@ const answerForm = useForm({
 
 const answerImagePreview = ref<string | null>(null);
 const answerFileInputRef = ref<HTMLInputElement | null>(null);
+const isCompressingAnswerImage = ref(false);
 
-const handleAnswerFileChange = (e: Event) => {
+const handleAnswerFileChange = async (e: Event) => {
     const target = e.target as HTMLInputElement;
 
     if (target.files && target.files[0]) {
-        const file = target.files[0];
-        answerForm.image = file;
-        answerImagePreview.value = URL.createObjectURL(file);
+        const rawFile = target.files[0];
+        answerForm.errors.image = '';
+
+        const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+
+        if (!allowed.includes(rawFile.type)) {
+            answerForm.errors.image = 'অনুমোদিত ফরম্যাট: JPG, PNG, WEBP।';
+            target.value = '';
+
+            return;
+        }
+
+        try {
+            isCompressingAnswerImage.value = true;
+            let resultFile: File;
+
+            try {
+                resultFile = await compressImage(rawFile, {
+                    maxWidth: 2048,
+                    maxHeight: 2048,
+                    quality: 0.85,
+                });
+            } catch {
+                resultFile = rawFile;
+            }
+
+            if (resultFile.size > 5 * 1024 * 1024) {
+                answerForm.errors.image =
+                    'ছবিটি অপটিমাইজ করার পরও ৫MB এর বেশি। অনুগ্রহ করে ছোট ছবি নির্বাচন করুন।';
+                target.value = '';
+
+                return;
+            }
+
+            answerForm.image = resultFile;
+
+            if (answerImagePreview.value) {
+                URL.revokeObjectURL(answerImagePreview.value);
+            }
+
+            answerImagePreview.value = URL.createObjectURL(resultFile);
+        } finally {
+            isCompressingAnswerImage.value = false;
+        }
     }
 };
 
 const removeAnswerImage = () => {
     answerForm.image = null;
+    answerForm.errors.image = '';
 
     if (answerImagePreview.value) {
         URL.revokeObjectURL(answerImagePreview.value);
@@ -399,6 +443,10 @@ const removeAnswerImage = () => {
 };
 
 const submitAnswer = () => {
+    if (isCompressingAnswerImage.value) {
+        return;
+    }
+
     if (!requireAuth('Please sign in to answer this question.')) {
         return;
     }
@@ -459,18 +507,62 @@ const cancelReply = () => {
     }
 };
 
-const handleReplyFileChange = (e: Event) => {
+const isCompressingReplyImage = ref(false);
+
+const handleReplyFileChange = async (e: Event) => {
     const target = e.target as HTMLInputElement;
 
     if (target.files && target.files[0]) {
-        const file = target.files[0];
-        replyForm.image = file;
-        replyImagePreview.value = URL.createObjectURL(file);
+        const rawFile = target.files[0];
+        replyForm.errors.image = '';
+
+        const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+
+        if (!allowed.includes(rawFile.type)) {
+            replyForm.errors.image = 'অনুমোদিত ফরম্যাট: JPG, PNG, WEBP।';
+            target.value = '';
+
+            return;
+        }
+
+        try {
+            isCompressingReplyImage.value = true;
+            let resultFile: File;
+
+            try {
+                resultFile = await compressImage(rawFile, {
+                    maxWidth: 2048,
+                    maxHeight: 2048,
+                    quality: 0.85,
+                });
+            } catch {
+                resultFile = rawFile;
+            }
+
+            if (resultFile.size > 5 * 1024 * 1024) {
+                replyForm.errors.image =
+                    'ছবিটি অপটিমাইজ করার পরও ৫MB এর বেশি। অনুগ্রহ করে ছোট ছবি নির্বাচন করুন।';
+                target.value = '';
+
+                return;
+            }
+
+            replyForm.image = resultFile;
+
+            if (replyImagePreview.value) {
+                URL.revokeObjectURL(replyImagePreview.value);
+            }
+
+            replyImagePreview.value = URL.createObjectURL(resultFile);
+        } finally {
+            isCompressingReplyImage.value = false;
+        }
     }
 };
 
 const removeReplyImage = () => {
     replyForm.image = null;
+    replyForm.errors.image = '';
 
     if (replyImagePreview.value) {
         URL.revokeObjectURL(replyImagePreview.value);
@@ -493,6 +585,10 @@ const removeReplyImage = () => {
 };
 
 const submitReply = () => {
+    if (isCompressingReplyImage.value) {
+        return;
+    }
+
     if (!requireAuth('Please sign in to reply.')) {
         return;
     }
@@ -1441,7 +1537,10 @@ function parseMentions(
                                 </button>
                                 <button
                                     type="submit"
-                                    :disabled="replyForm.processing"
+                                    :disabled="
+                                        replyForm.processing ||
+                                        isCompressingReplyImage
+                                    "
                                     class="inline-flex items-center gap-1 rounded-lg bg-indigo-600 px-3 py-1 text-xs font-semibold text-white shadow-xs hover:bg-indigo-700 disabled:opacity-50"
                                 >
                                     <Send class="h-3 w-3" />
@@ -1593,7 +1692,9 @@ function parseMentions(
                 <div class="flex justify-end pt-2">
                     <button
                         type="submit"
-                        :disabled="answerForm.processing"
+                        :disabled="
+                            answerForm.processing || isCompressingAnswerImage
+                        "
                         class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-5 py-2.5 text-xs font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:scale-[0.98] disabled:opacity-50"
                     >
                         <Send class="h-4 w-4" />
diff --git a/resources/js/pages/Profile.vue b/resources/js/pages/Profile.vue
index 1b1ea113..c908ab55 100644
--- a/resources/js/pages/Profile.vue
+++ b/resources/js/pages/Profile.vue
@@ -13,6 +13,7 @@ import {
     LifeBuoy,
 } from 'lucide-vue-next';
 import { computed, ref } from 'vue';
+import { compressImage } from '@/lib/imageCompression';
 
 const props = defineProps({
     user: Object,
@@ -27,6 +28,7 @@ const isUnverified = computed(() => {
 
 const showAdvancedSettings = ref(false);
 const showConfirmModal = ref(false);
+const isCompressingAvatar = ref(false);
 
 const form = useForm({
     _method: 'PUT',
@@ -41,6 +43,48 @@ const form = useForm({
     receive_emails: user.value?.receive_emails ?? true,
 });
 
+const handleAvatarSelect = async (event: Event) => {
+    const input = event.target as HTMLInputElement;
+
+    if (input.files && input.files[0]) {
+        const raw = input.files[0];
+        form.errors.file = '';
+
+        const allowed = ['image/jpeg', 'image/png', 'image/webp'];
+
+        if (!allowed.includes(raw.type)) {
+            form.errors.file = 'অনুমোদিত ফরম্যাট: JPG, PNG, WEBP।';
+
+            return;
+        }
+
+        try {
+            isCompressingAvatar.value = true;
+            let resultFile: File;
+
+            try {
+                resultFile = await compressImage(raw, {
+                    maxWidth: 512,
+                    maxHeight: 512,
+                    quality: 0.85,
+                });
+            } catch {
+                resultFile = raw;
+            }
+
+            if (resultFile.size > 5 * 1024 * 1024) {
+                form.errors.file = 'ছবিটির আকার ৫MB এর চেয়ে কম হতে হবে।';
+
+                return;
+            }
+
+            form.file = resultFile;
+        } finally {
+            isCompressingAvatar.value = false;
+        }
+    }
+};
+
 const handleEmailToggle = () => {
     if (form.receive_emails) {
         showConfirmModal.value = true;
@@ -55,6 +99,10 @@ const confirmDisable = () => {
 };
 
 const submitForm = () => {
+    if (isCompressingAvatar.value) {
+        return;
+    }
+
     form.post('/profile', {
         preserveScroll: true,
     });
@@ -320,19 +368,27 @@ const submitForm = () => {
                 </div>
 
                 <div class="flex flex-col gap-6 sm:flex-row sm:items-center">
-                    <div class="shrink-0">
+                    <div class="relative shrink-0">
                         <img
-                            v-if="user?.image_url"
+                            v-if="user?.image_url && !isCompressingAvatar"
                             :src="user.image_url"
                             :alt="user.name"
                             class="h-20 w-20 rounded-full border-2 border-slate-200 object-cover shadow-xs dark:border-gray-700"
                         />
                         <div
-                            v-else
+                            v-else-if="!isCompressingAvatar"
                             class="flex h-20 w-20 items-center justify-center rounded-full bg-slate-900 text-xl font-bold text-white dark:bg-gray-800"
                         >
                             {{ user?.name?.charAt(0)?.toUpperCase() }}
                         </div>
+                        <div
+                            v-if="isCompressingAvatar"
+                            class="flex h-20 w-20 items-center justify-center rounded-full border-2 border-dashed border-indigo-400 bg-indigo-50 dark:bg-indigo-950/40"
+                        >
+                            <Loader2
+                                class="h-6 w-6 animate-spin text-indigo-600 dark:text-indigo-400"
+                            />
+                        </div>
                     </div>
 
                     <div class="flex-1">
@@ -345,13 +401,9 @@ const submitForm = () => {
                         <input
                             type="file"
                             id="file"
-                            accept="image/*"
-                            @change="
-                                form.file =
-                                    ($event.target as HTMLInputElement)
-                                        .files?.[0] || null
-                            "
-                            :disabled="form.processing"
+                            accept="image/jpeg,image/png,image/webp"
+                            @change="handleAvatarSelect"
+                            :disabled="form.processing || isCompressingAvatar"
                             class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-500 transition outline-none file:mr-4 file:rounded-md file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-slate-700 file:transition hover:file:bg-slate-200 disabled:bg-slate-50 dark:border-gray-600 dark:bg-gray-950 dark:text-gray-400 dark:file:bg-gray-800 dark:file:text-gray-300 dark:hover:file:bg-gray-700"
                             :class="{
                                 'border-rose-500 focus:ring-rose-500/20':
@@ -361,7 +413,11 @@ const submitForm = () => {
                         <p
                             class="mt-1 text-xs text-slate-400 dark:text-gray-500"
                         >
-                            Supports PNG, JPG, or WEBP up to 2MB.
+                            {{
+                                isCompressingAvatar
+                                    ? 'Optimizing avatar...'
+                                    : 'Supports PNG, JPG, or WEBP up to 20MB (auto-optimized).'
+                            }}
                         </p>
                         <p
                             v-if="form.errors.file"
@@ -623,7 +679,7 @@ const submitForm = () => {
             <div class="flex justify-end pt-2">
                 <button
                     type="submit"
-                    :disabled="form.processing"
+                    :disabled="form.processing || isCompressingAvatar"
                     class="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-6 py-2.5 text-sm font-semibold text-white shadow-xs transition hover:bg-blue-700 focus:ring-4 focus:ring-blue-600/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                 >
                     <Loader2
diff --git a/resources/js/pages/auth/Onboarding.vue b/resources/js/pages/auth/Onboarding.vue
index 88ebb83e..14ff2563 100644
--- a/resources/js/pages/auth/Onboarding.vue
+++ b/resources/js/pages/auth/Onboarding.vue
@@ -10,6 +10,7 @@ import {
     Loader2,
 } from 'lucide-vue-next';
 import { computed, onUnmounted, ref } from 'vue';
+import { compressImage } from '@/lib/imageCompression';
 
 interface OnboardingUser {
     google_id: string;
@@ -39,28 +40,70 @@ const form = useForm<{
 
 const previewUrl = ref<string | null>(null);
 const fileInputRef = ref<HTMLInputElement | null>(null);
+const isCompressing = ref(false);
 
-const handleImageChange = (e: Event) => {
+const handleImageChange = async (e: Event) => {
     const target = e.target as HTMLInputElement;
-    const file = target.files?.[0];
+    const rawFile = target.files?.[0];
 
-    if (file) {
-        form.image = file;
+    if (rawFile) {
+        form.errors.image = '';
+        const allowed = ['image/jpeg', 'image/png', 'image/webp'];
 
-        if (previewUrl.value) {
-            URL.revokeObjectURL(previewUrl.value);
+        if (!allowed.includes(rawFile.type)) {
+            form.errors.image = 'অনুমোদিত ফরম্যাট: JPG, PNG, WEBP।';
+
+            return;
         }
 
-        previewUrl.value = URL.createObjectURL(file);
+        try {
+            isCompressing.value = true;
+            let resultFile: File;
+
+            try {
+                resultFile = await compressImage(rawFile, {
+                    maxWidth: 512,
+                    maxHeight: 512,
+                    quality: 0.85,
+                });
+            } catch {
+                resultFile = rawFile;
+            }
+
+            if (resultFile.size > 5 * 1024 * 1024) {
+                form.errors.image = 'ছবিটির আকার ৫MB এর চেয়ে কম হতে হবে।';
+
+                return;
+            }
+
+            form.image = resultFile;
+
+            if (previewUrl.value) {
+                URL.revokeObjectURL(previewUrl.value);
+            }
+
+            previewUrl.value = URL.createObjectURL(resultFile);
+        } finally {
+            isCompressing.value = false;
+        }
     }
 };
 
 const triggerFileInput = () => {
+    if (isCompressing.value) {
+        return;
+    }
+
     fileInputRef.value?.click();
 };
 
 const removeCustomImage = () => {
+    if (isCompressing.value) {
+        return;
+    }
+
     form.image = null;
+    form.errors.image = '';
 
     if (previewUrl.value) {
         URL.revokeObjectURL(previewUrl.value);
@@ -79,6 +122,10 @@ onUnmounted(() => {
 });
 
 const submit = () => {
+    if (isCompressing.value) {
+        return;
+    }
+
     form.post('/onboarding', {
         forceFormData: true,
     });
@@ -145,8 +192,16 @@ const submit = () => {
                     <div class="flex items-center gap-3.5">
                         <!-- Avatar with upload trigger overlay -->
                         <div class="group relative shrink-0">
+                            <div
+                                v-if="isCompressing"
+                                class="flex h-14 w-14 items-center justify-center rounded-full border-2 border-dashed border-indigo-400 bg-indigo-50 dark:bg-indigo-950/40"
+                            >
+                                <Loader2
+                                    class="h-5 w-5 animate-spin text-indigo-600 dark:text-indigo-400"
+                                />
+                            </div>
                             <img
-                                v-if="previewUrl || props.user.avatar"
+                                v-else-if="previewUrl || props.user.avatar"
                                 :src="previewUrl || props.user.avatar!"
                                 :alt="props.user.name"
                                 class="h-14 w-14 rounded-full border-2 border-indigo-500/20 object-cover shadow-xs dark:border-indigo-400/30"
@@ -165,7 +220,8 @@ const submit = () => {
                             <button
                                 type="button"
                                 @click="triggerFileInput"
-                                class="absolute -right-1 -bottom-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-indigo-600 text-white shadow-md transition hover:scale-110 hover:bg-indigo-700 active:scale-95 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+                                :disabled="isCompressing"
+                                class="absolute -right-1 -bottom-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-indigo-600 text-white shadow-md transition hover:scale-110 hover:bg-indigo-700 active:scale-95 disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
                                 title="Upload custom photo"
                             >
                                 <Camera class="h-3.5 w-3.5" />
@@ -188,12 +244,15 @@ const submit = () => {
                                 <button
                                     type="button"
                                     @click="triggerFileInput"
-                                    class="cursor-pointer text-[11px] font-semibold text-indigo-600 hover:text-indigo-700 hover:underline dark:text-indigo-400 dark:hover:text-indigo-300"
+                                    :disabled="isCompressing"
+                                    class="cursor-pointer text-[11px] font-semibold text-indigo-600 hover:text-indigo-700 hover:underline disabled:opacity-50 dark:text-indigo-400 dark:hover:text-indigo-300"
                                 >
                                     {{
-                                        previewUrl
-                                            ? 'Change Photo'
-                                            : 'Upload Photo'
+                                        isCompressing
+                                            ? 'Optimizing...'
+                                            : previewUrl
+                                              ? 'Change Photo'
+                                              : 'Upload Photo'
                                     }}
                                 </button>
                                 <span
@@ -205,7 +264,8 @@ const submit = () => {
                                     v-if="previewUrl"
                                     type="button"
                                     @click="removeCustomImage"
-                                    class="cursor-pointer text-[11px] font-medium text-rose-500 hover:text-rose-600 hover:underline dark:text-rose-400"
+                                    :disabled="isCompressing"
+                                    class="cursor-pointer text-[11px] font-medium text-rose-500 hover:text-rose-600 hover:underline disabled:opacity-50 dark:text-rose-400"
                                 >
                                     Reset
                                 </button>
@@ -216,7 +276,7 @@ const submit = () => {
                         <input
                             ref="fileInputRef"
                             type="file"
-                            accept="image/*"
+                            accept="image/jpeg,image/png,image/webp"
                             class="hidden"
                             @change="handleImageChange"
                         />
@@ -351,7 +411,7 @@ const submit = () => {
                     <div class="pt-2">
                         <button
                             type="submit"
-                            :disabled="form.processing"
+                            :disabled="form.processing || isCompressing"
                             class="flex w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 px-4 py-3.5 text-sm font-bold text-white shadow-xs transition-all hover:bg-indigo-700 hover:shadow-md active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600"
                         >
                             <Loader2