BNMC Blog

Internet Images, Part 2: Resizing Images

Internet Images, Part 2: Resizing Images

In part one of this tutorial we discussed the types of images you will encounter online and how they can be used. Today, we will go a little bit further and talk about how to best alter your images without sacrificing quality. Let’s dive right into it. We will be using Adobe Photoshop, but there are several image editors that you can utilize to edit images for online publication.

Resize and Optimize Images in Photoshop

This blog will help you edit images for the web, periodicals, or whatever other medium you will need it for. 

For our example, we will use the same images from part one, a florist’s boutique. Today, we’ll take you through how to edit it for the web. 

First you will want to load it in Photoshop. It will look something like this:

Notice the percentage by the name. That number indicates the size of the image in the editor. In this case, the image has been zoomed out so only 17.7 percent of its pixels are displayed. This doesn’t mean they are displayed offscreen, you are just being notified that the picture you are seeing isn’t the whole image. 

Zooming in Photoshop is done easily and is a great tool. To do so you can hold CTRL + Spacebar and left-click to Zoom in, then holding CTRL + Alt + Spacebar as you left-click to Zoom out.

Here is the same image pictured above zoomed in to 100%.

At 100%, the image will be seen in its actual size. 

What Does This View Reveal to Us?

Firstly, it tells you this is a big image; much larger than you would want it to be on a website. 

When you zoom in, it shows us that the image is high in quality, which means for editing purposes, it has lots of potential. If you were to print this image, it would likely come out looking crisp, but as mentioned in the previous blog, you don’t want huge images on your website because they would slow things down. 

This is as good a time as ever to remind you that images should only be shrunk. We went through this before, but as a reminder, you don’t want to enlarge an image because you lose the crispness of it. 

You will also want to save a copy of the original at this point. It’s a large image and it can be useful if you need to revisit for other purposes later on. 

Step One – What Size Image Do You Need?

If you aren’t a graphic designer—and, if you’re reading this, there is a good chance that you aren’t—it can be a challenge to estimate the size of the image you need. It will likely depend on where you want to feature your image on your website. 

If you’re using Firefox as your web browser, there’s also a handy shortcut you can use if you’re just trying to replace an image already on your website.

  1. In Firefox, navigate to the page your new image is going to go.
  2. Right-click the image to be replaced and select View Image Info.
  3. A window displaying the image will pop up, giving you additional information about it.
  4. Finding the Dimensions will give you the width and height of the image in pixels.

For reference, you should use the values found in the properties. It will make things much simpler.

Eyeballing it can also work, using these sizes as reference:

  • 3840px is the width of a 4k Ultra HD monitor or television screen.
  • 1920px is the width of a standard high-definition monitor or television screen.
  • 1080px is the width of most Instagram images.
  • 820px is the width of a Facebook Cover Image on a desktop or most laptops.
  • 272px is the width of Google’s logo in the center of Google.com on most desktops and laptops.

If you are looking at this on a desktop computer or a laptop, these images will give you an idea of what size you will need. If you are reading this on a mobile device, however, some mobile browsers may scale these images and misrepresent the actual sizes, depending on your browser and device.

Step Two—Zoom Out

We went through the zoom percentage. It can be found in the left corner of the Photoshop interface. You will want to work with your image in 100% zoom. This means that you are working on it in actual size. All you must do is click the percentage and set it to 100% or use the methods we went over earlier. 

This will give us a fair representation of how large the image is. 

Step Three—Time to Resize

Click into the Image Menu and access Image Size, where you should find this window:

While in this window:

  1. Set the Width and Height to be displayed in Pixels instead of inches, centimeters, or the like.
  2. Make sure the brackets that point to Width and Height next to the link icon are activated. Clicking on the link icon will toggle this on and off.
  3. Insert the size you want the image to shrink down to. By changing either the height or the width, the other should change proportionally.
  4. We generally recommend leaving Resample checked and on Automatic for the most success.
  5. Click Okay to complete resizing your image.

Step Four—Saving Your Edited Images

Now it’s time to save your final image. In the last blog, we talked about image formats. You should use JPEG to export your image to your save location. To do so, you navigate to File > Export > Export As. At that point, the Export As window should appear:

You’ll see a preview of your image, where you can use the + and icons to adjust your image to 100 percent. Under File Settings on the right, you should check that Format is set to JPG.

To adjust the quality, you can just use the slider on the left. Watch the image preview as you maneuver the slider and stop when you see any degradation of the image at all. Every image is going to scale differently, but the quality value will likely lie somewhere between 40-to-70 percent without impacting how it looks.

Understand that this is extremely important, as the quality slider is what determines the size of the image file. You’ll need to find a balance to ensure that download speeds won’t be affected too much. A too low image will look over-compressed, but not low enough will slow down your download speeds.

Keep an eye on the places where high-contrast colors touch each other for the clearest signs of degradation, like where light and dark meet. Lowering the quality too much will result in weird artifacting and shapes showing up around the edges.

Once you’re done, click on Export. You’ll be asked to name your file and then you are done. Just be sure not to overwrite the original version. 

We hope you got something out of this blog series as being able to manipulate images can come in handy, especially online. If you would like to see more tutorials about using technology, leave a comment in the forum below, and be sure to check back on our blog regularly.

 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Tuesday, April 20 2021

Captcha Image

By accepting you will be accessing a service provided by a third-party external to https://www.bnmc.net/

Subscribe to Our Blog!

Mobile? Grab this Article!

Qr Code

Tag Cloud

