Page History

Why

...

Would You Would Need to Resize an Image?

Sometimes you need to change the size of an image in order to improve how it looks in a document, email, or blog post.

Every now and then you will need to resize an image. For example: You may need to change its an image's aspect ratio, so the image it fits in a square area when it is a rectangle. Or, was originally a rectangle.

You may need to convert the image file to sRGB if the image quality is affected once live on the website. 

Or, you may want to reduce the size of it an image so it is smaller and loads easier and faster . And sometimes you need to change the size of an image in order to improve, how it looks in a document, email, blog post, or webpage.

...

in an email.

NOTE: Do not resize an image you are submitting to the web team for use on the business.wisc.edu website. The web team will only accept original, uncropped images for use on the site.

I Don’t Have (or Don't Know How to Use) Adobe Photoshop, What Program Should I Use?

There is a free online tool called PIXLR X. It can be used to edit your images in many ways. In this guide we are going to cover specifically how to re-size and image to a specific aspect ratio and size.

...

• Go to https://pixlr.com/ and edit the photo using PIXLR X
• Check to make sure the image is larger than the size you need 
• Use the photo editing software to re-size or crop the photo the the exact size(s) needed
• Save and download the photo using the File Naming Conventions and Best Practices
• Optimize the image using https://tinypng.com/
• Upload the photo into the media library and add it to your website page blog post or email. 

...

Step-by-Step Guide

How-to Open an Image

...

, Confirm the Image Size, and Resize it

1. Go to https://pixlr.com/ and open and open PIXLR X. There is no need to login or sign up for an account on PIXLR.
   
   Image ModifiedScreen shot of the Pixlr home page and navigation menus
   
   
2. Click Open Image and select a photo you want to re-size.
   Image RemovedScreen shot of the open image buttonImage Added

   
   

3. Click on "Layout & Template"  

   
   

   Image Added

   
   

4. Select "Resize Image" to view the dimensions.

   
   

    Image Added

   
   

5. Verify Properties" and "Re-Size Image" to verify the image is larger than the final image size needed. (Never increase the original size of an image, as that will distort it and create a blurry/pixelated image.) Compare the current width and height to the needed size  (e.g. if the iamge image is 1200 x 802 pixels(px) it can be cropped down to 580 x 300 pixels 300px or 116 x 116 pixels116px).

   
   

    
   Image RemovedScreen shot of opening properties, re-size image, and then viewing the image size

How-to Resize an Image

1. Image Added

   
   

2. To resize an image, first make sure "Constrain proportions" is turned on (it should be on by default). Change
3. Open an image in PIXLR X and click on "Properties".
4. Click on "Resize Image".
5. With "Constrain proportions" on change the width or height to the desired widthsize and the other dimension will automatically update to keep the aspect ratio of the image. 
6. Click Apply.Image RemovedScreen shot of how to re-size an image

...

How-to Crop Out a Section of an Image

1. Open an image in PIXLR X and click on the "Crop" tool.
2. Re-size the selection to include the area of the photo you want to keep.
3. Click "Apply".
   
   Screen shot of the cropping tool in use

...

How-to Crop an Image to a Specific Width and Height

1. Open an image in PIXLR X and click on the "Crop" tool.
2. Turn on "Select aspect".
3. Select "Size".
4. Enter the "Width" and "Height" you would like the photo to be.
5. Move and re-size the selection to include the desired portion of the photo.
6. Click "Apply".
   
   Screen shot of the cropping tool with a specific output size

...

How-to Save and Upload an Image

1. Click "Save"  .
2. Update the file name to meet the File Naming Conventions and Best Practices (e.g. name-widthxheight).
3. Select the File Type JPG. Unless , unless there is a transparent background, in which case you should choose PNG.
4. Leave the Quality at 90% and High.
5. Check that the image is less than 5MB (5000KB) in size.
   1. If it's not, decrease the image quality percentage until it is.
   2. If the photo's dimensions (width and height) are larger than necessary, decrease them to the appropriate size.
6. Click "Download".
7. If you are uploading the photo to an email, we recommend running the photo through tinypng.com to optimize the photo. This is not necessary if uploading to the Wordpress Media LibraryOptimize the image using https://tinypng.com/ (Image Optimization/Compression Recommendations and Settings).
8. Upload the photo into the media library and add it to your website page blog post or email. (Media Library: How to Upload an Image or File).
   Image RemovedScreen shot of the steps to save an image.
   1. If WordPress gives you an error saying your image size is too big, running it through tinypng.com before uploading may help.
      
      Image Added

   
   

   
   

   ...

   How-to Save as sRGB

   If the quality of the image changes once uploaded to the site, it could be that the image wasn't saved as sRGB. The easiest way to save as sRGB is through Photoshop. 

   Once you have Photoshop open, you can open your image by navigating to File > Open

    Image Added

   Then, to save as sRGB, navigate to File > Export > Save for Web.

   Image Added

   On the pop-up window, make sure Convert to sRGB is checked (Photoshop does this automatically), and then save. 

   Image Added

   
   

   Learn More

   • PIXLR Support | Frequently Asked Questions
   • Experience Editor - Standard Image Sizes
   • Training: Sitecore Email Builder

   
   

   ...

   
   

   Related Articles

   Content by Label
   showLabels false max 5 spaces KB showSpace false sort modified reverse true type page cql label in ("sitecore","login","website","website-pages","editing") and type = "page" and space = "KB" labels sitecore website-pages website editing login

   ...