Edit and optimize images for web and social media

One of the biggest culprits in slow loading websites are the size of the images and documents that we upload.

Each time someone visits your website on desktop or mobile devices, their browser has to retrieve the code and content to display your webpage. This includes downloading things like stylesheets and image assets which is what causes the page to load, in some cases, slowly.

In this post I’ll teach you more about image file sizes, file types, and how to resize your images for your blog, website, and social media!

Image file sizes

Typically, the smaller the dimensions are of an image, the smaller its file size will be.

Like televisions, digital photos are made up of pixels and there are simply less pixels to display when we size down an image.

Quality

You want to shoot for as low of a file size as you can achieve without compromising the quality of the image itself. The lower the quality, the more pixelated the image will be.

Ideally, you want your image files to be as low in KB as possible. 

When I use several images in a blog post like this very one you’re reading, I aim to keep those images less than 20KB each. With my featured image appearing larger, I aim for less than 75KB.

If an image is over a MB, it should not be uploaded to your website.

If your image is so many kilobytes that it’s now in megabyte territory, it’s a good sign it’s print-ready and not web-ready.

This is especially common for users who upload photos directly from their phones or cameras. These cameras shoot at much larger dimensions so that you retain high quality when printing these photographs.

When you upload photos to Facebook or Instagram, internal software resizes your photos before saving them on their servers. This is why you may see quality differences if you save the same photo from a Facebook album versus looking at the original.

For websites, large files cause slower loading times and page speed issues. Keeping these files on your server can also take up allotted resources.

Image file types

Keeping it simple; if the image has a photograph in it, it should be saved as a JPEG, JPG or WebP.

If the image is graphical in nature, no real photo elements, or requires a transparent background, it should be saved as a PNG or WebP.

💡 Tip: SVG is also a popular format used for 2D graphics, illustrations, icons, and logos. Some file managers don’t recognize this format without additional configuration. Use it if you can. For example, if Squarespace doesn’t allow WebP uploads out of the box, you would use JPEG and PNG.

Image sizing (print vs web)

When we create photos and graphics for print, we need to work at a much higher resolution so that the quality of the work is sustained once it’s printed. 

Imagine this: you are a photographer who shoots weddings.

When you are delivering the final shots to your clients, you are giving them 10 print-ready photos at high resolution. 

Each of these photos have digital widths and heights of 4800px or more, and are possibly hundreds of MB in file size each. Perfect for the client to print their favourite shots at a variety of sizes!

Though, considering the file size of only 1 of these high-res photos, would you upload these same files to your online portfolio? 

If you were to, your website visitors and hosting server (a.k.a your wallet) will not be so ecstatic.

Uploading print-ready images to your websites will cause super slow loading times that may render it unvisitable, depending on your server’s allotted resources. 

Not only does the page load suffer, but imagine that to have a vast portfolio, you have uploaded hundreds of other photos of similar size. It all adds up!

Instead, you would resize these 10 images to make them web-ready – decreasing both their dimensions and file size in the process.

💡 Tip: Make sure you consider all viewports your image will be displayed on. For example, an image on desktop may appear less wide in a four column layout, versus displaying full width in a single column layout on mobile.

To make our images web-ready, we need to consider the purpose of the image (where it will be seen) and how large of an area it will fill (container size).

Earlier, I mentioned what file sizes I shoot for in each blog post and noted that my featured images are larger files due to filling more space.

I know the content container size of my website. So, if an image is set to display within this container, I’ll know the maximum width the image will need to be and can save it at that width.

You can check on content containers and image dimensions of any website, including your own, directly in your browser using Developer Tools.

First, if you know a previous image was already resized to the desired dimensions, visit the web page this image is on and try right clicking the image to open it in a new tab. If you hover over the new tab in your browser window, a small pop-up will display that lists the name of the file and the image dimensions in brackets.

If this doesn’t work, you can right click and select Inspect. Within the highlighted HTML code that displays in a new browser area, you may see the width and height specified here.

If you save the image to your PC, you can right click and select Properties, then the Details tab, to see the dimensions listed.

In WordPress, if the correctly sized image is already in the Media Library, you can view the attachment details to see its dimensions.

💡 Tip: Never enlarge smaller images to fill a bigger space, this will always cause quality loss. Larger images can always be sized down though.

How to choose using an online image resizer vs software

Easy peasy.

If the image is already as-is and doesn’t need any further editing or graphic design, use an online image resizer to download the image in the dimensions you require.

If your image is more of a graphic than a photo, for example, it has some design elements or maintains your brand by way of layers, colors, fonts, etc., you should be working off a savable template that you can reuse so you’re not starting from scratch all the time.

This is when you would want to use software like Affinity, Adobe, or Canva. You can create a template file that is already set to the appropriate dimensions, inserting the photo or elements that are changing from image to image as separate layers.

Online image resizer tools that are free

