Images are an integral component in creating a well-designed website. Gorgeous imagery is an easy way to really spice up your website and make something ordinary look incredible. They're also essential if you're planning on selling products online. You could have the best product in the market, but without proper imagery, your sales will suffer.
Weebly also tends to be fairly picky with which images it accepts, and might slow down if you attempt to upload dozens of massive images.
But don't worry--in this blog post, we'll break down which image sizes you should be using.
Not Too Big, Not Too Small
There's a bit of a 'Goldilocks' zone when it comes to uploading images. You see, you want the images to be high resolution and large enough to have good quality. Few things are worse than a website with blurry, low-res images. But at the same time, if your images are too large, your loading speeds will suffer immensely.
If you want numbers, here they are: for the header sections of websites, we recommend uploading images that are at least 1920 x 1080 but preferably greater. The background images in the header sections of websites are extremely important because often times its the first impression that your viewer experiences. And as we've all been told, first impressions matter most. This is especially true with web design.
That being said, while we urge you to use high resolution non-blurry images for your header section, make sure you keep the file size below 2MB. This ensures quick loading times, particularly for mobile users.
So we got header images out of the way. What about images in the body of your site? For these, we recommend using image resolutions of at least 1500 x 500 (depending on what you want to do with them), but you'll want to keep them below 1.5MB in size each.
You should also analyze the number of images you're planning on uploading on your site. If you're uploading a few pictures here and there, you can upload some fairly large ones, perhaps 2MB or so. BUT if you've got something of an image portfolio situation going on (or a site that just simply has lots and lots of pictures, such as a real estate site), you'll want to ensure that while your images are high quality, they don't exceed 1MB each. About usmarine ebooks for free.
Remember--image sizes are cumulative. You can have a website with 10 0.5MB images per page, which ends up being 5MB of images per page. That's about average. However--if you have 100 images that are 0.5MB each, that's 50MB of images being loaded up on your site, and it'll make your loading speeds suffer considerably.
If you have a lot of images you'd like to use, and you want to use the highest definition possible, we recommend splitting up these images across multiple webpages so that the user's device doesn't have to load everything at once.
READ: How to Make Serious Money Creating Websites in Weebly
I Have High Resolution Images But Their File Sizes are Too Large. What Do I Do?
Here's a dilemma! Let's say you've got images that are gorgeous, colorful and stunning. BUT they're h u g e. We're talking 5MB per image or more. What do you do?
You've got two options: resize or compress. Resizing is what it sounds like--you resize the image. So if you have an image that's 6000 x 6000, you can resize it to something more manageable like 2000 x 2000. File size will drop considerably without affecting image quality.
How To Resize Slideshow In Weebly
But what if you have a large image that is already a moderate resolution like 2000x2000? Resizing it to a smaller resolution will be detrimental to the image quality, especially nowadays with our 4K smartphone screens and computer monitors. A smaller resolution will look blurry. What do you do?
It's simple--compress them. Compressing an image will make the file size much smaller, without affecting the resolution. The quality of the image may deteriorate a little bit, but nothing too significant unless you go nuts on the compression.
How Do I Resize or Compress Images?
There are actually a lot of easy to use online tools that let you do exactly that! One of our favorites is PicResize. PicResize lets you resize and compress images for free online, and it's super quick to use. In fact, we use it ourselves!
More Advantages of Image Optimization
Image optimization is the act of optimizing your images in any way, shape, or form. You see, most Weebly users just upload images without thinking about size or loading speeds. Unfortunately, their websites end up being slow and sluggish (not to mention a pain to edit!).
How To Resize Slideshow In Weebly
That's why we recommend optimizing your images by compressing or resizing them if their file sizes are too large. Not only will your users enjoy faster loading speeds, but your SEO (Search Engine Optimization) will see a big boost as well! You'll enjoy higher rankings in Google, along with a much happier visitor base. Oh, and editing your site in Weebly will be a lot easier as well!
Weebly is a drag-and-drop solution for building your website. To get to Weebly:
How To Resize Slideshow In Weebly
- Log in to your Bluehost cPanel account.
- Scroll down to the Website section.
- Within this section, find Weebly. Choose a package, select the domain you want to use, and click login to get started.
- Log in to your Bluehost account.
- Click on the Marketplace tab from the side navigation tab to the left.
- Choose Addons from the sub-menu.
- Within this section, scroll down, find the Weebly option. Select the domain you want to use, and click Use Weebly to get started.
For more Weebly resources, please also see the Weebly help pages.
- Custom headers and page sections — Choose between six different header types and control each one by adding images, logos, slideshows, menus, buttons, etc. Customize your page by including a site menu, social icons, contact form, logo, and more! Every custom section you drag onto the page works like its own mini-site and can contain multiple design elements like color, backgrounds, text, images, and video.
- Commerce system — Sell your products online and provide a consistent shopping experience across all devices. Select sophisticated storefront themes and choose from a variety of payment options including Stripe, PayPal, and more. New product and category elements provide you with the flexibility of designing and laying out your online store. You will have full control of the entire process from product creation, to shipping configuration, payment processing, and order management.
- Store Design Elements — Easily drag and drop products or categories anywhere on your site to create beautiful stores, and drive sales.
- Bulk Importing and Exporting — Quickly make bulk edits to your products, import and export batches of information, and implement key SEO terms to get found online.
- Tax Setup — Save time with one-click tax rates for the entire US, guidance for international rates plus easily set by region, price, or manually.
- Shipping Management — Save time by using our shipping management tools, which enables you to easily configure shipping rates based on quantity, setting a flat rate per item or order, and offering free shipping based on order price or weight.
- Optimized One-Page Checkout — Get your customers through the checkout flow easier than ever with a simplified one-page purchase process.
- Membership system — Build a membership-based website that allows users to log in to access special content. Add members, build groups, and manage access all from the admin area. Further, you can add a “Register” button to the site allowing visitors to sign up to become members. The options will then be available to manually review each case for approval, simply automatically approve everyone, or even upload a CSV file with all the data for your member database.
- Blog system — Create blog posts with all of the same tools you have in the main editor. Other blog features such as archives, categories, RSS feed, comments, and more are at your fingertips. You can even schedule your posts to publish at a future date.
- Fully responsive themes — Create and manage a website that works everywhere for everyone. All Weebly themes have been optimized to automatically resize so they look great on any device your visitors use to access your site.
- Spacer element — Add blank space anywhere on the page with a new “spacer” element.
- No “text + image” element — Add an image to text by simply dragging and image into a text box.
- Page management in the sidebar — Pages are now created and managed via the sidebar interface that won’t hide the page you are currently editing. Moving between pages, editing, and setting up the framework of your site is now done effortlessly.
- Image editor — New image editor includes features such as image cropping, filters, focus, and other adjustments like brightness and saturation. It is HTML-5 based and a huge update from the previous flash-based editor.
- Page type icons — After selecting which type of page you’ll be adding to your site, you can select an icon that best represents how you would like that particular page to be laid out. This icon will always show in the “pages” tab for reference.
- Open access to the HTML/CSS editor across all plans — For those comfortable with HTML/CSS code, this feature allows you to modify the source code of your site. Another way of doing this is to use the element called “embed code” where you can actually copy/paste any kind of 3rd party tool or custom code into a specific page on your site. This includes Youtube videos, opt-in forms, etc.
- Element options user interface — All drag and drop elements have an updated option interface making setting element options much easier. Adjust spacing, add borders, link, align, caption, and more!
- Theme options — Additional customization options to many of the new responsive themes. Examples include navigation placement, header overlay settings, page width, etc.
- Theme gallery — An updated theme gallery user interface makes it easier to find and preview themes, view recently used themes, and manage custom themes.
- Custom color palettes — Color palettes allow you to choose both a primary and accent color to better personalize and brand your site. If you want, you can create default palettes that have primary and accent colors already defined. You then get to decide where those colors are used throughout the page.
- Video Backgrounds — Impress your visitors with high-quality video backgrounds. Choose from Weebly’s free video library or upload your own unique video to make header images and sections pop.