Every time you stretch an image, logo, or font, somewhere, a graphic designer cringes. We can’t deny that photo editing software is the best thing since the invention of paintbrushes. But with great technology comes greater responsibility and expectations to deliver flawless visual experiences. Social media, website builder, or blog, most platforms today are equipped with a “resize image” button. But how often have you ended up with Minesweeper-pixeled pictures when you drag-to-enlarge?
Indeed, who would have thought such a no-brainer sounding task could be so frustrating. It’s times like these that we behold the bailiwick of graphic designers, otherwise taken for granted. Teaching yourself graphic design or trying to DIY your way out of an image resizing bugaboo? Here’s everything you need to know about resizing images.
What Does “Resize Image” Mean?
In non-graphic-designer layman terms, resizing an image generally involves changing its dimensions without cropping any parts out. This is an often needed function for fitting your original-sized images into designated spaces such as banners, social media, or printed billboards with specific dimensions. This is unfortunately met with a couple of common problems:
- The image quality diminishes with enlargement: In other words, the manipulated image appears pixelated or blurry.
- The image aspect ratio does not match the stipulated dimensions and will appear stretched and distorted if it is manipulated to fit: For example, a landscape should not fit into a portrait space without rotation.
The struggle is real! But now that you’re on the same page let’s move on to a graphic designer’s understanding of what goes on every time you manipulate an image’s size. There’s more than one way to skin, or rather, shrink the cat. But only by zooming in to pixel-level will you be able to understand how different methods of resizing will favor your outcome.
Understanding Types of Images Before Resizing
The type of image affects your outcome on image resizing. As such, it is important to know which category of the image you are working with. There are two main types of images; they are raster and vector-based.
Raster Images
Raster images, for example, photos, are made out of pixels. They are composed of pixels that form continuous color tones and soft blends. More often than not, pixel-based raster images tend to become blurry if you expand them without also changing the number of pixels. It is essential to bear in mind that once an image is created at a specified dimension, you cannot increase the size of its dimensions without losing quality. This is so even with the use of photo editing software. For instance, in Photoshop, pixels are randomly added with image expansion but rarely produce good image quality results.
In the cases of raster images, large dimensions equate to larger file size. This is important to note as the file size may affect the page loading speed if used on websites. Raster images are commonly saved under the file formats of jpg, gif, psd, pdf, bmp, and eps.
Vector Images
Vector images such as clipart found on Microsoft Word are vector graphics. You’ll notice that images tend to be block-colored without many graduations of color tones. Vector images are not composed of pixels. Hence, they are known to be resolution-independent, which means that they can be scaled to any size without their quality being affected. Vector programs such as Adobe Illustrator are used for creating logos that can be resized without any distortion.
In cases of image resize, the great news is that even vectors with large dimensions still maintain a small file size. So go wild with expansion! Common vector file formats are ai, svg, cdr, pdf, and eps.
How Pixels Change with Image Resize
To understand what really happens when you resize a raster image, we must first understand the definition of pixels. Typically known as the tiny squares that make up an image, pixels have no definite physical size. A single color makes up each pixel, so the more pixels your image has, the higher the image grade. Image resolution defines the quality, often represented by Pixel Per Inch (PPI) or Dots Per Inch (DPI) values in print terminology. The higher the value, the sharper, and more refined your image will appear because of the increased level of detail it holds. When you resize images, this value is likely to change. It’s important to take note of the resolution and follow recommended guidelines for better image quality.
What Goes On Behind The Scenes
Graphic design software such as Adobe’s Photoshop allows the user to manipulate the resolution when resizing. This is also known as resampling. It means that the software can create and add new pixels based on its surrounding colors to achieve a larger size. On the reverse, the software eliminates excessive pixel information when you reduce the image size.
Since not everyone owns Photoshop, the option to resize rasterized images in Microsoft programs such as Word and PowerPoint is not unheard of. The problem is that this method is not exactly resizing, but rather, it is technically image scaling. Remember that pixels have no set dimensions. So scaling means that your pixels are being stretched rather than increased in numbers. This is why the drag-to-enlarge method commonly results in a decrease in image resolution and consequently, quality. Crisp images are often associated with a strong and reputable brand identity. Images should enhance the user experience, and hence, this method of resizing should never be used, and neither should stretching screen captures.
Taboos in Image Resizing
So we’ve discussed why raster image resizing is generally not encouraged. Unfortunately, the demands of being a graphic designer sometimes dictate that you work with what you have. In push-comes-to-shove cases, some image resizing principles should be adhered to preserve as much quality as possible. Before you start shrinking or enlarging, take special considerations of these quick guidelines:
- Use resizing to decrease file size instead of increasing dimensions.
- Avoid resizing an image more than once.
- Do not increase the size of an image by more than 125%.
- Retouch, and correct your image before you resize it.
- Resizing images in photo editors is recommended to preserve maximum photo quality.
- If resizing is necessary, use photo editing software to achieve the best outcome.
If you do not own photo editing software, there are options to resize your image online. And by that, we reiterate the advice of only shrinking it. Should you need a handy tool, Adobe Photoshop Express is a reliable online software that enables you to do so. The interface is pretty straightforward. It presents almost the same kind of functions you have on your mobile phone. So hurray! You do not need any fancy graphic designer skills to resize your image.
Digital Image Dimensions Cheat Sheet
What is your purpose for resizing your image? Are you blowing it up for a billboard or shrinking it down for a Facebook post? Have you ever uploaded an image on social media only to find that the most important part of your photo has been cut out? It’s time to stop working the time consuming trial-and-error way. As digital media supersedes print in marketing, here is a cheat sheet of dimensions you’ll need to optimize your brand’s image.
Just like all websites, Facebook optimizes images to fit mobile devices. How your image is displayed depends on whether your audience sees it on a phone or a computer desktop. It’s important to note that Facebook doesn’t stretch your images on bigger screens. Instead, it’s automated to crop images on smaller screens. Hence it’s always safer to adopt the dimensions for mobile when uploading images to prevent any loss of image information. Here are the dimensions:
- Cover photo: 820px x 312px (desktop), 640px x 360px (mobile)
- Profile photo: 180px x 180px (desktop), 140px x 140px (mobile)
- Banner: 1200px x 628px
- Event Image: 1200px x 628px
When uploading images on Instagram, aspect ratio is an important factor to note. You might already realize that the visual platform best presents images in squares regardless of the device. Hence using huge landscape or portrait images might not bode well in your favor. It’s best to keep your image aspect ratio between 1:1 and 4:5 for the best results, lest you end up having to crop your image or put up with large blank spaces.
- Profile photo: 110px x110px
- Photo feed: 1080px x 1080px
Twitter might not be a visually-focused platform, but it’s a great marketing tool for brands to remain relevant. The social media platform allows users to post up to 4 images in one post. Graphic designers should give an allowance of 60px on the top and bottom of the image as it might be cropped.
- Cover photo: 1500px x 500px
- Profile photo: 400px x 400px
- In-stream photo: 440 x 220px
LinkedIn leverages professional networks to create brand awareness, especially for B2B companies. As such, it’s crucial to present yourself or your organization in the best light with appropriately sized images.
Personal Page:
- Cover photo: 1584px x 396px (landscape ratio of 4:1)
- Profile photo: 400px x 400px
Organization Page:
- Cover photo: 1584px x 768px
- Profile photo/ logo: 400px x 400px
Websites
Your website represents your brand and should create a memorable impression when fused together with a seamless user experience. Unfortunately, one of the most common problems for a high bounce rate is the loading speed of the page. In today’s day and age, efficiency and speed are just as important as aesthetics. It is thus imperative you understand the recommended resolution and dimensions for websites. Large dimensions mean huge files, which also means slower performance. The recommended image size for websites is less than 500KB. Any file size exceeding 20MB will adversely affect site performance.
- Image width: 1500px to 2500px wide (to accommodate different devices)
It is noteworthy that any image less than 1500px wide will result in a blurry mess. While large images might appear crystal sharp on your small screen, it might affect page loading speeds. Thus, it is best to resize your image to the above-recommended size width before uploading it to your website.
Resize Image for Print Formats
For print purposes, such as resizing images for editorial material, banners, or backdrops, image resolution comes into critical play. Printers produce an image quality based on Dot Per Inch (DPI). This is similar to pixels used to measure clarity for digital formats. The higher the DPI, the sharper your image will be. Low DPI images result in fuzzy and unprofessional print, which might affect the reputation of your brand.
You’d think that billboards require large DPIs because of their huge dimensions. Conversely, we recommend the opposite. This is because we view large scale images from a distance, whereas we can hold paper-printed images in front of our eyes. That means more scrutiny on details such as pixelation because of a shorter viewer distance. Here are the recommended resolutions for print media:
- Regular paper printing: 300DPI (Most printers handle a maximum of 354DPI)
- Large format printing: 20 to 200DPI (Depending on dimensions)
Outsourcing Your Image Editing
Hard as we strive, we can’t be a jack of all trades. Sometimes, you simply need to hire a graphic designer. This is especially if you can’t quite frame the main focus of your image within the recommended dimensions. In cases like these, you might need a professional graphic designer to extend the image’s background. This retouching helps you to fulfill a specific aspect ratio without cropping any part of your image.
No resources for extra manpower? Here’s when outsourcing can become your best friend. Platforms like this one are reliable, affordable, have a quick turn-around time, and come with many recommendations. It even provides services such as video editing, and voice overs. Outsourcing is a great solution, especially for companies that do not need a graphic designer on a regular basis.
Sizing Things Up
In a nutshell, it’s best to “resize image” by only shrinking. Every pixel matters! When in doubt, there’s no shame in asking a graphic designer for help. Design is a solution to a problem. And after all, life isn’t quite formatted for a cookie-cutter, one-size-fits-all solution!
