{"id":692,"date":"2015-06-16T10:00:59","date_gmt":"2015-06-16T09:00:59","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/web\/?p=692"},"modified":"2015-11-25T14:52:26","modified_gmt":"2015-11-25T14:52:26","slug":"editing-images-for-use-on-your-website","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/web\/2015\/06\/16\/editing-images-for-use-on-your-website\/","title":{"rendered":"Editing Images for Use on Your Website"},"content":{"rendered":"

Last week, Jane wrote about how to improve your website images and videos<\/a>. Her post focused on image selection and placement. Go and read it if you haven\u2019t already, it\u2019ll set you up for what\u2019s to come.<\/p>\n

Welcome back.<\/p>\n

In this post I\u2019m going to cover some tips for editing images for your website<\/strong>.
\nOur new template has a much more visual feel than our current design. There are a number of ways you can use images to enhance your written content.<\/p>\n

Grids<\/h2>\n

These can include landing page and news grids.<\/p>\n

\"Example<\/a>Mastheads<\/h2>\n

Mastheads provide a visual opener to a page. The image slider used in our current design gives a similar effect.<\/p>\n

\"Example<\/a>It\u2019s a full width image with a text overlay<\/strong>. This means that you need to think carefully about where the focus of your image lies. If it\u2019s on the left of the picture then it\u2019s going to be obscured by the text. We\u2019ve got a visual guide to the safe zones which highlights where the danger areas are.<\/p>\n

\"Details<\/a>The safe zones logic applies to the image slider in the existing template too. An example of this in use is the Newcastle University London website<\/a>.<\/p>\n

Content images<\/h2>\n

You can also add images into the main content area. The default alignment for these is on the right (like our current design). On mobile they stretch to fill the full width and flow below the content.<\/p>\n

This behaviour requires landscape images. If you\u2019re using our current template we recommend you use landscape images too \u2013 this means your images are more likely to be reusable in the new template.<\/p>\n

Tools for cropping and resizing images<\/h2>\n

We\u2019ve assessed a variety of online photo editing tools<\/strong> and found one for you that\u2019s easy to use<\/strong> and retains the high quality of your original<\/strong> photography. It\u2019s called Fotor<\/a>.<\/p>\n

See our image guide<\/a> (University login required) for details of the required sizes for each type of image and a step-by-step guide to using Fotor.<\/p>\n","protected":false},"excerpt":{"rendered":"

Last week, Jane wrote about how to improve your website images and videos. Her post focused on image selection and placement. Go and read it if you haven\u2019t already, it\u2019ll set you up for what\u2019s to come. Welcome back. In … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":755,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,19],"tags":[76,67],"class_list":["post-692","post","type-post","status-publish","format-standard","hentry","category-content","category-tools","tag-how-to","tag-images"],"_links":{"self":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/users\/755"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/comments?post=692"}],"version-history":[{"count":5,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/692\/revisions"}],"predecessor-version":[{"id":1320,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/posts\/692\/revisions\/1320"}],"wp:attachment":[{"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/media?parent=692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/categories?post=692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ncl.ac.uk\/web\/wp-json\/wp\/v2\/tags?post=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}