Community Thread: Optimizing your Images for Rise Vision Widgets

  • 2
  • Article
  • Updated 3 years ago
  • (Edited)
In this article, we will be covering how you can optimize your images to use with our Image Widget. By the end of the article, you should be familiar with the different ways you can use images and alter them to best suit your project needs.

Resize

To resize an image, you will need to use an image editor. Most computers come with one built-in. You can also use online editors such as LunaPic or PXLR.

For example, when using opening the PXLR editor, simply click “Browse” to navigate to your photo, and then Adjustment > Resize. You can also crop your photo by clicking the “Crop” button.

For Mac users, simply open up your image using the Preview viewer. Navigate to Tools > Adjust Size. Select “Pixels” next to the dimensions and adjust to suit your needs.

Make sure “Scale Proportionally” is checked if you want to maintain proper aspect ratio. Otherwise, uncheck the box if you’d like to set your dimensions completely manually.

Compress

If you find your image’s file size is large, since you want this image to download and begin displaying on your Display as quickly and efficiently, if possible, we recommend compressing the file size. You can do typically do this using the editing tool of your choice, or you can use an online tool such as TinyPNG. Changing file sizes can sometimes compromise the quality of the image, so be sure to look at the output when changing the image size.

Mac users can navigate to File > Export within Preview viewer and adjust the Quality slider accordingly.

Convert

Our Image Widget supports JPG, PNG, GIF, AND BMP formats. If you would like to convert the format of your image, simply re-save it in the editor you are working with an edit the extension. Mac users can also use the export method mentioned above.

JPEG files are easily compressed and yield a smaller file size.

PNG files maintain maximum quality with a moderate file size. PNG files also commonly support transparency.

GIF files are best used when dealing with animated images.

BMP yields the largest file size, and maintains maximum image quality. Only use this format where file size isn’t a barrier.

What is “Scale To Fit?”

In our editor, you may have noticed the “Scale To Fit” option in the configuration. What this does is scale down the image for you if it is too large to fit into your placeholder, or enlarge it to fit the Placeholder if the image is smaller. If you have remaining blank space within your placeholder, you may need to manually resize the image. This is due to the aspect-ratio of your image being disproportionate to the size of the Placeholder, meaning it is either too narrow to be stretched horizontally or vertically across the placeholder without distorting the image.
To get your image to fit your Placeholder completely, we recommend navigating to the dimensions of the placeholder for reference and setting those dimensions to the image within your editor.

To do this, navigate to your placeholder within the editor and click the “Properties” tab.

If your placeholder is set to 500 x 400px, that will be the dimensions you set when resizing the image in your editor.

We hope this was of some help.

How do YOU like to optimize your images? What are your favorite tools? Let us know in the comments below!



Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
  • Happy

Posted 3 years ago

  • 2
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Further on with optimization.. if you have a very large group of images to go through and edit, you may want to consider automating some or all of the editing process. 

Image editing software can allow for batch editing and saving - for example in Photoshop, these are called Actions and in GIMP these are scripts. I personally haven't used the GIMP scripts feature, but I have used Photoshop to automate the process of resizing and resaving images to make it less time consuming. Depending on what image software you use, look up "automate image resizing" or "automate batch resizing" to see what is available out there.

On a similar note, you can even apply automation with other image editing actions.  For example you can automate other tasks in Adobe Photoshop actions or you can check out the GIMP scripts library.

Photo of Jim Coyle

Jim Coyle, Champion

  • 1,494 Points 1k badge 2x thumb
For those who don't have Photoshop I can recommend IrfanView as a powerful image processing application.

Free to use and simple interface for image resizing and batch processing. Mainly a Windows application but can be used with Linux and MAC although there isn't a native version for these OS's

I have no connection with the developer but have used the application for many years.

Can be found here - http://www.irfanview.com

regards,
Jim Coyle
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
I love IrfanView!
Photo of Jim Coyle

Jim Coyle, Champion

  • 1,494 Points 1k badge 2x thumb
I am a fan as well. The site estimates they have over 1 million downloads every month since 2003 - kinda speaks for itself I think :)

regards
Jim Coyle
Photo of James Friedman

James Friedman

  • 208 Points 100 badge 2x thumb
So glad that IrfanView view has a following - I've been using it for years and still feel huge appreciation for its power and ease-of-use. Using IrfanView in combination with Fireworks has been a wonderful asset.
Photo of James Friedman

James Friedman

  • 208 Points 100 badge 2x thumb
From the tutorial, "If you find your image’s file size is large...."  What range of sizes should be considered "large" in this context ?  Thank you - James
Photo of RV News

RV News

  • 2,358 Points 2k badge 2x thumb
Large .jpg image 1920x1080px uncompressed = 1.0MB - 2.5MB

Example image 1920x1080px

100% = 2.2MB (uncompressed)
80% = 572KB 
70% = 450KB
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Exactly. 

Also another thing I like to remind people is if your Placeholder is smaller than 1920x1080, there is no reason to have the image at that size, so if you can shrink it further, that can often make a world of difference on a weak machine or slower network.

Thanks!
Photo of Robert Schoneman

Robert Schoneman, Champion

  • 4,990 Points 4k badge 2x thumb
We recently did a comparison of various image compression techniques. Here's some samples to peruse. Sorry the image is a bit... odd... it's a client-provided layout. Zoinks! 
We did a few other tests and found that in every case but one, the TinyPNG images were visibly indistinguishable on our signage displays at 6' or more. Our guys have added TinyPNG as the last step in their workflows. 
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Thanks for the tip!