What size should I make my News images?

Todd Chessum -

So you've installed Emgage Prime, added the News web part to a page, and are now wondering what the optimal size would be for your news images? This article will assist you in figure that out.

To start, you need to know that the Prime News web part will actively resize your images to fit within the constraints of the web part zone, browser, and device upon which they are being viewed. While images will be scaled down to fit smaller spaces, they will never be scaled up beyond their native dimensions. Once their native width value has been reached, the image will remain at that size and simply center itself within the available space. This is to ensure you don't wind up with ugly, pixelated images appearing on your site.

Knowing this, we can move forward with determining the maximum dimensions required to ensure an image always perfectly fits into your site. The simplest way to do this it to right click on the News web part body (if you have not yet configure the web part, the body will show a red bar with white text) and then selecting the Inspect option from the menu that appears.

select-inspect.jpg

This will open the browsers development tools (don't worry, we're not going to get all complicated here) either along the bottom or side of your browser, or in a new window. If they open along the side of your browser, you'll need to update the dock location so that they appear along the bottom as follows:

Chrome - Open the DevTools Customization menu by clicking the rotated ellipsis icon located in the upper right of the development tools and selecting the dock to bottom icon (highlighted in image below).

dock-location-chrome.jpg

Firefox - Select the dock to bottom placement icon (highlighted in image below) located in the the upper right of the development tools.

dock-location-safari.jpg

Safari - Select the dock to bottom placement icon (highlighted in image below) located in the the upper left of the development tools.

dock-location-firefox.jpg

Internet Explorer / Edge - There is no side placement option for the developer tools

In the right panel of the development tools, find and select the Computed tab. You'll notice a set on nested squares within this tab. In the center-most square the width of the element you selected inspect on will be shown. Expand your browser to the maximum width any user will view your site on, and the first value within this center box is the maximum width (in pixels) your news images need to be.

computed.jpg

Often times we'll tack on a few extra just to be sure, however that up to you. Now that you know the maximum width requirement, you can determine an appropriate height value based on aesthetic and spacing requirements of your site and the News web part placement. For assistance with cropping and resizing image, please take a look at our Cropping and Resizing News Images article.

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk