Blog Feed Post

Image Upload Best Practices for Improved Site Speed

This is a guest post contributed by Cloudinary, a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, administration, manipulation, and delivery. Learn more about their PHP image upload capabilities here.

Uploading images, especially at scale, is completely inefficient if you choose to do it manually. Businesses deal with lots of images on their websites, especially ecommerce companies, and it makes sense to attempt to automate the process of uploading the pictures you want to use. Small websites with few images are fine for uploading by hand, but you’ll want to consider implementing a coding structure for larger scale image uploads. 

Image upload and website performance are inextricably linked. The practices you follow when uploading images can have direct consequences for how quickly (or slowly) the pages on your website load for users. Over 50 percent of a standard modern web page is comprised of images, and many websites ruin their performance by uploading images larger than they need to be or in the wrong format. 

There are several options for automating the process of uploading images to make it easier, including PHP image upload, in which a developer creates code that allows you to simply add many images at a time to a form, which executes a PHP script to automatically add the images to your site. 

Just because your site uses code to make uploading images more efficient, that doesn’t mean the images are always going to be managed optimally. The following five best practices highlight some of the most useful tips and tricks you should consider using when handling and uploading lots of images to your website. By implementing these best practices you can save time and ensure optimum website performance. 

Use Content Delivery Networks 

Hosting images on the same server you use for your website is a terribly inefficient way to deliver images to your website’s visitors. Uploading all images to the same server that’s used to run your website puts a huge strain on the server, which ends up slowing down your load times. The end result of slow load times on your site is reduced traffic and thus lower sales. 

One of the best things you can do to manage your images is to upload them for hosting on a content delivery network (CDN). A CDN is essentially a globally distributed network of servers. When someone browses your site, the CDN routes the user to the server nearest to their location, which dramatically improves the performance of your pages by speeding up the image delivery to the end user.  

Add Fingerprints to Image URLs 

Image caching stores a local copy of the images on your site on visitors’ web browsers, which negates the need to download the images again on subsequent visits. Many webmasters take a cautious approach to image caching out of fear that if they update their images, users might get served old images instead of the updated ones. 

To overcome this potential issue, you can get your developer to automatically add the MD5 hash of all uploaded images to their URLs, as they are uploaded. The MD5 is essentially an image’s fingerprint. When an image changes, so does the MD5 and thus the URL of the image, which means that each time you update your images, the browser is forced to grab the new image. 

By taking this small step, you can set your image cache to expire in the very distant future, meaning a huge improvement in user experience because their browsers won’t need to retrieve images at each visit, meaning faster loading times. 

Upload Using the Right Image Formats 

Different image formats serve entirely different purposes on your site—uploading images using the wrong format is almost guaranteed to worsen the user experience. Neglecting to pay attention to image formats before upload also adds unnecessary bandwidth, which wastes your money. 

The main thing to note is that you should never upload PNGs as photographs. There is typically no perceivable difference in quality between a JPEG photo and a PNG photo, but the latter format tends to result in images with huge file sizes that waste a lot of bandwidth. Only ever use PNGs for logos, charts, or when you need transparency.  

Website loading speed improves when you only choose suitable formats for all uploaded images. Always remember that each image that is larger than necessary increases page loading times. 

Experiment with Image Quality Standards 

While serving crystal clear images to website visitors is important, you should still experiment with uploading images at lower quality levels, especially JPEG images. There is often little visual difference between a JPEG at 95% quality versus 75%, but the former file will always be a lot larger than the latter. 

http://blog.catchpoint.com/wp-content/uploads/2017/11/Screen-Shot-2017-1... 187w" sizes="(max-width: 343px) 100vw, 343px" /> Source: Batch Image

Serving images at too high of a quality level can achieve the opposite effect from what you intend. Instead of improving the user experience, your site slows down because high-quality images reduce bandwidth. A slight reduction in uploaded image quality is often worth the benefit of improved website performance. 

Secure Your PHP Upload Scripts 

Incorporating PHP image upload on your site or application is a useful way to upload lots of images programmatically, but you need to be careful of security threats. Some of the best ways to improve PHP image upload security are: 

  • Only allow extensions jpg, jpeg, gif, and png to be uploaded. 
  • Set a maximum file size for PHP image upload.  
  • Check for uploaded file sizes that are too small because this can also be a sign of a cyber attack.  
  • Use a ready-made secure PHP upload script, such as this one on Github 

