Image quality and size

We have all experienced a site where the images take what seems like forever and a day to download. It’s frustrating and can lead to the user leaving the site. Large images take longer to download and by large I am not referring to the dimensions but rather the file size. It is important to make sure that the images loading on the site are small enough in size to download quickly as the site loads.

“47% of consumers expect a web page
to load in 2 seconds or less.”

 

Images have a way of bringing a user into the story you are telling, or selling a product the user wants. Crisp, high resolution images are a must to give the user a sense of texture and color. But you need to keep in mind the file size when saving your images, as well as, maintaining high image quality.

JPGs are the most common file type for images on the web. JPGs will maintain the colors, shadows and gradients of photos, because they have a large color palette to work with. JPGs can also be saved in several ranges of quality, allowing you to adjust these settings before saving. You are able to balance quality and file size to get exactly what you need.

Three things to reduce the file size of an image

  • Reduce Image Size: Image dimensions
  • Save Image for Web to Reduce File Size: File size
  • Compress Image: Eliminate additional metadata

Screen Shot 2019-02-16 at 10.02.21 PM.png

Using Photoshop, save your image by exporting and saving for web – File > Export > Save for Web (Legacy). Next you will be able to adjust the quality. Usually a quality setting between 60-75% will work best in file size with no noticeable difference in the quality of the saved image. It will sometimes require a little playing around to find the perfect quality to use. For further compression, an easy way to reduce the file size an additional 5-10% is with image compression apps. I use ImageOptim which is a tool that will remove hidden data in the image file. This type of app can remove additional color profiles and metadata that aren’t needed. It’s a quick and easy way to reduce the file size without losing the image quality.

Ready to get optimized?

Images on the web are more than just a picture. They give the user a visual into a story or an image of a product they are looking to purchase. Images are so important to the success of a site. But it’s important to find a balance in image quality and image file size so that your site doesn’t take a long time to load. If users start dropping from your site, this may affect your SEO.

To get started I chose one of Professor Akselsen images that were shared with us. To optimize this image, I started with the high-resolution photo and brought it into Photoshop. The original file was 900 x 1200 and 987KB.

Once in Photoshop, I exported the image, File/Export/Save for Web (Legacy) and put my quality at 75%. When I saved the image, it brought my file size down to 442KB.

Screen Shot 2019-02-13 at 8.11.30 PM

I then brought my JPG into ImageOptim which was recommended in this week’s module. ImageOptim removes bloated metadata to make images load faster. Additionally it saves disk space and bandwidth by compressing images without losing quality. This brought my image size down to 418KB. It’s amazing how the image was cut down more than half in file size but was I able to keep the quality.

Screen Shot 2019-02-13 at 8.11.30 PM

If you still need the image to go down in file size, you can choose to resize the image in Photoshop as well as try decreasing the quality when exporting the image.

Helpful tip:
Always remember to keep the original in case you start to lose the image quality you can always start over and play around with the quality or size.

 

Uploading to your website

To create a website, you need to upload your files to your web server using an FTP (File Transfer Protocol). The FTP will transfer your files immediately to view on your site. There are several FTP clients to use such as Fetch or Filezilla. With FTP clients such as these you are able to drag and drop files from your hard drive to the hosting server location.​

What you need

To get started in uploading your files you will need the following information from your web host to get access to your site.

    1. Your username
    2. Password
    3. The hostname or URL where you should upload files
    4. Your URL or web address

Ready, set, go…

Next you will open the FTP client that you have downloaded to work with and following the instructions supplied by your FTP client.

  • Put in your hostname or the URL where you should upload your files.
  • You should be prompted for a user name and password. Enter them in the space provided.
  • Select the correct directory for your hosting provider.
  • Select the file or files you want to load onto your website, and drag them to your FTP client.
  • Visit your website to make sure all of your files have uploaded correctly.

Tip: If your web host tells you that you do not have FTP access, you will have to use their FTP site to upload your files. Remember to check your website to ensure your files have uploaded correctly.

 

Designing with Responsive Web Design in mind

target.jpg

Responsive Web Design (RWD) is now the web design standard best practice. It uses flexible layouts, images and CSS (Cascading style sheets) to design web pages that detect the user’s screen size and page orientation. Responsive design makes sure that the design works on all devices which utilize various screen sizes such as: mobile, iPad or desktop. What The Heck Is Responsive Web Design?

