본문 이미지 최적화 및 백필 보정

components/content/ProseImage.vue

@@ -10,6 +10,14 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  srcset: {
+    type: String,
+    default: ''
+  },
+  sizes: {
+    type: String,
+    default: '(max-width: 768px) 100vw, 760px'
+  },
   alt: {
     type: String,
     default: ''
@@ -35,6 +43,7 @@ const loadFailed = ref(false)
 const currentSrc = ref(props.src)
 
 const hasRenderableSrc = computed(() => String(currentSrc.value || '').trim().length > 0)
+const currentSrcset = computed(() => currentSrc.value === props.src ? props.srcset : '')
 
 const errorLabel = computed(() => {
   const trimmed = String(props.fallbackSrc || props.src || '').trim()
@@ -111,6 +120,8 @@ const activateImage = () => {
         v-if="hasRenderableSrc && !loadFailed"
         class="prose-image__media w-full object-cover"
         :src="currentSrc"
+        :srcset="currentSrcset || undefined"
+        :sizes="currentSrcset ? sizes : undefined"
         :alt="alt"
         loading="lazy"
         decoding="async"