Setting a maximum file size also ensures you don’t unintentionally upload any large images that can compromise website performance. For example, a page with an image 25 MB in size would take nearly a minute to download to a user’s phone on a 3G connection (average speed 4.3 Mbps).  

Compress Before Upload 

Several online services, both free and paid, can compress your images before you upload them. Image compression reduces image file sizes, meaning images take less time to load, thus improving your website’s performance.  

Lossless image compression reduces file size without any loss in quality, while lossy compression compromises quality. Choosing the right compression method before uploading means identifying what is more important: a larger reduction in image size and faster site loading speeds from lossy compression, or a slight improvement in website performance with no reduction in image quality from lossless compression.  

Specify Image Dimensions Upon Upload 

Uploading images without specifying their dimensions causes a strain on website performance because your visitors’ web browsers must work to display each page based on unknown image dimensions. Each image download with unknown dimensions adds time to page load speed because the browser must determine how to shape the page around every single image.  

Simply add the dimensions of your images to your image tags upon upload, and you can tell all visiting browsers the exact dimensions, without requiring those browsers to figure out how to display your web pages. The end result of simply telling the browser the size of the images on your site is better website performance. For example: 

<img src=”image.jpg” width=”200” height=”200” /> 

 To conclude, you can better manage your uploaded images when you: 

  1. Use a content delivery network to serve images instead of uploading them to the same server as your site.  
  2. Add fingerprints to image URLs on upload to take advantage of less cautious image caching settings.  
  3. Always upload images with the right format.  
  4. Lower your image quality standards on upload to reduce bandwidth. 
  5. Adequately secure your PHP upload scripts. 

The post Image Upload Best Practices for Improved Site Speed appeared first on Catchpoint's Blog - Web Performance Monitoring.

Read the original blog entry...

More Stories By Mehdi Daoudi

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.

Latest Stories
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
"MobiDev is a software development company and we do complex, custom software development for everybody from entrepreneurs to large enterprises," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Vulnerability management is vital for large companies that need to secure containers across thousands of hosts, but many struggle to understand how exposed they are when they discover a new high security vulnerability. In his session at 21st Cloud Expo, John Morello, CTO of Twistlock, addressed this pressing concern by introducing the concept of the “Vulnerability Risk Tree API,” which brings all the data together in a simple REST endpoint, allowing companies to easily grasp the severity of the ...
Agile has finally jumped the technology shark, expanding outside the software world. Enterprises are now increasingly adopting Agile practices across their organizations in order to successfully navigate the disruptive waters that threaten to drown them. In our quest for establishing change as a core competency in our organizations, this business-centric notion of Agile is an essential component of Agile Digital Transformation. In the years since the publication of the Agile Manifesto, the conn...
In his session at 21st Cloud Expo, James Henry, Co-CEO/CTO of Calgary Scientific Inc., introduced you to the challenges, solutions and benefits of training AI systems to solve visual problems with an emphasis on improving AIs with continuous training in the field. He explored applications in several industries and discussed technologies that allow the deployment of advanced visualization solutions to the cloud.
Enterprises are adopting Kubernetes to accelerate the development and the delivery of cloud-native applications. However, sharing a Kubernetes cluster between members of the same team can be challenging. And, sharing clusters across multiple teams is even harder. Kubernetes offers several constructs to help implement segmentation and isolation. However, these primitives can be complex to understand and apply. As a result, it’s becoming common for enterprises to end up with several clusters. Thi...
"NetApp is known as a data management leader but we do a lot more than just data management on-prem with the data centers of our customers. We're also big in the hybrid cloud," explained Wes Talbert, Principal Architect at NetApp, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, discussed how data centers of the future will be managed, how the p...
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence. In her session at 21st Cloud Expo, Sangeeta Chakraborty, Chief Customer Officer at Ayasdi, provided a tactical framework to become a truly intelligent enterprise, including how to identify the right applications for AI, how to build a Center of Excellence to oper...
"IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection between Coke and its customers. Digital signs pair software with high-resolution displays so that a message can be changed instantly based on what the operator wants to communicate or sell. In their Day 3 Keynote at 21st Cloud Expo, Greg Chambers, Global Group Director, Digital Innovation, Coca-Cola, and Vidya Nagarajan, a Senior Product Manager at Google, discussed how from store operations and ...
"Infoblox does DNS, DHCP and IP address management for not only enterprise networks but cloud networks as well. Customers are looking for a single platform that can extend not only in their private enterprise environment but private cloud, public cloud, tracking all the IP space and everything that is going on in that environment," explained Steve Salo, Principal Systems Engineer at Infoblox, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventio...