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
| 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 | |
| Profile 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 | |
| Profile 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 | |
| YouTube | Profile picture 800 by 800 | |
| Profile 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.
