It is often necessary to resize or crop photos prior to use on the web. Besides, there is a number of tips and tools available to simplify your work with photos as outlined below.
When to use .jpg and when to use .png?
There are various types of formats for photos and graphics, but .jpg and .png are the most important when photos should be used on websites. It is of immense importance that you chose the right type. If you chose the wrong format, your photo might get blurred.
- JPG: This file format is used for ‚normal‘ photos that are taken with a camera or a smartphone. (JPG can not be used for logos, graphics or photos that have text on it. Such files will seem blurred on the internet and lose their sharpness.)
- PNG: This file format is used for logos, graphics and photos with text on it. (There won’t be any complications if you place a photo in PNG, but doing so is not recommended, because PNG files are often much larger than JPG files.)
(Minimum) dimensions (or size) of a photo for use on UT-websites
It is important that the photos that are being uploaded are big enough in size. Else, they will not look sharp on the website and hence look highly unprofessional. The required dimensions differ with each template. Whereas some templates require large photos in the header, other templates might not. Moreover, you can choose among many different spots of your website to upload your photos to (on the top of the page in the header, in the running text, in small widget blocks, etc.) and those locations also differ in size. If you are looking for the dimensions that are required for the default UT template, you can find them in the following two spots:
- In general, when you are uploading a photo, WebHare is telling you what the (minimum) dimensions are.
- All available features are presented and explained on our test-website. The file types are mentioned on that website as well. See for instance the website about using photos on the test-website.
>> The header of the default UT-website requires photos with a width of at least 3000 pixels (a little smaller is acceptable, but will not be sharp on some displays). The text area is 1000 pixels wide. Thus, if you want to place a photo that spans over the full width, that photo should have a width of 1000 pixels.
The most important dimensions of all templates are summarized in this pdf-file (currently only in Dutch), which is kept up to date.
What are the dimensions for photos on Social Media?
Dimensions on Social Media are changing frequently. This blog by Sprout Social is summarizing the current dimensions. Remember, that it is best to use PNG when you are planning to use photos that contain text as a header photo for Social Media (as explained above). Unfortunately, Twitter is going to convert the PNG to a JPG file, whereas Facebook is going to place the (sharper) PNG. However, they will only place PNG files that are no larger than 1MB.
Are my photos large enough?
It is easy to find out if your photos have the required dimensions. On Windows, do the following:
Open the folder on your computer that holds the photo. Select the photo (single click with the left mouse button) and take a look at the dimensions (size of the photo) in the grey status bar at the bottom. Alternatively, on some machines, hovering your mouse over a photo and waiting for a second will display a popup that gives you information about the dimensions of the photo. This is where you can check if the photo has at least the minimum dimensions that are required.
Resizing large images for the web
A photo taken with a camera can easily be as large as 8MB, however 0,2 is enough for the most websites. Photos that are too large can be really time consuming and can cause frustration when working with those files in websystems. Therefore, please download this file to your desktop, which will allow you to resize photos with a single click. Place one (or more) photos that you want to resize on your desktop or open the folder in which those photos are stored. Select the photos that you want to resize and click and drag those files with your mouse to this file on the desktop. Once you let go of the mouse button above that file, all selected photos will be resized and saved with the original filename and an additional -3000 in the end. For instance, a photo named piet.jpg will be called piet-3000.jpg en will be 3000 pixels wide. At default, the file is set to resize photos to 3000 pixels, which is excellent for e.g. the header of the new websites. If you want this file to resize photos to another dimension (on the width dimension), you can simply rename the file that you can download here.
Cropping to the right dimensions
(1) In WebHare with the online photo editor:
WebHare is offering you to crop images after uploading them if they are uploaded to locations where choosing the right parts of a photo is relevant (e.g. in the header of the new template). You can find a couple of screenshots of the WebHare-photo-editor on the test-website. There is a button for cropping and a button for choosing a focus point. WebHare will make sure that those parts of an image that are around the focus point will remain visible on all screen sizes. Thus, if a user has a small screen and only some parts of the photo will be visible, the visitor will still see that area (e.g. the head of a person).
(2) Using the built-in applications in Windows 7, Windows 8 and Windows 10:
Windows 7, Windows 8 and Windows 10 offer a small application that allow you to do this for free: In Windows 7, that is the Picture Viewer, with the so called crop function. Simply open a photo with the Picture Viewer and click on the second button (Fix) above the photo. Next, choose the option crop. In Windows 8, open a photo and then click on the photo to show the options below the photo. This is where you will find the crop feature.
(3) Photoshop (free on UT-workstations):
If you want more options (for advanced users), it might be best to use Photoshop. This application is the most used application for editing photos and is available for use at UT-workplaces of staff members. On the Windows 7 workplaces, you can install it yourself. For using it at home, members of the staff can download Photoshop via https://www.utwente.nl/lisa/en/nsc/ —> Log on to Software distribution. Photoshop is a rather complex application. If you have to work with it regularly, you can follow a Photoshop course that is offered by Marketing & Communicatie.