Unsplash<\/a><\/p>\r\n<\/li>\r\n\t Pexels<\/a><\/p>\r\n<\/li>\r\n\t Pixabay<\/a><\/p>\r\n<\/li>\r\n<\/ul>\r\n If you still can\u2019t find what you want – there are paid services such as:<\/p>\r\n Getty Images<\/a><\/p>\r\n<\/li>\r\n\t ShutterStock<\/a><\/p>\r\n<\/li>\r\n\t iStockPhoto<\/a><\/p>\r\n<\/li>\r\n<\/ul>\r\n Fliplet’s rules of thumb:<\/p>\r\n Mobile images minimum width (or height) of 500px ( 750px is more comfortable)<\/p>\r\n<\/li>\r\n\t Desktop images minimum width (or height) of 2000px ( 3000px is more comfortable)<\/p>\r\n<\/li>\r\n\t Use a free compression tool if you are concerned about size – eg, www.TinyPNG.com<\/a> <\/p>\r\n<\/li>\r\n<\/ol>\r\n Choosing an image size is a balance between loading speeds and image quality. You don\u2019t want your image to look grainy or pixelated but you don\u2019t want it to take ages to load either. <\/p>\r\n On the whole – loading times are becoming less of an issue as internet speeds are increasing and low-quality images are becoming more noticeable as screen resolutions are improving. <\/p>\r\n Fliplet’s rules of thumb:<\/p>\r\n Landscape images look better on desktop.<\/p>\r\n<\/li>\r\n\t Portrait images look better on mobile.<\/p>\r\n<\/li>\r\n\t Ask yourself if you really need the image to work on both platforms.<\/p>\r\n<\/li>\r\n\t If you do need an image to look good on both desktop and mobile screens: <\/p>\r\n Try to choose an image where the focus points are in the centre.<\/p>\r\n<\/li>\r\n\t Try using a square image as it\u2019s neither to landscape nor to portrait.<\/p>\r\n<\/li>\r\n<\/ol>\r\n<\/li>\r\n\t If you want a logo to look good on two platforms – you can select a layout that has an image with a content overlay. This allows the logo and the background image to re-size independently of each other – the background image may get cropped but the logo will be re-sized to fit in the centre of the image. <\/p>\r\n<\/li>\r\n<\/ol>\r\n The fundamental challenge is that a full-screen dramatic image cannot fit both portrait or landscape orientations without quite a bit of cropping on one or the other. However, some techniques make images more compatible with both orientations.<\/p>\r\n Below is an illustration of the challenges when changing text and photos between layouts.<\/p>\r\n We recommend using a square image where the key points of interest are in the centre so that the cropping is not too severe in any orientation.<\/p>\r\n Fliplet’s rules of thumb:<\/p>\r\n Use an image that is relatively plain and not too fussy\/busy as it could distract the viewer from what you want them to focus on.<\/p>\r\n<\/li>\r\n\t Make the image contrast with the content overlaid – ie, if the image is dark make the text light.<\/p>\r\n<\/li>\r\n\t Think about blurring the image or changing its brightness to help the contrast.<\/p>\r\n<\/li>\r\n\t Potentially add a shadow to your content to make it stand out.<\/p>\r\n<\/li>\r\n<\/ol>\r\n Fliplet’s rules of thumb:<\/p>\r\n Avoid using small images on a big screen, they will look pixelated with square\/flat edges.<\/p>\r\n<\/li>\r\n<\/ul>\r\n Avoid using busy or cluttered images as backdrops, they will compete with any overlay – see above.<\/p>\r\n<\/li>\r\n\t Avoid poor quality JPEGs that have been over-compressed, strange distortions and image artefacts will appear like in the left image below.<\/p>\r\n<\/li>\r\n<\/ul>\r\n <\/p>\r\n Related Articles<\/strong><\/p>\r\n Learn how to use images in Fliplet studio and what size your images should be<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[178,162],"tags":[236,241],"class_list":["post-1806","post","type-post","status-publish","format-standard","hentry","category-help-library","category-appearance","tag-app-settings","tag-images"],"_links":{"self":[{"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/posts\/1806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/comments?post=1806"}],"version-history":[{"count":5,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/posts\/1806\/revisions"}],"predecessor-version":[{"id":8590,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/posts\/1806\/revisions\/8590"}],"wp:attachment":[{"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/media?parent=1806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/categories?post=1806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.fliplet.com\/wp-json\/wp\/v2\/tags?post=1806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n\t
What size\/resolution should the image be?<\/h2>\r\n
\r\n\t
Which images look good both on desktop and mobiles?<\/h2>\r\n
\r\n\t
\r\n\t
![](\"\/wp-content\/uploads\/sites\/2\/2020\/06\/img_5ee753e3be8ac.png\")
<\/p>\r\nTips for using images as a background<\/h2>\r\n
\r\n\t
![](\"\/wp-content\/uploads\/sites\/2\/2020\/06\/img_5ee753e5328ed.jpg\")
![](\"\/wp-content\/uploads\/sites\/2\/2020\/06\/img_5ee753e64a050.jpg\")
![](\"\/wp-content\/uploads\/sites\/2\/2020\/06\/img_5ee753e759625.jpg\")
![](\"\/wp-content\/uploads\/sites\/2\/2020\/06\/img_5ee753e836107.jpg\")
<\/p>\r\nCommon errors to avoid with images<\/h2>\r\n
\r\n\t
![](\"\/wp-content\/uploads\/sites\/2\/2020\/06\/img_5ee753e934f93.png\")
<\/p>\r\n\r\n\t
![](\"\/wp-content\/uploads\/sites\/2\/2020\/06\/img_5ee753e9a007b.png\")
<\/p>\r\n\r\n\t