fbpx
Adept Creative Logo

Image Optimization

Intro

So you have this perfect photo of you and your bros out rock climbing that will go perfect with your recent blog post on your latest vision quest or maybe, Your goal is to have your content viewed by as many people as possible. 

One of Google’s known ranking factors is Page speed. We know from user experience a/b testing that the bounce rate jumps up if your page load time is above 3 seconds. So we know it is important to have a fast page.

What is the number one known cause for a low for slow page load time? Poorly optimized images.

Follow these guidelines for image optimization.

Our goals

To minimize page load spend by finding a perfect balance between image size and image quality. We will also be forced on naming conventions, optimizing the data stored within your image to send keyboard signals for seo.

To achieve these goals first we must focus on image size.

Image Size Guidelines

Standard Social media sizes

Facebook Profile picture
170 x 170 Desktop
128 x 128 mobile
32 x32 thumbnail export 180 x180
Cover photo
820x 312 desktop
64 x 360 mobile

Upload srgb jpg less then 100 KB
Or PNG
Export 820 x 3 ½
Shared image upload size 1200X 630
Appear Max with 470, 1:1 aspect ratio and feed.
504, 1: 1 on page
Shared link 1200 x688
Highlighted image 1200 x 717
Extended 1920 x 1080
InstagramProfile
110 x110
Thumbnails appear as 161 x 161
Large 1080 x 1080
Feed 510 x 510
Stories
1080 x 1920
9 : 16
Max file size 46b
LinkedInProfile picture
400 x 400
Company
300 x 300
Square
60 x 60
Shared image
646 x 220
Career banner
1128 x 376
Cover photo
Profile
1584 x 396
Company
1536 x 768
YouTubeProfile picture
800 by 800
TwitterProfile picture
400 x 400,  display as 200 x 200
Max 2MB
Cover photo
1500 X500, Max 5mb
Shared image
440 x 220, 2:1

Web Image size guidelines


Check within your adept creative dashboard for your specific branding guidelines. But generally speaking, images should be as large as needed to fill their containers.

Sometimes we double this size to allow for retina screens.

For example, a full-screen hero image should be doubled so we are left with a recommended size of 2560 px in width and whatever natural aspect ratio.

Lightbox photos

If you have a lightbox feature on your website you will need to account for the thumbnails and full-screen view. Typically we use a 1500px – 2000px x for lightbox photos.

An image that is to be displayed vertically should use 800×1200 with a 2:3 aspect ratio.

An image that is to be displayed horizontally should use a 900×1200 (3:4 aspect ratio).

Page layout images, Static images or image in a blog

Take actual width and double it, allowing for retina screens.

If you have further questions contact our creative agency. for your branding, marketing, and design needs.

Interested in our web design services.

Subscribe to hear our stories.

More articles.