1. Image Resizer: https://imageresizer.com/ 
2. Adobe Resizer: https://www.adobe.com/express/feature/image/resize 
3. PicResize: https://picresize.com/ 
4. Wix Resizer: https://www.wix.com/tools/image-resizer 
5. Shopify Image Resizer: https://www.shopify.com/tools/image-resizer 
6. VistaCreate Image Resizer: https://create.vista.com/features/resize-design/ 

💡 Tip: You do not need to be a customer of Adobe, Wix, or Shopify to use these free online tools. You do however need to sign into a Vista account to use their free Image Resizer.

Using Image Resizer

Image Resizer’s browser-based tool allows you to easily resize images online for free by selecting an image from your device, Dropbox, Google Drive, or from a URL.

Once you’ve uploaded your image you can resize by one of two ways:

1. By Dimensions – manually entering your desired width and height (in pixels, inches, centimeters, or millimeters), locking or unlocking the Aspect Ratio.
2. As Percentage – use a sliding scale to make your new image smaller or larger based on a percentage.

For example, if my original image was 962px by 1080px and I chose to make it 50% smaller, the new image would be 481px by 540px.

From there, if you are exporting a JPG file, you can also input a target max output file size in KB or MB. Or, save your image as PNG or WebP instead.

Using Adobe’s Resizer

Adobe’s browser-based Image Resizer not only comes with custom resizing features but also lets you export in dimensions used on popular social media platforms.

To use this service, files must be JPEG, JPG, PNG, or WebP and less than 40MB, however – once you’ve selected your image you can change the aspect ratio to any of the following:

• Instagram
• Facebook
• X
• YouTube
• Pinterest
• LinkedIn
• Snapchat
• Standard
• Custom

For example, after uploading an image and selecting Instagram, you are given premade dimensions to select from, such as:

• Story: 1080 x 1920
• Square: 1080 x 1080
• Portrait: 1080 x 1350
• Landscape: 1080 x 566

Using these dimensions will ensure your final image is uploaded to Instagram at their recommended sizes.

Using PicResize

With PicResize you can crop, rotate, flip, and make other adjustments to your image directly in your browser before you move onto resizing options.

Selecting a new size for your picture is done with a drop-down menu featuring options such as:

• 50% smaller
• Fit to screen: 1024 resolution
• Custom

If you choose a percentage or fit to screen option, you will be shown an estimated dimension size before you download your new file.

PicResize also offers adding special effects to your photo:

• Borders
• Rounded Corners
• Grayscale
• Blur, and more

Once you’re ready to download, you can choose your file format (JPG, GIF, PNG, or BMP), JPG quality, and JPG Max Filesize in KB.

Using Wix Resizer

Wix’s no-nonsense image resizer is quite simple. Upload your photo, set your width and height in pixels or percentage, select your format and resize.

Instead of giving you the functionality to automatically set the dimensions to the appropriate platform, Wix gives you the recommended pixel dimensions for all the major social networks below their resizing tool.

Using Shopify Image Resizer

Shopify’s image resizer has built-in export sizes for Instagram, Facebook, YouTube, LinkedIn, TikTok, and more.

However, your custom resizing options are selected by choosing one of the following as opposed to entering your own:

• 1:1 Square
• 2:3 Rectangle
• 3:2 Rectangle
• 4:3 Rectangle
• 9:16 Rectangle
• 16:9 Rectangle

Using VistaCreate Image Resizer

VistaCreate has more than custom sizing options:

• Social Media products like cover photos or profile banners
• Web Design products like blog banners or email headers
• Print-ready products like postcards or letterhead
• Business & Personal products like presentations or Zoom backgrounds

While you can’t use VistaCreate’s image resizer without creating an account, there is a free option available. If you already have an account with VistaPrint or 99designs, you can use this one Vista account.

Naming your files before uploading to your website

I would be remiss if I didn’t mention another step in the optimization process of your website images.

Before you upload your files to your website, give them an appropriate naming convention. Imagine, you would need to know the image by filename rather than by its thumbnail graphic.

Do not upload photos with filenames like IMG05672.JPG to your website.

Instead, use keywords pertaining to the usage of the photo or what the photo is of. For example, I save my featured images as the names of the posts they’re used on.

This is especially useful if you have attachment indexing turned on for your website, and make your media library attachments findable by search engines.

Creating alt tags for your images on your website

Another cause close to my heart is accessibility, so it’s best that we cover this step too. 

When you upload an image to your website’s media library or a social media post, you should be entering custom alternative text before sharing.

Alt text is used by screen readers to describe what an image is of to those who are blind. It has also been known to be crawled by search engines to gain insight on your content.

It should be understood though that alt text should describe the content of the image first and foremost, using keywords where you can. Don’t use it as an opportunity to keyword-stuff.

Optimize images for web and social media

You did it! This is the process for selecting which image resizing tools to use and why we need to optimize our photos before we implement them on our websites or social media posts.

You learned so much. Well done! Sign up for my monthly newsletter to get advice like this directly in your inbox.

To continue learning more about accessibility and your website, start here with Why I chose not to use an overlay accessibility widget on my website.

To continue learning more about basic search engine optimization, start here with Why focus keywords are important for SEO.