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*
0 Pending Comments
 Keep me updated of follow-up comments!
Most Recent

By Olivia Justice
March 24, 2017 Category • How To, Image Resize

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 youre 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: Setting your images dimensions using pixels is what makes your image stretch on your cell phone or from one screen to another. You dont 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

By Olivia Justice
February 13, 2017 Category • Sidebar Menu, Page Information

How to use the Sidebar Menu Sidebar menus have been used as a directory for Related Pages to a Service offering, Navigation items to a specific service or topic and even just as Links the visitor may be interested in. Sidebar menus are extremely useful and allow users to control what links are added to a page as new content is created and if old content is obsolete. Does your website have a sidebar menu, but youre not exactly sure how to add navigation items to it or how to add it to a new page? This how to guide will take you step by step on how to create the menu item for the sidebar menu and how to add the sidebar menu to your page. Signing into the Virteom CMS First things first, youll need to sign into the back-end of Virteom CMS. Go to www.yourwebsite.com/virteom and type in your username and password. Creating a New Menu from Scratch for your Sidebar Menu Now that youre logged in, youll need to access your Navigation: 1. From the Black Navigation bar at the topic

By Olivia Justice
February 09, 2017 Category • How To, Info Boxes, Modules

How to add, edit and delete Info Boxes Does your Virteom powered website use info boxes to display information about your services? Are you stuck trying to use the editor but confused why you cant change the content within the box? Well, wonder no more. This follow along article explains how you can change the photo, text, button and link that is within these infoboxes. Log-in to your Virteom Powered website Obviously enough, you need to be logged in to edit the infoboxes. So, go to yourwebsite.com/virteom. Once youre logged in, access the Manager Now that youre logged in, youll be greeted by your homepage. In top black Navigation click on Manager Accessing Modules from the Website Tools In the left hand panel Website Tools youll see a item listed as Modules. Click on it. On the left you should see a dropdown of all the modules (or commonly known as plugins) that are installed on your website. They also display on the right hand side. 1. From the menu select

Get In Touch
We Tweets
Virteom ©