Field Notes Blog
News and thoughts on UI/UX, web design, and more.
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 ...".
Method 2: Measure
Both Macs and PCs have a built-in way to measure the screen and capture screenshots, both of which are handy in getting pixel dimensions.
On a Mac:
On a PC:
Method 3: Look up
There are many websites that provide current lists of the dimensions of various social media graphics. Simply do a search on “social media image sizes [year]”. I have found this one by Rebekah Radice to be very useful: https://rebekahradice.com/social-media-image-sizes/ .
There are also lots of image editing apps with default canvases sized to fit social media. On my iPhone I use (and really love) Over.
Sample Sizes in pixels
Sizes vary a lot or we wouldn’t need to talk about sizing! But here are some examples:
Full screen width: 2500 px (the large “hero” images that span from one side of the monitor to the other)
Full page width: 1000 px (hero images that span from one side of the page to the other. A good standard for website page width is 1000 pixels)
Blog image nested with text: 500 px
Blog thumbnail image: 300 px
A BIG Caveat
Websites have to look good everywhere from tiny phones to giant monitors. When you look at your site on different devices you can see how it resizes and changes – especially the images. This is called responsive design and it’s a technique that uses both design and technology. When resizing images, be aware that you may need some trial and error to get the best combination of file size and dimensions – especially when working with large images that fill the entire width of the screen.
That's it for this week’s Digital Summer Camp. To get a FREE, frosty new episode delivered straight to your In Box next week, join my mailing list.
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