Spend the reading speed of the site! We recommend using SVG for EC sites.

I would like to recommend it today for EC sites, especially those who operate EC sites in the United States,svgI'm going to talk about that.

Why want to incorporate SVG into EC sites

It may seem natural, but the United States, the environment of people living in a huge amount of in the United States compared to Japan, the Wifi environment is not always wonderful.

In particular, online stores with many image data tend to be heavy. Slow loading on the site will increase the chance that customers who have come to you will leave.

So, I want to incorporate SVG. By creating a logo or icon with SVG, you can lighten the site a little and speed up the reading speed. You can enjoy shopping at the online store, reducing the possibility of stressing the audience.

What is SVG in the first place?

JPEG / PNG / SVG difference

The difference between images and SVG often found on websites such as JPEG and PNG isJPEG and PNG are "bitmap data". On the other hand, SVG is "vector data"That is the point.

Bitmap data draws images by arranging pixels vertically and horizontally like a go board. For example, images of complex expressions such as photos and gradations apply to bitmap data. Of course, icons and letters can also be expressed in bitmap data, but there is a disadvantage that enlarging and reducing the image quality will deteriorate and the file size will increase.

On the other hand, SVG is "a method that reproduces the image by calculation based on numerical data such as a line (vector, vector) connecting the coordinates of the point."
In other words, a format in which the position of multiple points and the line, curves, colors, etc. connecting them are remembered as numerical data.Since it is managed by numerical values, the amount of data is small, and the image does not deteriorate even if it is expanded.

For example, the icon image of this Pizza is 14KB for JPEG, but 8KB for SVG. There is quite a difference.

againEven on the EC site that supports responsive, the appearance of the image does not change on the smartphone / PC device, and it can be displayed neatly on any device.

Please note that SVG is a vector data, so you can not describe complex images (bitmap data) such as photos and gradations.

It is an extension that can draw vector data such as logo and icons in lightweight.

The point is that the SVG file can be edited with a text editor! It is convenient because CSS can change the color and size freely later.

On the actual website, for each format,

Photo ・ ・ ・ ・ JPEG / PNG
Logo and icons ... SVG

Such a segregation is recommended!

Easy to use icon fonts using iComoon!

When you actually want to use an icon in SVG format, the icon font generator is recommended.It is to make the SVG format icon created in Illustlator can be handled as fonts.

You can easily change the icon, change the color just by changing the color code, and change the font size by changing the font size simply by changing the color code!

The famous icon font generator has this.

◆ Fontastic

◆ Fontello

◆Glyphter

◆ICOMOON

There is an icon font generator that is famous for this, but today I will pick up how ICOMOON is used.

In iComoon, you can upload icon data to create your own original Web fonts, but in addition to that, there are many icon fonts that can be used for free. Even if you don't have a dedicated creation software, you can use the icon drawn with SVG.

Let's actually look at how to download.
This time, I will use a free web icon.

1. First, click the ICOMOON App at the top right.

2. Next, click the Add ICons from Libarry ... at the lower left.

3. Then, many icons will be displayed like this.

4. Select the icon you want to use and click "Generate Font" at the bottom right of the page.

5. Click download at the bottom right of the page to complete the save!

All you have to do is put the font file stored on your desktop on your server ...

Change the size like this,

You can also change the color.

The reason for iCOMOON is that the default, free, fashionable and cute icon fonts are all -you -can -use, for example, for the first time, I don't want to spend too much money, but I want to make the display fast and clean! I think it is perfect for those who say.

Most of the reasons why the page read speed is slow is the cause of the large amount of data images.

By making logo marks and icons into SVG, you can make the page a little lighter and speed up the loading speed, so please try it.

---

SHOPIFY EXPERT's Go Ride is producing and operating e -commerce sites at Shopify.
Please feel free to contact us.

For inquiriesHerefrom