We’ll talk about optimizing your JPEG exports for Facebook and Instagram, as well as the best export settings for displaying images on your website. Before we dig in, note that for most cases, we can do a straightforward export which can work well for all three destinations. Instagram is the only platform that requires specific aspect ratios, but you can use that ratio for other purposes as well.

All cases discussed below will share a universal importance: the exported JPEG file size will play a big role in how fast your website will load. That’s very important because it will affect its Google ranking and visibility in search (As of July 9, 2018, The Speed Update has officially rolled out to all users. Late last week, Google announced a major change to its mobile ranking factors. While speed has always been a factor… – Wordstream.com)

 

In order for the viewers to see any website or social media pages, the content is downloaded to their devices via a browser or an app. The larger the media files on those web pages the longer it takes to download them, and the longer it takes for the viewer to see the page. One report found that 53% of site visits are abandoned if a page takes longer than 3 seconds to load. In most cases, the main factor of increased load times was due to images that had not been optimized for web and were too large in size.

Therefore, our goal is to export the smallest file size while retaining image quality to show your work in the best light.

Let’s first look at the file size requirements on Facebook and Instagram, and then move onto image optimization for your own website. And finally what export settings to use in Photoshop for the best results.

Facebook

Facebook uses algorithms to resize and compress uploaded photos to maintain fast load times on the platform. In order to do that it needs to downsize large images, which can significantly compromise their quality.

Here are Facebook’s recommended settings to follow in order to maintain the best quality in smaller files:

As of today, July 24th, 2018, it states:

Resize your photo to one of the following supported sizes:

• Regular photos: 720px, 960px, or 2048px wide
• Cover photos: 851px by 315px
• To avoid compression when you upload your cover photo, make sure the file size is less than 100KB
• Save your image as a JPEG with an sRGB color profile

If you are uploading with the Facebook mobile app, it’s important to note that by default it will upload your image in low quality. To avoid this, Facebook has what they call an “HD” setting which is turned off by default and needs to be enabled. Simply navigate to FB Mobile Menu > Settings > Account Settings > Videos and Photos and toggle the slider to the right. Once enabled you’re all set!

Instagram

The mentioned above dimensions and sizes can also work for uploading to Instagram, with a couple of exceptions.

Instagram Help Center: Sharing Photos & Videos

When you share a photo on Instagram, regardless of whether you’re using Instagram for iOS or Android, make sure to upload it at the best quality resolution possible (up to a width of 1080 pixels).

When you share a photo that has a width between 320 and 1080 pixels, we keep that photo at its original resolution as long as the photo’s aspect ratio is between 1.91:1 and 4:5 (a height between 566 and 1350 pixels with a width of 1080 pixels).

If the aspect ratio of your photo isn’t supported, it will be cropped to fit a supported ratio. If you share a photo at a lower resolution, enlarge it to a width of 320 pixels. If you share a photo at a higher resolution, size it down to a width of 1080 pixels. – Instagram

Websites

When exporting images for your online portfolio be sure to take the Search Engine Optimization (otherwise known as SEO) guidelines into consideration.

In short, proper SEO will determine how well your website will be indexed by search engines. Search engines (such as Google, Bing, Yahoo) use “web crawlers” which index and rank your site against comparable websites. So, the better your SEO, the better your search engine ranking will be allowing more potential clients find your website when searching for a retoucher (or photographer) in your area.

In order to optimize your images for search engines you can do two things:

1. Use very descriptive names with keywords for each image you upload to your website. SEO keywords are the key words and phrases in your web content that make it possible for people to find your site via search engines (What Are SEO Keywords? by WordStream). For example, if your image is a portrait of a woman with blue eyes, the filename could be “professional_retouching_portrait_woman_blue_eyes.jpeg” or something to that effect. Think of how potential clients might use keywords when searching for your services online and use them when naming your files.
2. It’s just as important to have “alt text” (alternative text) to go along with your images on your website. Alt text was originally created as a means of providing a text descriptor in the event a website could not load the image. It would use the “Alt text” in place of the image allowing the viewer to comprehend what they would have otherwise seen. The key is to ensure that it tells viewers as much as possible about the image, using as few words as possible. Today, Alt text serves an important role for helping search engines crawl and index your site and by doing so, improves your site’s overall ranking. So, the Alt text for the image mentioned above uploaded to the website could be: <img src=”professional_retouching_portrait_woman_blue_eyes.jpeg” alt=”Professional retouching portrait woman blue eyes”>. And if your website is on WordPress, you can fill out the Alt text in the uploaded image settings:

 

Exporting Images for Web Using Photoshop 

For the purpose of this article, we will only review the image export settings in Photoshop, however, the end goal will be similar regardless of which image editor you are using.

There are a couple of ways you can export your images for social media and websites in Photoshop now: using Export As and Save for Web functions.

While Export As is the newest option, many photographers and retouchers still prefer to use the Save for Web method. Save for Web has been tucked away in the menus in the latest Photoshop versions and marked as “Legacy”, which means it still works, but is no longer supported or updated and will be eventually fully replaced by the Export As option.

The export settings for Export As are similar to those of Save For Web, and you can also read more about the Export As dialog here.

To quickly access the legacy export for web dialog, go to File > Export > Save for Web (Legacy) or press Option + Shift + Command + S (Mac), Alt+Shft+Ctrl+S (Win). 

 

And while it’s still doing its job we keep the Save for Web (titled Web Size) button at the bottom of our Beauty Retouch panel for convenient one-click access to the Save for Web export menu:

Choose the following settings to export the smaller size JPEG file while preserving image quality for web:

• File format: JPEG
• Quality: 60-70% (quality reduction often becomes visible below 60-70%)
• Check the Optimized box (when using the Safe For Web dialog)
• Metadata: keep your Copyright and Contact Info embedded in your images (be sure it is added in your Photoshop)
• Check Convert to sRGB
• Image Size: 2048 (on the longer edge), or the other file dimensions listed above.

Once you’ve dialed in your settings, you can save a Preset of these file settings for quick use in the Save For Web dialog, and the Export As dialog will re-use the last used settings by default.

In the Save For Web dialog it can be done via the drop-down menu next to Presets as shown below:

Check out this video tutorial for even more information on the topic:

Source: Facebook | Instagram | Shopify | Michael Woloszynowicz Youtube Channel | taralesher.com 
Featured Image: Pexels.com