Voyage Tech Blogs

Voyage Technology has been serving the Beaver Dam area since 1999, providing IT Support such as technical helpdesk support, computer support, and consulting to small and medium-sized businesses.

Optimizing Images for the Web 101 - Resizing Your Images

Optimizing Images for the Web 101 - Resizing Your Images

It wasn’t long ago that we took the time to discuss what format is best while you’re sharing images, whether via email or online. The idea was that images with the smallest file sizes were best, as they could be shared and downloaded more rapidly—without a tradeoff in terms of quality. Let’s discuss how this can be accomplished in Photoshop.

Resizing and Optimizing an Image in Adobe Photoshop

For a long time now, Photoshop has been the de facto option people turn to when they want to work with an image. Having said that, plenty other applications exist that are capable of what we will discuss today.

Rest assured, if your preferred image editing program is at all like Photoshop, this blog will likely give you a good enough idea of the process.

Let’s assume that there’s a photo of a florist’s boutique that we want to put up on a website. When loaded into Photoshop, this image might look something like this:

You may have noticed the small percentage—16.7 percent—indicated next to the file name.

This number indicates that the image has been zoomed out, to the point that only 16.7 percent of its pixels are displayed. This is different from the pixels simply being offscreen. Rather, you are being informed that you simply aren’t looking at the whole picture.

Zooming in and out of Photoshop is a simple task that can be done in a few different ways. The simplest way is to use a few keyboard shortcuts: hold CTRL + Spacebar and left-click to Zoom in, then holding CTRL + Alt + Spacebar as you left-click to Zoom out.

For instance, here’s the same image pictured above zoomed in to 100%.

This allows us to view the image at its actual size, only seeing a small portion of it.

What Does This View Reveal to Us?

Well, for one thing, this is a big image.

Remember, zooming in and out doesn’t change the actual size of the image—just the percentage of its pixels that are displayed on the monitor. As it turns out, this image scales beyond the borders of the monitor.

This is by no means a bad thing—it just shows us that the image is high in quality, which means it has lots of potential. If printed, this image would almost certainly come out looking crisp. However, if included on a website as is, the image would be too large to properly display on a user’s screen—and as a result, it is bigger than it needs to be.

This phenomenon isn’t uncommon amongst stock images or those captured on a digital camera or smartphone nowadays.

This seems like a good place to pause and establish one thing: images should only ever be shrunk down. Assuming it’s possible at all, blowing up a small image will need to be carried out by a graphic designer’s expert hand. Otherwise, there’s a good chance the image’s quality will suffer.

You should also always save a copy in the original size, as we mentioned in the other blog.

Step One – Figuring Out the Size You Need

Again, without experience in graphic design, this can be a challenging step—and will also depend on where it will be featured on your website. Some estimation will likely be required, with adjustments made throughout.

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.

Using these values as a reference for your new image will make the process much simpler.

Eyeballing it can also be effective, 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 happen to be reading this on a desktop or laptop, you’ll also find the following images to be a good way to establish these different sizes. It unfortunately won’t work so well on all smartphones, as the images will likely be scaled to fit. Hopefully, they will prove helpful.

Step Two—Make Sure Your Zoom is at 100%

In Photoshop, your Zoom percentage can be found below your image, in the bottom left corner. All you must do is click the percentage and set it to 100%. Alternatively, you can always use the shortcuts we went over earlier.

This is so we can get a good impression of what size the image will be once the resizing process is done.

Step Three—Resize the Image

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 your image’s resizing.

Step Four—Saving Your Edited Images

Finally, you’re ready to save your image. If you remember from the last blog, where we discussed the various image formats you could use, you’ll know that a JPEG is the best option while working on a photograph.

In Photoshop, 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.

You can adjust the quality of the image with the slider to the left. Keep an eye on the preview as you maneuver the slider. Stop once you see a degradation in quality, stop, and move the slider a notch to the right.

While every image is going to be different, the quality value will likely lie somewhere between 40-to-70 percent without impacting how it looks.

This is the crucial part, as the quality slider is what determines the size of the image file. A balance is required to optimize download speeds. 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 completed, click on Export. At this point, you’ll be asked to give your image a file name. Again, don’t overwrite the original version!

Hopefully, this guide will prove helpful. For more best practices, keep checking our blog or reach out to us at 800.618.9844!

 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Friday, 28 February 2025

Captcha Image

Sign Up For Our Newsletter!

Mobile? Grab this Article!

Qr Code

Tag Cloud

