#WEB IMAGE RESOLUTION AND SIZE SHOPIFY HOW TO#
#WEB IMAGE RESOLUTION AND SIZE SHOPIFY FREE#

Step 1: Acquire the image you wish to work on and put it on your hard drive so it’s ready to upload. Now that you understand the 3 parameters for good image optimization – pixel dimensions, resolution, and image quality, you’re ready to go zap those numbers into our handy-dandy tool, Web Resizer! Using Web Resizer to Prepare Images for Your Blog You can increase or decrease quality based on what you’re seeing. I find that an image quality between 60 and 80 for photographs is the best balance between compression and quality.Īll good image manipulation tools will show you a side-by-side preview of what the original image looks like next to the compressed version. We DO want to apply some compression to images to make them smaller, so they’ll load faster, and this is expressed as image quality. See the squiggles surrounding each letter below? jpg that now look like they have worms – those little squiggles that appear around the edges of things when an image is overcompressed. This is why you probably have some images on your hard drive that have been saved over and over again as. tif formats, which preserve every single pixel. jpg, it compresses even further, because JPEG is what’s called a “lossy format” – unlike. For example, every time you re-save an image as a. The third factor you have to look at when sizing images is the amount of compression applied to the image to make it smaller. Don’t worry, this tool I’m about to tell you about handles that automagically. So if you have an image that is higher resolution than that, you’ll need to size it down to 72 ppi. You might have an image that’s 300 ppi (ideal for print), 240 ppi (some cellphones produce this size), or 72 ppi (screen resolution).įor screen, you always want 72 ppi. You can always size DOWN, but never UP with images.ĭifferent images come out of cameras at different resolutions, or pixel density. You don’t need a bunch of extra pixels to just have to throw away – but don’t underbuy either. Hint: Don’t overbuy the image size – pay attention to the dimensions listed from the stock agencies. So once you’ve figured out how many pixels you need in at least one direction, you know what size image you need to purchase. If you want an inset image that’s half the width of your content, so text can wrap around it, it needs to be…divide by 2…carry the 1…you get the picture.

What’s that? You said 600 pixels? A truckload of Rice-a-Roni to the lucky winner!Īctually, 580 would probably be even better, just to make sure it colors inside the lines of the padding in your design.

So – if your blog has a content area that’s 600 pixels wide (you can measure this with a Chrome extension like Page Ruler if you’re not sure) – then if you want an image that will span the width of your content, how wide does it need to be, pixel wise? That puts load on the server to do the math each and every time the image is loaded, and users are actually downloading the oversized image over and over again.

For the best performance, you never want to upload an image to your site that is LARGER than you need it to be and just tell WordPress to make it 70% of its original size. There are three components to sizing images for the web, and most non-designers find this nomenclature confusing, so we’ll try to handle that first so you understand what you’re shooting for.įirst, there’s the plain old pixel dimensions. What size SHOULD my images be?Įxcellent question, Grasshopper.

#WEB IMAGE RESOLUTION AND SIZE SHOPIFY FREE#

There’s a nifty FREE tool that will help you get your images web-ready in less than two minutes, without making a career change.

#WEB IMAGE RESOLUTION AND SIZE SHOPIFY HOW TO#

Now that you know where to find high quality images without stealing them, it’s time to learn how to properly crop and size them for the best balance between appearance and speed. Fact: Online media has become increasingly image-dependent.įact: Using images in your online publishing gives your ideas more credibility.įact: Using images at the wrong sizes, without optimizing them for the web, can drag down performance of your website, with negative usability and SEO consequences.

Web image resolution and size shopify