= Image Sized for the Web
== To Do
– check google drfive mh.name/business-op/templ;ates …
== Recommendations
– Default Image Size: 1920×1080 , 1920×1920 if square . Maintain this 16:9 ratio when scaling up or down.
– Small Image: 960×540 (1/2 default image size)
– Banners : 1920×540. 16:4.5 Ratio (1/2 height of default image).
– Thin Banners : 1920×360. 16:3 Ratio (1/3 height of default image).
– Default Thumbnail : 640×360 (1/3 default image size)
– Thin Thumbnail : 640×240 (2/3 height of default thumbnail).
== Image Size Defaults
Standard Image Size: 1920×1080 , 1920×1920 if square . Maintain this 16:9 ratio when scaling up or down.
Small Image Size: 960×540 (1/2 default image size)
Web Banner Size: 1920×540. 16:4.5 Ratio (1/2 height of default image).
Thin Banner Size: 1920×360. 16:3 Ratio (1/3 height of default image).
Thumbnail Size: 640×360 (1/3 default image size)
Thin Thumbnail Size: 640×240 (2/3 height of default thumbnail).
Product Page Brand Logo Size: 150×50
All images should have a 10% “whitespace” around all edges.
For desktop, max image size (e.g : banner) will be 1920px
For mobile, max image size will be 960px
== Logos
– Versions : 2 versions, standard for light background and inverted colours for dark backgrounds
– File Formats : JPG, PNG, EPS at 600×600 & 1200×1200
Sizes & Naming:
— Small Image: 960×540 . Name : “Brand Name Logo – Web – LightBG” & “Brand Name Logo – Web- DarkBG” (e.g “Hungry Jacks Logo – Web – LightBG.jpg”)
— Icon (for product cards) : 150×50 . Name : “Brand Name Logo – Web – Product Brand Icon” (e.g “Hungry Jacks Logo – Web – Product Brand Icon”)
– File formats:
— jpg, png, PDF & .PSD or .AI ,
— Source File Name : “Brand Name Logo”
— all versions stored as separate artboards within one source file, with artboards named according to purpose, e.g “Web – LightBG” , etc …
— Ideally, with AI & PS artboard export feature, the exported files will be automatically named correctly when source file & artboards are named as above.
– Image & Source file layout: Maintain 10% whitespace on the edges, and place document guidelines (in PS or AI) to indicate where the 10% whitespace is.
## Other Notes
Facebook Cover image: 850 x 315 px | maximum 100 KB
Facebook Profile image: 170 x 170 px (desktop), 128 x 128 px (smartphones)
Facebook Shared image: 1200 x 630 px
Facebook Link image: 1200 x 630 px
Facebook post image : 1080 x 1080 px
Supported image file types: PNG, JPG, or GIF
1. Instagram Image Sizes Cheat Sheet
· Instagram Profile picture: 320 x 320 px
· Instagram Shared photo: 1080 x 1080 px
· Instagram Ads size: 1080 x 566 px (landscape), 1080 x 1080 px (square)
· Instagram IGTV video: 1080 x 1920 px
· Supported image file types: PNG or JPG
2. LinkedIn Image Sizes Cheat Sheet
LinkedIn Company pages
· Company logo: 300 x 300 px
· Company cover photo: 1128 x 191 px
· Company Banner image: 646 x 220 px
· Supported image file types: PNG, JPG or GIF
LinkedIn Personal pages
· LinkedIn Profile picture: 400 x 400 px
· LinkedIn Background photo: 1584 x 396 px
· LinkedIn Post image: 1200 x 1200 px (square) 1080 x 1350 px (portrait)
· LinkedIn Link post: 1200 x 628 px
3. YouTube Image Sizes Cheat Sheet
· Channel header image: 2560 x 1440 px (for desktop), 1855 x 423 px (for tablets), 1546 x 423 px (for smartphones), and 2560 x 1440 px (for TV)
· YouTube Channel profile photo: 800 x 800 px
· YouTube Video Thumbnail: 1280 x 720 px
· YouTube Supported image file types: PNG, JPG, GIF, or BMP
== DUMP
=== AIO
www.vectorportal.com
https://www.freepik.com/
https://www.vectorstock.com/free-vectors
http://www.freevectordownload.com/index.html
=== Patterns
http://www.dinpattern.com/category/patterns/
http://www.noqta.it/dromoscopio/
http://everydayicons.jp/patterns.html
https://www.toptal.com/designers/subtlepatterns/
=== Stock Images
https://www.canva.com/learn/free-stock-photos/
https://www.shopify.com/blog/17156388-22-awesome-websites-with-stunning-free-stock-images?utm_term=ecommu&utm_content=buffer838ac&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
https://500px.com/
https://unsplash.com
https://gratisography.com/
https://www.splitshire.com/
