Field Notes Blog
News and thoughts on UI/UX, web design, and more.
Resizing images is an important part of making your website load fast and look great, not to mention ensuring high quality results in printing. But changing the size of an image is only one part of the story, your photos may also have to fit into a particular spot or match the shape or dimensions of existing images. This episode covers three ways of sizing images and will help you avoid some common pitfalls like scrunched photos and cut off edges.
Click the [ ] icon to see a larger version of the video.
Here are my top three approaches to image sizing, in order of how much I use them.
Say you want to add a photo to your blog as a thumbnail graphic. You snap a cool photo, pop it in and WHOA, it’s gigantic. Plus, it’s taking forever to load. Wouldn’t it be great to know how big to make the photo in the first place? In this 1 minute episode, I'll show you three easy ways to determine how large an image should be and give you some handy image size examples.
There are three easy ways to determine how large an image should be:
Method 1: Using a previous image
Simply grab an image of the same size, save it to your computer and then open it in an image editor to use it as a blank canvas to size your new image. In Chrome you can click and drag an image right to your desktop. In other browsers you can right click on the image and select "Save Image As ...".
Have you ever been perplexed by watching a photo on your website s-l-o-w-l-y fill in line by line taking forever? Or have you printed out something only to find that the images came out looking jagged or blurry? If yes, then an understanding of balancing file size and quality will help ... let’s learn about file sizes! In this one minute episode, I'll explain what is best where and show you some examples.
On the web, file size matters. Your job is to balance quality with low file size. High resolution images look great but take a long time to download. Low resolutions look bad but load quickly. Your job is to size your images correctly and use the right file type to get the size down while keeping the best quality.
Welcome to Pixel Lava Digital Summer Camp!⛱️ Every week we’re diving into a new lesson designed to build your skills to rule the web! Whether you’re a small business owner, nonprofit pro or or want to build job skills, this is for you. In this one minute video episode you'll learn about the top most common file formats, their real names, what they are actually for and which ones to use where to get the best results. I'll cover everything from JPGs to EPS, including handy links to get more detailed information. To get a FREE, frosty new episode each week, join my mailing list.
JPG aka JPEG stands for Joint Photographers Experimental Group and it’s the file type developed to best display photos. It’s lossy compression method is adjustable from high to low resolution and it’s the workhorse of the web. https://en.wikipedia.org/wiki/JPEG
Build Your Skills to Rule the Web - Starting July 10th
Are you baffled by RGB and CMYK? Flummoxed by file types? Distressed by dpi? Do you struggle to understand when to use high-res or low-res images? Do you yearn for short and simple explanations? Then you're in the right place! I'm kicking off July with a Digital Summer Camp web series called The Secret Life of Images. Over the course of eight weeks, you'll gain hands-on skills like how to resize and optimize images for your website and social media. You'll also gain valuable deeper understanding about image formats (Vector? Raster?), file types and we'll crack the mystery of resolution.
The web is visual, marketing is visual, communication itself is visual. Before a single word of your carefully-crafted copy is read, people evaluate you based on your images. The difference between a fast, appealing website and a slow, ineffective one comes down to images. The key to high quality, professional brochure is the images. But never fear, YOU can be a Graphics Eagle Scout by the end of summer!
Whether you're running your own business, boosting your job skills or managing staff, this series is packed with short, info-packed episodes that will pay for themselves many times over (especially since they're free). That's right, I said episode because this web series is in video format which means you can learn on your smartphone while lounging by the beach, lake or campfire. So join me on Instagram, Facebook, Twitter or YouTube (links in the footer) for a new lesson each week or join my mailing list to get them delivered right to your In Box.
About the author
As the owner of Pixel Lava Interactive I've helped hundreds of small businesses and nonprofits with websites, graphic design and more. I hope you'll find this blog full of useful information.
~ Ame Stanko