When the iPhone was introduced, developers were tasked to build separate sites to accommodate whether a user was on a desktop or mobile device. This caused a lot of additional costs and frustrations. Web designer Ethan Marcotte developed “Responsive Web Design”, publishing an article in 2010 that discussed the ever-changing world of web design. Responsive Web Design Marcotte explained that building separate sites for every device would not be sustainable in the fast-changing environment of web development. He came up with a new concept called it responsive design which calls for flexible and fluid layouts that adapt to any screen size.

Getting started

Choosing to design with responsive web design methodology is essential, so that your site will be presented properly on any device. Responsive design will give the user a seamless experienced as well as increase how your site will rate in SEO algorithms and be visible in search results. Is Responsive Design A Ranking Factor?

Whether you are the designer or looking to use a template to create your site, basic understanding of how a site will be built is important. A successful site is the marriage of both design and code, each depending on one another to create a seamless experience. While designing, you have to envision each user experience and how your design/content will be displayed. If you chose to create your site with a template, many hosting sites contain templates which are responsive and easy to use. These pre-programmed templates will help save time and money as you develop your design.

Helpful tip:
Remember, as you put your content together, keep previewing your site. It is important to see your site in the different screen environments to make sure the user experience flows well between each screen size. 

We are in this together

Designers, coders and savvy internet users will all benefit from the basic understanding of how each phase works together. Both design and code need to build upon each other in order to have a final product that will create a beautifully built user experience. In this new responsive design environment, all hands need to understand each stage of a site’s growth. Together we will create a beautiful internet experience. Designing for a Responsive Web

Module 2: Amour De Visage Wire Frames

The home page for Amour De Visage has the navigation up top with an image above the fold to entice the user. Below the image is an area to talk about highlights such as specials, events or amazing services performed.

The services page breaks down to Facials, Waxing, Make-up and Add-ons. Each page will show the name of the service, price and description.

home_services

The gallery page has two drop downs which can be for spa treatments and make-up photos. Each page will show 6 images with the possibility to add content under each picture.

The scheduling page will give information for call/text to arrange an appointment as well as scheduling online. They will click on a date which would open the contact page, pre-filling the requested date that they have clicked on.

gallery_scheduling

The product page will link to an external page within the frame with the products that Amour De Visage uses in their services.

The reviews page will load with client reviews showing the excellent services that Amour De Visage provides.

product_reviews

The contact page will give information on the location and phone number for Amour De Visage as well as a way to send an email directly from the site.

contact

Establishing an online presence

img_0394-e1548552482749.jpg

Whether you are getting ready to set up a site for business or personal use, it is important to have a strategy in place. This site will represent who you are and be the hub for your users. The most important step in a successful site is setting it up correctly, which includes having a business plan and identifying who is your target market. 5 Mistakes People Make When Setting Up Their Website

Knowing who your users are will help you market towards them to increase traffic. If you are selling a product or service you will need to set up an e-commerce site for paying and shipping information. If you are setting up a personal site you will need to decide what features you require such as: photo galleries, video storage, and the ability to interact with your users.

Setting up a domain and host

A domain name is a personalized name that you give your website, it in turn points to a unique IP address. Your users will only see your site by the domain name that you have registered. Whether the site is for personal or business use, a website should have a unique domain name. Your domain name will make it easier for users to remember your site and gives your site credibility. Set Up Your Own Domain Name

  1. Set up your domain name through a domain register like domain.com. You will be able to search if the name you have in mind is available for registering.
  2. Choose a company to host your domain. This is who will keep your site up and running.
  3. Buy/register your domain name, which you can do easily through your host company. Or you can give your host company your new domain to begin the transfer.
  4. Build your website! You can choose a website builder through your host or use another website design program.

Helpful tips:

  • Many host companies will include free domain registration when you sign up with a hosting service.
  • Be careful when choosing a hosting plan, many companies will put ads on your site as part of their hosting agreement.

What is a CMS?

A CMS is the content managing system used to publish content (copy and images) to your site. Once you have made a change to the CMS and press publish, the change will be live on your site. How Does a CMS Work?

You can work within the CMS and preview your content before publishing, in order to make sure it is displayed correctly. It is a user-friendly way to make edits, add additional content and manage how you want your content to appear. You can also link to social media, and add contact information. Many hosting sites have a CMS that you can work with easily work with to build your site. You will be able to manipulate templates and design styles without needing to know how to code.

 

Customization

img_0391-e1548553095741.jpg

Starting to customize my blog to bring some personality into it with just a few minor changes. I changed the template, color palette, bolded the headings and adjusted the background color. I also added a border in black around the image and a line to break the image and content.

Before:

Screen Shot 2019-01-25 at 11.40.34 AM.png

After:

screen shot 2019-01-25 at 10.31.46 pm

QUINNIPIAC UNIVERSITY GRADUATE BLOG