For example, a printing shop may request that a photo is submitted with 300 DPI rather than 72 DPI. The printer would then output a larger number of dots for every inch, resulting in a sharper image. An image DPI value may be changed by opening the file inside MS. Reduce an image to a specific size. Quite often online applications set the file size limitations which prevent users from uploading their images. Luckily, our website can handle oversized pictures. ResizePixel provides a free service for reducing an image to a specific size in KB or MB. If that does not decrease the size enough you can look at Audit Space Usage in the PDF Optimizer tool ( File-Save As-Optimized PDF). The audit tool will tell you wehre most of the space is used ( graphics, fonts etc) then you can make decisions on what to get rid of to make the file smaller. Hope this helps, Dimitri. WindJack Solutions.
This is a 4×5″ image at 300 pixels per inch. In other words, 1200 x 1500 pixels. If you click on the image, you will see how large a 1/4 page magazine photo looks in a web browser.
Resize pictures online Online Image Resizer. Use Easy Resize and resize your pictures online to the desired size and dimensions. You can convert just one image, or use drag and drop to process many images at once. Click on the big box below to start the resizer, or read the simple instructions below.
These tips can help you avoid delays and quality problems in print publications.
High Res means High Resolution. Basically, resolution is the density of the pixels in a digital image. The more pixels, the higher the definition of the photo.
Common resolution needs:
For printed publications, always use the highest resolution (biggest) original file possible. You can tell higher resolution images by their bigger file sizes. Any image file less than 1MB will probably not be much use for high quality printing (unless it’s going to be very tiny). Don’t try to scale or touch up a low res photo. Send it to your designer for evaluation and they’ll be able to tell you if it’s useable.
Common file sizes for jpgs:
Don’t crop your photo—designers like to have cropping options. However, keep in mind that if you send a photo for a head shot, you don’t get to count the background as part of its size. If the person’s head only takes up 1/3 of your jpg, your jpg would need to be 3 times bigger than the guidelines above. (Get it?)
![]()
For a 1.5″ x 1.75″ mugshot at 300 dpi, you need at least 450 x 525 pixels. Your minimum jpg file size will be about 800K
This picture may be 1.5 x 1.75″ at 300 dpi, but her face is only .5″ x .5″, so it’s too small.
Designers: To figure if an image is high enough quality for a given use, divide the actual pixel width and height (found under Image Size in Photoshop) by the ppi needed.
Don’t take low resolution photos! You can easily downsize images for the web, but you can never upsize a photo if you want to use it in print.
Save
Fact: Online media has become increasingly image-dependent.
Fact: Using images in your online publishing gives your ideas more credibility.
Fact: 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.
Oops!
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.
But I don’t know HOW to use Photoshop!
No worries, non-designy readers.
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.
What size SHOULD my images be?
Excellent question, Grasshopper. 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.
Size = pixels wide by pixels tall
First, there’s the plain old pixel dimensions. 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. 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.
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?
I’ll wait.
What’s that? You said 600 pixels? A truckload of Rice-a-Roni to the lucky winner!
Actually, 580 would probably be even better, just to make sure it colors inside the lines of the padding in your design.
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.
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.
Hint: Don’t overbuy the image size – pay attention to the dimensions listed from the stock agencies. You don’t need a bunch of extra pixels to just have to throw away – but don’t underbuy either. You can always size DOWN, but never UP with images.
Resolution = pixels per inch
Different images come out of cameras at different resolutions, or pixel density. You might have an image that’s 300 ppi (ideal for print), 240 ppi (some cellphones produce this size), or 72 ppi (screen resolution).
For screen, you always want 72 ppi. That’s all they can display. So if you have an image that is higher resolution than that, you’ll need to size it down to 72 ppi. Don’t worry, this tool I’m about to tell you about handles that automagically.
Quality = amount of compression
The third factor you have to look at when sizing images is the amount of compression applied to the image to make it smaller. For example, every time you re-save an image as a .jpg, it compresses even further, because JPEG is what’s called a “lossy format” – unlike .psd or .tif formats, which preserve every single pixel.
This is why you probably have some images on your hard drive that have been saved over and over again as .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 especially noticeable with text. See the squiggles surrounding each letter below?
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. I find that an image quality between 60 and 80 for photographs is the best balance between compression and quality.
All good image manipulation tools will show you a side-by-side preview of what the original image looks like next to the compressed version. You can increase or decrease quality based on what you’re seeing. Use your reading glasses for this. Go find them.
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!
300 Kb In PixelsUsing Web Resizer to Prepare Images for Your Blog
Step 1: Acquire the image you wish to work on and put it on your hard drive so it’s ready to upload.
Step 2: Go to https://webresizer.com.
Step 3: Click the orange button that says “Resize Photos Now.” This will take you to a screen with an example image, which is a giraffe at the time of this writing.
Step 4: Find the little gray button at the top that says “Choose image.” This isn’t exactly obvious, but hey – it’s free. Click choose file and browse to your image you’re working on.
Step 5: Click the equally unobtrusive “Upload image” button. Note that there’s a maximum size of 5MB – if your image exceeds that size, it means you probably overbought. The image will upload, and show you a side by side preview:
Step 6: Now it’s time to work the magic. In the New Size field, enter the pixel width you’ve decided your image needs to be. Make sure the “width” radio button is selected. The tool only cares about one dimension at this point.
How To Increase Image Kb![]()
Step 7: Choose the image quality you want – between 60 and 80. There are some other cool things you can play with, too, like messing with exposure, contrast, tinting, etc. – but you can do that on your own time. We’ve got a blog post to publish here.
Step 8: Click the “Apply Changes” button at the top of the gray area. WebResizer will apply the changes and show you the new file size, which will be shockingly and gratifyingly smaller, on the left side. If you don’t like how the quality turned out, you can click “Start Over” next to the Apply Changes button and try a different number. Lather, rinse, repeat.
Step 9: (optional) – if you do need to crop, now is the time to do it. Above the optimized image, you’ll see a blue link that says “Crop image.” Click it, and you’ll get a crop box with handles on the size and corners. Put in the pixel dimensions you want for your crop, and click the checkbox next to the “lock symbol.” After you get the crop the way you want it, click “Apply changes” down in the gray box again.
Step 10: Click the blue “download this image” link below the optimized preview. The new image is now ready for insertion into your website!
Calling a do-over
Don’t forget – if you’ve EVER clicked the “Apply changes” button and then you decide to change your numbers or your crop, click the “Start Over” button and start again at the top. Otherwise your image will end up looking terrible.
Happy resizing!
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2021
Categories |