Security Technology Tip of the Week Best Practices Business Computing Data Productivity Business Software Innovation Hackers Cloud Network Security User Tips Internet Hardware Efficiency IT Support Malware Privacy Email Google Phishing Workplace Tips Computer Users Collaboration IT Services Mobile Device Hosted Solutions Quick Tips Ransomware Microsoft Cybersecurity Workplace Strategy Small Business Data Backup Communication Passwords Smartphone Saving Money VoIP Android Business Management Smartphones Mobile Devices communications Backup Data Recovery Upgrade Managed Service Social Media Browser Managed IT Services Disaster Recovery Microsoft Office Windows Tech Term Network Internet of Things Remote Facebook Automation Artificial Intelligence Cloud Computing Covid-19 Productivity Current Events Server Managed Service Provider Remote Work Miscellaneous Gadgets Outsourced IT Information Holiday Spam Encryption AI Employee/Employer Relationship Windows 10 Business Continuity Compliance Office Government Training Data Management Blockchain Wi-Fi Windows 10 Business Technology Virtualization Bandwidth Apps Data Security Mobile Office Two-factor Authentication Employer-Employee Relationship Apple Networking App Mobile Device Management Vendor Gmail Chrome Managed Services Budget Voice over Internet Protocol How To Hacker BDR Avoiding Downtime Marketing BYOD Computing Applications Information Technology Access Control Office 365 WiFi Tip of the week Conferencing Storage Healthcare Password Bring Your Own Device Managed IT Services Computers Website Operating System HIPAA Router Risk Management Virtual Private Network Health Help Desk Analytics Office Tips Big Data Augmented Reality Retail Telephone Scam Data loss Customer Service Cooperation Free Resource Project Management Windows 7 Going Green Patch Management Save Money Microsoft 365 Remote Monitoring End of Support Vulnerability Vendor Management Solutions Cybercrime Firewall Display Printer Paperless Office Windows 11 Infrastructure The Internet of Things 2FA Monitoring Excel IT Support Document Management Social Remote Workers Maintenance Sports Customer Relationship Management Downloads Antivirus Mouse iPhone Licensing Entertainment Administration Vulnerabilities Hacking Presentation Data Privacy Images 101 Wireless Technology Multi-Factor Authentication Robot Mobility Telephone System Cost Management Settings Wireless Printing Content Filtering Word IT Management YouTube Meetings VPN Employees Physical Security Integration Cryptocurrency Modem User Tip Processor Computer Repair Mobile Security Virtual Desktop Holidays Safety Data storage LiFi Data Storage Smart Technology Supply Chain Outlook Video Conferencing Machine Learning Managed Services Provider Money Saving Time Virtual Machines Professional Services Humor Managed IT Service Deep Learning Download Net Neutrality Twitter Alerts SQL Server Technology Care Error History Business Communications Financial Data Browsers Smartwatch Education Connectivity IT Social Engineering Break Fix Scams Competition Upload Procurement Remote Computing Azure Hybrid Work Cyber security Multi-Factor Security Tech Human Resources Mobile Computing Social Network Telework CES Tablet IoT Communitications Search Dark Web Cables Best Practice Trends Supply Chain Management Alert Buisness File Sharing Regulations Dark Data Google Calendar Term Google Apps User Managed IT Customer Resource management FinTech Legal Data Analysis IT solutions Star Wars IT Assessment How To Microsoft Excel IT Maintenance Business Growth Gamification Flexibility Notifications Staff Value Business Intelligence Travel Social Networking IP Address Legislation Shortcuts Organization Techology Fileless Malware Digital Security Cameras Google Maps Smart Devices Cortana Ransmoware Alt Codes Content Remote Working Wearable Technology Memory Vendors Downtime Unified Threat Management Motherboard Data Breach Comparison Google Play Be Proactive Recovery Health IT Unified Threat Management Directions Videos Hosted Solution Assessment Electronic Health Records Permissions Workforce Hard Drives Domains Typing Wasting Time Threats Trend Micro Network Congestion Specifications Security Cameras Workplace Strategies Google Drive User Error Microchip Internet Exlporer Software as a Service Knowledge Fraud Meta Refrigeration Public Speaking Username Managing Costs Amazon Point of Sale eCommerce Lithium-ion battery 5G Black Friday SSID Entrepreneur Google Docs Unified Communications Database Surveillance Experience Virtual Assistant Outsource IT Media Bitcoin Network Management Running Cable Tech Support IT Technicians Virtual Machine Environment Cookies Monitors Cyber Monday Medical IT Google Wallet Proxy Server Reviews Tactics Development Hotspot Transportation Small Businesses Undo Windows 8 Laptop Websites Mirgation Hypervisor Displays Nanotechnology Optimization PowerPoint Drones Shopping SharePoint Addiction Electronic Medical Records Language Employer/Employee Relationships Outsourcing Navigation Management PCI DSS Halloween Chatbots Lenovo Gig Economy Screen Reader Writing Distributed Denial of Service Workplace Application Service Level Agreement Internet Service Provider Virtual Reality Computing Infrastructure Teamwork Hiring/Firing Scary Stories Private Cloud Identity IBM Evernote Paperless Hacks Server Management Regulations Compliance Superfish Bookmark Identity Theft Smart Tech Memes Fun Co-managed IT

Blog Archive