Use Preview on the Mac to resize and compress images for the web

Optimise images for social networks, websites and blogs using the Preview app on the Apple Mac

There are many places to share your photos on the web, such as social media, your blog or website. Each has an optimum size for best results and Preview on the Apple Mac can prepare your photos.

You might want to share your photos on Facebook, Twitter, Instagram, Google+, or your website. However, uploading photos straight from the camera or phone is a bad idea. This is because they are very large and very high resolution.

Photos used on websites and social media services are much smaller and much lower resolution than the images that are saved from cameras and phones.

Many can take photos up to 16 megapixels and these are around 5,000 x 3,000 pixels. That't great if you want to print poster-sized images, but the images on this web page are closer to 500 x 300 pixels, which is one tenth of the dimensions.

Photos on Facebook and Instagram are bigger, but not that much bigger and certainly nowhere near the size cameras take.

What does it matter?

Images that are too big may be automatically shrunk to fit the browser window or web page. This can affect the quality and it is best if you resize the images yourself so you have more control over the size and quality.

If you are posting photos on your own website, uploading raw images taken on your phone or camera will make the site very slow. I have seen web pages with half a dozen photos, each of which was around 2MB. The total page size was around 12MB and took forever to load. Some people won't wait for slow web pages and will go elsewhere. You'll lose visitors.

Camera photso are huge and the images make websites very slow. It is even worse when people access your site on a mobile phone.

Preview on the Apple Mac is a useful tool with many functions. One of these is for preparing images for the web. Before sharing photos on social media or your website, you should prepare them in Preview.

Best sizes for photos on social media

Each social network has an optimum size for images. Sometimes more than one size is required, depending on where or how you post them.

Instagram: Images are mostly square and 1080 x 1080 pixels is a common size. However, tall portrait shaped images are also acceptable and these can be 1080 x 1349.

Facebook: The large image at the top of pages is 828 x 315 pixels. Images in other places, such as the news feed, vary. Facebook will automatically shrink images to fit, but the best size is 1200 x 630 pixels although I’ve seen 628 and 717 pixels for the height recommended in some places.

Twitter: Images should be no more than 1200 x 512 pixels. They won’t appear anywhere near that big in your home feed, but when viewed by clicking them the larger image ensures good quality.

Pinterest: Images are best shot in portrait orientation with a resolution of 735 x 1102 pixels.

There are many more sizes of images and it gets very confusing. Take a look at the multitude of optimum image sizes at this site. It is mind boggling!

3 best image sizes for social media

Fortunately, social networks and even many websites will automatically resize images. This means that provided you are close to what is needed, it will usually look pretty good.

Look at the site or social network and see whether a landscape, portrait or square image is required. Resize your photos to these:

Landscape - 1024 x 512

Portrait - 800 x 1200

Square - 1080 x 1080

Best images sizes for the web

This depends on the website, or more specifically, the theme that a website uses. It often requires images of a certain size. The featured image on this site for example, is 940 x 400. Check with the theme notes, help or readme file to see what is required.

Let’s not get too bogged down with the multitude of image sizes that are required for the web. Let’s look at an example. We’ll create an image for a Facebook page and this is 828 x 315 pixels.

Check the size

Double click a jpg image on the disk and it opens in Preview. You can also open the Preview app in the Applications folder and use the File menu to select a photo.

Press Command+I or use the Tools menu to open the inspector.  This image is 2,000 x 1,361 pixels and the file size is 373 KB. That’s not too bad, but it could be better.

Check the dimensions and file size of a photo using the Preview app on the Apple Mac

Find what size you need

It is a good idea to find what size image you need. Google it if necessary. Here is Facebook image dimensions.

Adjust the size

Go to the Tools menu and select Adjust Size. This window opens and you can set the width or height. Both are linked so if you change one then the other changes. It prevents the image from becoming distorted when the size changes. Don’t forget to set the units to pixels to the right of Width and Height.

Resize a photo using the tools in the Mac Preview app

Crop the image

Sometimes you cannot get the optimum dimensions using the resizing tool. Don’t worry, just get the width or the height right and then crop the image.

Click and drag a box over the image and adjust it so that it is the right size. Press Command+K or use the Tools menu to crop it.

Crop images in the Preview app on the Apple Mac

Export the image

Now that the image is the right size, go to the File menu and select Export. Set the file format to JPEG and drag the Quality slider to about the third notch from the right.

Export images from the Preview app on the Apple Mac

The resulting file size is shown below and this image will be 61 KB. This is significantly smaller than the 373 KB of the original image. If we were using this on a website or blog, it would enable the page to load much faster because it is one sixth the size of the original.

Check the quality

It is a good idea to save the image twice with two different quality settings. In this case it was exported with the quality setting three notches and two notches from the end. This resulted in 61 and 80 KB file sizes.

After saving two or maybe even three images at different quality settings, open them in Preview and see if you can tell the difference. If the smaller file size image is just as good as the larger file size, then use it the smaller one your website or blog, or social network. It is faster to download and display and speeds up web pages.

Compare images saved with different JPEG quality settings

If you want to know more about optimising images for use on your blog or website, read How to speed up your website by optimising the images.

 

Author: 
Share

Add new comment

By submitting this form, you accept the Mollom privacy policy.

Related items you will like...