Best Practices for Optimizing Images Before Uploading Online
Updated: 2025-10-09
Optimising images isn’t just about shrinking file sizes. It’s about delivering crisp visuals that load quickly and work across devices and network conditions. Whether you’re a blogger, photographer or web developer, following the right workflow ensures your pictures look their best without dragging down performance.
Choose the right file type
Every image format has strengths and weaknesses. Use the format that matches your content:
- JPEG / JPG: Ideal for photographs and detailed scenes. Use lossy compression at a quality of 70–85 to balance sharpness and size.
- PNG: Best for graphics, logos, and anything requiring transparency or sharp edges. Stick to PNG‑8 when possible to keep file sizes down.
- WebP / AVIF: Next‑gen formats that offer significantly smaller files than JPEG and PNG while maintaining quality【413330301302362†L220-L234】. Use these when your users’ browsers support them.
- SVG: Perfect for vector graphics and icons. Scales indefinitely without quality loss.
Resize images to their display dimensions
Don’t upload a 4,000‑pixel wide photo if it’s only displayed at 1,200
pixels. Resizing images to the maximum dimensions they’ll be shown
saves more space than any other single technique. Generate multiple
sizes and use the srcset and sizes
attributes so browsers can choose the best version for each device.
Compress appropriately
Even after resizing, files may still be too large. Use a modern encoder to compress your images without noticeably degrading appearance. Smaller images reduce network payload and improve load times【413330301302362†L87-L94】. Aim for a perceptual quality that matches your content: for photos try JPEG quality around 75; for WebP start around 0.75; experiment and check results.
Remove unnecessary metadata
EXIF metadata can add tens of kilobytes to a file. Unless you need camera settings or GPS coordinates, strip metadata during export.
Use descriptive filenames and alt text
Filenames and alt text help search engines understand your images.
Choose meaningful names (e.g. sunset-beach.jpg instead
of IMG_1023.jpg) and write alt descriptions that
describe the content. Good alt text improves accessibility and SEO.
Implement responsive images
The <picture> element with multiple
<source> tags lets you serve different file
formats and sizes to different devices. Provide WebP or AVIF
versions with fallbacks for browsers that don’t support them.
Lazy‑load off‑screen images
Lazy loading delays loading images that aren’t visible on the screen.
Use the loading="lazy" attribute or an intersection
observer to load images only when they enter the viewport. This
improves initial page load times and conserves bandwidth【413330301302362†L137-L150】.
Test across devices and networks
Always preview your optimised images on different screens and connection speeds. Tools like Lighthouse, WebPageTest and real devices can reveal issues with colour banding, compression artifacts or slow downloads that aren’t obvious on your development machine.
Mind your total page weight
Google recommends keeping your pages under 1,600 KiB to achieve good PageSpeed scores【413330301302362†L160-L165】. Every kilobyte counts, so optimise not just images but all assets: CSS, JavaScript and fonts. Use a performance budget to track and enforce limits.
Conclusion
Great images make your content compelling, but they don’t have to bog down your pages. By choosing the right formats, resizing to fit, compressing smartly and embracing next‑gen techniques like WebP and lazy loading, you deliver beautiful visuals and lightning‑fast experiences. SqueezeJPG makes compression easy: drop in your photos, adjust the quality and download optimised files. Your visitors—and your search rankings—will thank you.