Support Thread

Auto resize images before upload to forum

📅 👤 ASP Playground
Auto resize images before upload to forum — APG vNext Guide

This archived community thread from the APG vNext support forum discusses: Auto resize images before upload to forum.

About This Topic

Hi Sam, Can we set forum auto resize images before upload to photo gallery or in posting instead of limit file size? e.g in facebook members can up...

Getting Help with APG vNext

APG vNext is a powerful ASP.NET forum and community platform. For questions related to this topic:

If you need direct assistance, the support team is active in the community forum.

Auto-Resizing Images Before Upload in APG vNext

Large image uploads are one of the most common causes of slow forum page loads and excessive disk usage. APG vNext includes a server-side image resize pipeline that can automatically downscale images to a maximum dimension on upload — before saving to disk. This guide covers both the server-side configuration and the optional client-side pre-resize (which reduces upload bandwidth as well).

Server-Side Auto-Resize Configuration

<!-- web.config: auto-resize uploaded images -->
<appSettings>
  <add key="APG.Upload.Image.AutoResize"        value="true" />
  <add key="APG.Upload.Image.MaxWidthPx"        value="1200" />
  <add key="APG.Upload.Image.MaxHeightPx"       value="900" />
  <add key="APG.Upload.Image.ResizeQuality"     value="85" />
  <add key="APG.Upload.Image.ConvertToWebP"     value="false" />
  <add key="APG.Upload.Image.StripExifData"     value="true" />
</appSettings>

With these settings, any image uploaded wider than 1200px or taller than 900px is resized proportionally. EXIF metadata (which can contain GPS location data) is stripped, protecting member privacy.

Client-Side Pre-Resize with Canvas API

Server-side resize processes the full original file — a 12MP phone photo might be 8MB before resize. Adding client-side pre-resize in the APG vNext skin's JavaScript reduces upload size to under 500KB before the file even leaves the browser:

// APG vNext skin — client-side image pre-resize
async function resizeImageBeforeUpload(file, maxWidth = 1200, quality = 0.85) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const scale  = Math.min(1, maxWidth / img.width);
      const canvas = document.createElement('canvas');
      canvas.width  = Math.round(img.width  * scale);
      canvas.height = Math.round(img.height * scale);
      canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
      canvas.toBlob(resolve, 'image/jpeg', quality);
    };
    img.src = URL.createObjectURL(file);
  });
}

// Hook into APG vNext upload input
document.querySelector('#apg-upload-input')?.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file || !file.type.startsWith('image/')) return;
  const resized = await resizeImageBeforeUpload(file);
  // Replace file in DataTransfer for form submission
  const dt = new DataTransfer();
  dt.items.add(new File([resized], file.name, { type: 'image/jpeg' }));
  e.target.files = dt.files;
});

Thumbnail Generation

APG vNext generates thumbnails for image attachments automatically when the image is first viewed (lazy generation). Configure thumbnail dimensions:

<add key="APG.Upload.Thumbnail.Width"  value="200" />
<add key="APG.Upload.Thumbnail.Height" value="150" />
<add key="APG.Upload.Thumbnail.Mode"   value="Crop" />
<!-- Modes: Crop, Fit, Stretch -->

WebP Conversion for Storage Efficiency

APG vNext 5.x supports optional automatic WebP conversion for uploaded images. WebP typically delivers 25–35% smaller file sizes compared to JPEG at equivalent quality, with no visible quality loss for forum photography and screenshots.

<!-- Enable WebP conversion on upload -->
<add key="APG.Upload.Image.ConvertToWebP"    value="true" />
<add key="APG.Upload.Image.WebPQuality"      value="80" />
<add key="APG.Upload.Image.WebPFallbackJpeg" value="true" />
<!-- Keep JPEG fallback for browsers that don't support WebP (IE11) -->

With this configuration, APG vNext stores both a WebP version (served to modern browsers) and a JPEG fallback (served to legacy browsers). The <picture> element handles browser detection automatically in the APG vNext thread view template.

Image EXIF Data and Privacy

Photos taken on modern smartphones contain EXIF metadata that may include GPS coordinates, device model, and owner information. Stripping this data before saving protects your members' privacy — particularly important for communities where members might upload photos taken at their home or workplace:

<add key="APG.Upload.Image.StripExifData"     value="true" />
<add key="APG.Upload.Image.StripGPSCoords"   value="true" />
<!-- Strip GPS even if general EXIF stripping is disabled -->

CDN Integration for Uploaded Images

For high-traffic forums, serving uploaded images from a CDN dramatically reduces server bandwidth and improves load time for geographically distributed members. APG vNext supports CDN URL rewriting for uploaded assets:

<!-- Serve uploads from CDN instead of origin server -->
<add key="APG.CDN.Enabled"         value="true" />
<add key="APG.CDN.UploadsBaseURL"  value="https://cdn.yourforum.com/upfiles/" />
<add key="APG.CDN.StaticBaseURL"   value="https://cdn.yourforum.com/assets/" />
<!-- Original files remain on the server;
     APG vNext rewrites image src attributes to CDN URLs in thread views -->

Configure your CDN (Cloudflare, CloudFront, etc.) to pull files from your origin server's /upfiles/ path and cache them with a long TTL (e.g., 30 days with immutable caching headers). APG vNext adds a version hash to uploaded file names to bust the CDN cache on re-upload automatically.

Bulk Image Optimisation for Existing Uploads

If you are enabling auto-resize for the first time on an existing forum, already-uploaded images will not be retroactively resized. Run the built-in bulk optimisation tool:

-- Admin Panel → Tools → Image Optimisation → Bulk Resize Existing Uploads
-- Or via SQL to identify oversized files before processing:
SELECT AttachID, FileName, FileSizeBytes / 1048576.0 AS SizeMB, UploadDate
FROM   apg_Attachments
WHERE  ContentType LIKE 'image/%'
  AND  FileSizeBytes > 5 * 1048576  -- files over 5MB
ORDER  BY FileSizeBytes DESC;

Related Resources

Looking for more help? Browse the support forum or check the Knowledge Base.