Resizing images is one of the most common tasks when preparing content for a website, social media, or email newsletters. Files that are too large slow down page loading and use up bandwidth; files that are too small lose detail and look blurry. This guide explains how to resize images correctly, which formats and settings to choose, and how this affects SEO and performance.
Why resize images
Website performance
Images often account for 50–70% of a page's weight. Photos from a camera or phone may have a resolution of 4000×3000 pixels and weigh several megabytes. On a laptop screen, such an image is usually displayed in an area 800–1200 pixels wide. Loading “extra” pixels is a waste of bandwidth and time.
Resizing an image to its target display resolution reduces the amount of data and speeds up loading. This directly affects Core Web Vitals (LCP, INP) and, consequently, search rankings.
Saving bandwidth and hosting resources
Smaller files use less bandwidth for users and put less load on the server. For websites with many images (galleries, catalogs, blogs), the savings can amount to tens of gigabytes per month.
Platform requirements
Social networks and advertising platforms set their own size limits. For example, a YouTube cover image is 2560×1440, and an Open Graph preview is 1200×630. Adjusting images to these sizes improves how they appear in feeds and link previews.
Resizing and cropping: what's the difference?
Resizing (resize / scale)
The image is proportionally reduced or enlarged. Its aspect ratio is preserved. No part of the image is cropped; only the number of pixels changes.
When to use it: preparing images for the web, creating thumbnails, adapting images for different screens. For example, an original photo of 3000×2000 can be resized to 1200×800 for main content or to 300×200 for a preview.
Cropping (crop)
A rectangular area is cut out of the image. Part of the image is removed. The aspect ratio may change.
When to use it: when you need a specific format (a square for an avatar, 16:9 for video), want to focus on a particular area, or need to remove excess content around the edges.
| Method | Aspect ratio | Content loss | Use |
|---|---|---|---|
| Resizing | Preserved | No | Web, thumbnails, responsiveness |
| Cropping | May change | Yes | Avatars, Open Graph, social media |
For most web optimization tasks, resizing is enough. Cropping is needed when a platform requires strict proportions (for example, a square for Instagram).
Image formats when resizing
PNG
Lossless compression and transparency support. Ideal for logos, icons, screenshots, and images with sharp edges. Resizing does not reduce quality; only the resolution changes.
Downside: for photos, the file is larger than JPEG at the same visual quality. Use JPEG or WebP for photos instead.
JPEG
Lossy compression. Optimized for photographs and images with a large number of colors. Resizing and saving again can cause additional quality loss, so avoid repeated resaving.
Recommended quality: 75–85% for web content. Below 70%, artifacts become noticeable; above 90%, the file size is unnecessarily large.
WebP
A modern format from Google. Supports lossy and lossless compression, as well as transparency. At the same visual quality, it produces files 25–35% smaller than JPEG and PNG. Supported by all current browsers.
Recommendation: Web images are better served in JPEG or PNG if support for very old browsers is required.
| Format | Transparency | Compression type | Best for |
|---|---|---|---|
| PNG | Yes | Lossless | Logos, screenshots, graphics |
| JPEG | No | Lossy | Photographs |
| WebP | Yes | Both | General-purpose web use |
Recommended sizes for different platforms
Websites
| Image type | Recommended size | Note |
|---|---|---|
| Hero / banner | 1920×1080 or 1600×900 | Full HD, sufficient for most screens |
| Article content | 1200×800 | Balance of quality and file size |
| Thumbnail / preview | 400×300 or 600×400 | Depends on the grid |
| Icon, avatar | 200×200 or 400×400 | Double the size for Retina |
A width of 1920px covers most monitors. For mobile devices, use srcset and sizes to serve smaller versions on small screens.
Social media
| Platform | Recommended size | Aspect ratio |
|---|---|---|
| Facebook (post) | 1200×630 | 1.91:1 |
| Instagram (feed) | 1080×1080 or 1080×1350 | 1:1 or 4:5 |
| Instagram (story) | 1080×1920 | 9:16 |
| Twitter / X | 1200×675 | 16:9 |
| LinkedIn (post) | 1200×627 | 1.91:1 |
| YouTube (thumbnail) | 1280×720 | 16:9 |
| Open Graph (link preview) | 1200×630 | 1.91:1 |
Using the recommended sizes ensures images display clearly without cropping or distortion in feeds and previews.
Email newsletters
The width of images in emails is usually limited to 600px. For responsive emails, you can prepare 600px and 1200px versions (for Retina).
Export quality settings
When resizing, you can often choose an export format and quality level. Recommendations:
| Format | Quality | Use |
|---|---|---|
| PNG | Lossless (default) | Logos, screenshots, graphics with transparency |
| JPEG | 75–85% | Photos for the web |
| WebP | 80–85% | General-purpose choice for photos |
Quality that is too high (95–100%) barely improves the visual result but noticeably increases file size. Quality that is too low (below 70%) causes artifacts and blur.
How image size affects SEO
Search engines take page loading speed into account. Large, unoptimized images:
- Increase the time to the first contentful paint (LCP)
- Slow down interactivity (INP)
- Worsen Core Web Vitals scores
Google uses Core Web Vitals as a ranking factor. Websites that load quickly have an advantage. Resizing images to their target resolution is one simple and effective way to improve performance.
Other important steps include compression (see the image compression guide), using appropriate alt tags, and lazy loading images below the fold. You can check image optimization on your website with the reChecker image analyzer.
Online image resizing tool
The reChecker image resizing tool lets you resize images right in your browser. Files are not uploaded to a server; all processing takes place locally, which is important for privacy.
Features:
- Set an exact width and height
- Preserve the aspect ratio (lock mode)
- Scale by percentage (25%, 50%, 75%, 150%, 200%)
- Export to PNG, JPEG, or WebP with adjustable quality
- Ready-made presets: 800×600 (web), 1920×1080 (Full HD), 500×500 (square)
PNG, JPG, and WebP formats are supported. The tool is suitable for preparing images for a website, social media, or documents without installing additional software.
Practical scenarios
Preparing an image for a blog
Original: a 4000×3000 photo, 3 MB. Goal: image for an article, 1200px wide.
- Upload the image to the image resizing tool
- Enable aspect ratio preservation
- Set the width to 1200 (the height will be filled in automatically — 900)
- Choose WebP export, quality 82%
- Save the file
Result: an image of ~80–150 KB instead of 3 MB, with no visible loss on screen.
Creating social media previews
Original: any image. Goal: an Open Graph image of 1200×630 for an attractive link preview.
- Upload the image
- Disable aspect ratio preservation (if you need to fit it to 1200×630)
- Set the width to 1200 and the height to 630
- Resizing may crop part of the image; for precise cropping, use an image editor or a dedicated cropping tool
- Export as JPEG 80% or WebP 82%
Batch thumbnail preparation
For many images, it is more convenient to use scripts or a build process. Example using ImageMagick:
# Уменьшить все JPG до ширины 600px с сохранением пропорций
for f in *.jpg; do
convert "$f" -resize 600x -quality 82 "thumb_$f"
doneFor one-off processing of one or several files, the online tool is faster and requires no installation.
Checklist before publishing images
- The size matches where the image will be displayed (no larger than necessary)
- The appropriate format is selected (WebP/JPEG for photos, PNG for graphics)
- JPEG/WebP quality is in the 75–85% range
- Recommended sizes are used for social media
- Alt tags are filled in (for SEO and accessibility)
- For responsive websites, srcset and sizes are configured
Frequently asked questions
Are images uploaded to a server when resized online?
When you use tools that process images in the browser (for example, reChecker Image Resize), the files stay on your device. All processing is done locally through the Canvas API. No data is sent to a server.
Can I resize an image without losing quality?
When scaling down (reducing the size), quality is not lost; only the resolution is reduced. Quality loss occurs with lossy compression (JPEG, lossy WebP). To preserve maximum quality, use PNG or lossless WebP. For photos, JPEG/WebP at 80–85% quality produces an excellent visual result with a smaller file size.
What image size is optimal for a website?
It depends on where the image is used. For main content in an article, use 1200px wide. For hero banners, use 1920px. For thumbnails, use 400–600px. It is important not to upload images larger than they appear on screen. Use srcset to serve different sizes to different devices.
Which format should I use to save images for the web?
For photographs, use WebP (if supported by the browser) or JPEG at 75–85% quality. For logos, icons, and screenshots, use PNG or lossless WebP. WebP produces files 25–35% smaller than JPEG and PNG at the same quality, and is supported by all modern browsers.
Does image size affect SEO?
Yes. Large, unoptimized images slow page loading, worsen Core Web Vitals (LCP, INP), and can negatively affect rankings. Resizing images to the target resolution and compressing them are basic optimization steps. Alt tags, lazy loading, and appropriate formats are also important. You can check images on your site with the reChecker image analyzer.