Security Tip of the Week Best Practices Technology Productivity Business Computing Cloud User Tips Email Software Privacy Network Security Hackers Workplace Tips Microsoft Efficiency Business Google Computer Data Hardware Hosted Solutions Malware IT Services Communication Internet IT Support Mobile Device Small Business Smartphone Mobile Devices Android Innovation Phishing Users Cloud Computing Backup Ransomware Tech Term Data Recovery Managed IT Services Windows Smartphones Saving Money VoIP Quick Tips Information Outsourced IT Cybersecurity Passwords Upgrade Miscellaneous Disaster Recovery Network Browser Business Management Facebook Windows 10 Data Backup Social Media communications Microsoft Office Server Collaboration Office 365 Business Continuity Productivity Managed Service Internet of Things Managed IT Services COVID-19 Gadgets Data Management Apps Windows 10 Mobile Office Save Money Infrastructure Information Technology Word App Analytics Vulnerability Remote Monitoring Artificial Intelligence Gmail Remote Work Conferencing Money Spam Chrome WiFi Managed Service Provider Remote Workers Government Router Encryption IT Support Company Culture Settings Virtual Reality Google Drive Tip of the week Holiday Website Employer-Employee Relationship BYOD Networking Display VPN Paperless Office Access Control Applications Data Security Compliance Business Technology Big Data Managed Services Robot Virtual Private Network Employee-Employer Relationship Unified Threat Management Automation Operating System End of Support Firewall Maintenance Content Filtering Bandwidth YouTube Document Management Development Avoiding Downtime Antivirus Wi-Fi Risk Management Computers Wireless Virtualization Apple Education Storage HIPAA BDR Office Tips Hacker Data storage IT Management Business Intelligence Monitors Vendor Management Server Management Chromebook Touchscreen Data loss Computing Managed IT Cybercrime Remote Outlook Downtime Tablet Regulations Telephone Systems Bring Your Own Device How To Marketing LiFi Budget Blockchain OneNote desktop Social Hosted Solution MSP Data Breach Humor Augmented Reality Managing Stress Windows 7 Remote Computing Best Practice Administration Software as a Service Mouse Two-factor Authentication SaaS Managed IT Service Cryptocurrency Going Green Customer Relationship Management Scam IT Vendor Social Network Free Resource Solid State Drive Identity Theft Break Fix Printing Search Retail Alert Training iOS Mobile Security Images 101 Hard Disk Drive Password Laptop The Internet of Things Legislation Scalability PCI DSS Google Maps Deep Learning Hotspot Internet Exlporer Virus Logistics Tech Support Mobile Device Management Utility Computing Microsoft Excel Connectivity Updates FBI SharePoint IT Technicians Optimization Device Reducing Cost Inventory Smart Technology Modem FinTech Mixed Reality Social Engineering Alt Codes Techology Staff Leominster Statistics Migration Consulting Battery Twitter Lenovo Language Value LED Threats Asset Management Websites Recycling Laptops Peripheral Digital Payment Mail Merge IoT PowerPoint K-12 Education Downloads Mirgation Mobility Batteries Shadow IT Digital Shortcut Distributed Denial of Service Cookies Meetings Safety user treats Disaster Typing VoIP Unified Threat Management K-12 Schools Current Events Bluetooth Comparison Social Networking Files Firefox Superfish Computing Infrastructure Professional Services Co-Managed IT Memes Chatbots eWaste Managed Services Provider Network Congestion Management Address Permissions Star Wars Halloween Onboarding GDPR Instant Messaging Print Toner Myths Gamification Spyware Patch Management Nanotechnology Slack Hard Disk Drives Shopping Uninterrupted Power Supply User Error Wearable Technology Network upgrade IT solutions Specifications Motherboard Cables Messaging File Sharing Writing RMM Google Docs Alerts USB Content Huawei Computer Care IBM Identity Continuity Entertainment Policy Fraud Cost Management Scary Stories Digital Signage Data Warehouse Hacks Heating/Cooling Multi-Factor Security Shortcuts Mobile Management Dark Data Update Google Wallet Screen Reader Charging Running Cable Monitoring Solid State Drives Employees Bitcoin Time Management Printer Smart Office Corporate Profile Black Friday Wires Employee-Employer Relationships Banking Business Growth Licensing Dongle Buisness Streaming Processor Holidays Solar Virtual Desktop Hybrid Cloud Automobile Procedure Legal Emergency Assessment Sports Troubleshooting Business Analysis Distribution G Suite Politics Servers Google Calendar Security Cameras Profiles Customer Service Unified Communications Drones Dark Web Smart Tech Spying National Security Gig Economy Dell Work/Life Balance Windows 8 Network Management Work Payment Card Health WannaCry Private Cloud Cyber Monday Voice over Internet Protocol Analysis Students Office Reviews Cabling Samsung Cooperation Service Level Agreement Human Error Memory Administrator Black Market Printers Taxes IT Budget Web Server what was your? Law Enforcement GPS Electronic Medical Records Notifications IT Consultant Physical Security Mobile Computing Emoji Cameras Upgrades Gadget Tracking Crowdsourcing Financial Cleaning Personal Information Botnet Cortana CCTV 3D Printing Webcam Processors Machine Learning Error Unsupported Software Point of Sale Ben McDonald shares Relocation Travel Computer Repair Mobile Data Supercomputer Recovery CrashOverride Regulation How To Staffing Motion Sickness

What Our Clients Say

  • BNMC has provided us with nothing less than outstanding service and results for all of our IT needs for the past few years. Every member of their staff is professional, knowledgeable, friendly and eager to solve any problem...
  • 1
  • 2
  • 3