How to Resize Images the Right Way

Is your website powered by Virteom CMS? Do your images look good on your laptop but not on your 4k monitor? Are your pictures a good size on desktop but become oversized or deformed on a mobile device? More than likely you’re using pixels to set the dimensions of your photos, but is that the best way? This article will explain how you should be sizing the images on your Virteom powered website so that they look good across all devices.

As you make edits and additions to the pages of your website you find yourself adding images to support your content. Typically, the size of your image is too large for your page and with the popup picture below you set dimensions of your image using pixels:

Image Properties Window | Virteom

Setting your images dimensions using pixels is what makes your image stretch on your cell phone or from one screen to another. You don’t want to use pixels to set the dimensions of your images.

For example: Here we have a picture of a tablet:

Once we add it into the image uploader we see the width and height of this image is 1000px by 667px. If we kept it that size, it would be very large on the page and it would take up a lot of space. If it was viewed on a mobile device, it would appear stretched out and require you to scroll left and right. Take a look:

Computer Full Size Desktop | Virteom Computer full Sized mobile view | Virteom

Your first instincts may be to resize the image using the width and height that are in the image properties. If we resize the image to 600px by 400px and preview the page you’ll see in the browser it looks pretty good, but when we shrink down to a mobile view the image is stretched. See below:

Comp Resized - Desktop | VirteomComp Pic Resized Mobile | Virteom

How do we prevent the image from stretching? How do you predict what the image will do when it looks good in browser? We suggest using percentages as the width instead of just using a number. 

If you want your image to take up the entire width of your content region you would type 100% in the width box and leave the height blank. Like this:

Width Resize | Virteom 

Using percentages keeps your image relative no matter what screen your viewing it on. That way it doesn't look stretched out, overflow into another content region (or overlap text) and you won't have to worry about checking it on every device. See below:

 

 

Don’t want your image to take up the entire width of the content region? You can use any percentage to vary the size of the image. Only half? 50% - A quarter? 25%. You can use any variation of percentages! Your website visitors will be able to view your images seamlessly.

Want to see with your own two eyes how the images resize? Take the coner of your browser on this screen and resize it down to the smallest window you can. All of the images in this blog are using percentages. You'll see they change and adapt with the size of your browser window.

As you add photos on your website always use the percentages rule of thumb. It will keep your images in tact across all devices. If you have any question – contact a Virteom representative today!

/ Print
Posted by Olivia Justice in How To, Image Resize

Comments


Be the first to comment!
Name*
E-mail*
Website
Comment* (250 characters max)
0 Pending Comments
 Keep me updated of follow-up comments!
Most Recent

By Olivia Justice
October 11, 2017 Category: Modules

Changing URLs is restricted in Virteom CMS - Why? Because it can wreak havoc on your website. Changing your URL can result in: Loss of SEO Ranking Loss of referring site traffic. Have you ever been to a site linked from a blog you were reading and then get a Page does not exist error? - It is likely that they changed the URL. Email Clicks go to Dead URLs much more! To learn more about why changing URLs can devastate your SEO traffic CLICK HERE. But we understand that sometimes changing your URL is neccesarry. We suggest adding a redirect on your page. Redirection is the process of forwarding one URL to a different URL. This allows you to send users and search engines to a different URL than the one that was originally requested. Virteom CMS makes it easy for you to add a redirect on your website. Keep reading this how-to guide to get the scoop: How to add a redirect on your website First things first, youll need to login to the back-end of your website. Type in your

By Virteom
October 05, 2017 Category: User Access, Learning

With Virteom, website administrators can choose which members have access to certain areas on the site. For example, you would want your blogger to have access to create and edit blog pages. You can make different levels of users, from customers and staff, to full admins. Lets get started. After logging in as an admin, select Manager from the top bar. Then, on the left hand side, select Members. This will bring up a screen showing all of the members who are registered to your site. Click on Edit next to a members name. Here is the user access part of the next screen. You can edit contact information, change a users password, and update user access from this area. Editing Access and Permissions Box 1 is a list of all of the administration features a user has access to. In this example, this user has access to all features. Explore the list on your site and determine how you wish to set up access. Box 2 is a list of all of the web pages on your site. Again this user has access to edit

By Olivia Justice
September 29, 2017 Category: Meta Tags, Meta Descriptions, Browser Titles, SEO

SEO in Virteom CMS Search engine optimization (SEO) is an important piece to your website. Generating traffic from organic searches to your website is a key part of your online business. The time and effort you put towards your websites SEO can mean all the difference. Thats why adding things like browser titles, meta descriptions and meta tags for every page on your site is important. Adding these behind the scenes SEO tactics, you can improve your search appearance. In Virteom CMS, we make it easy to add things like meta description, meta tags and browser titles in. Follow along with this how to learn how to add this SEO information on all the pages of your website. First things first, youll need to log-in to the back end of your website. Once you have logged in, you should see a black navigation bar at the top of your screen. Click on Navigation from the black taskbar at the top of your screen Click on the Edit icon that is next to the page name youd like to add SEO information

Get In Touch
We Tweets
Virteom ©