The quick response is:
- Watch this video if you’re unsure what the distinctions between JPG and PNG are.
- The image file shouldn’t be more extensive than 500kB. Keep the image’s width to no more than 2000 pixels.
Update file names, manually insert alt text for SEO purposes, or use Crush Pics to automate both tasks.
I verify the photos before performing any speed or SEO optimization for a Shopify development services sydney site. Additionally, I frequently discover one or two homepage photos that are too large and lack essential SEO elements like alt text.
Although numerous variables affect page load time and SEO, updating images is the simplest thing to accomplish.
I’ll outline the procedures you must follow between receiving the shot from your camera (our photographer) and posting it to Shopify development services.
I’ll also demonstrate how to use the Crush Pics tool to mass optimize the images currently in Shopify development services.
What should the size of your image files be? [If in KB or MB]
For huge photos that fill the entire page, you should aim for roughly 400kB, and for smaller ones that don’t, you should strive for considerably less.
JPG photos typically shouldn’t weigh more than one megabyte. You must compress them if they do weigh more. Additionally, the image’s size is likely too huge (more on that below).
Regarding PNG, if you’re using it for what it was designed for (see the section below on JPG vs. PNG), then it will have a modest file size, typically under 100kB for things like logos.
In this situation, PNG is required, and the file size will probably exceed one megabyte.
Recognize that with this style of design, aesthetics are sacrificed in favor of loading speed. These photos can still be compressed, though.
Let’s get going.
Use the appropriate image format and size (JPG vs. PNG in Step 1)
JPEG or PNG? Do you know the distinctions between them and when to use each?
If not, I urge you to view my film on this subject.
For pictures, use JPG.
Use PNG for computer visuals such as logos, icons, or text.
Use PNG if you want a transparent picture (the backdrop isn’t there) because transparency is not a feature of JPG.
The drawback of utilizing PNG for photographs is the resulting file size. So be aware that you are sacrificing speed for aesthetics when you use this type of website design (with product photos on a translucent background).
The most frequent error I observe on numerous Shopify websites is saving images as PNG when they don’t require transparency.
When they should have been saved as JPGs, where they would weigh just about 300kB, each photo weighed at least 2MB.
Size of the image (Pixels)
On your Shopify development services , photos come in two basic categories:
pictures of goods
- pictures included with the theme editor (for the home page, static pages, promo sections, etc..)
Due to an “image scaling” feature implemented by Shopify development Sydney, you can submit huge images. Here, it can determine the size of the image that your consumer requires.
Therefore, the full-size image you submit will exist on the Shopify development services Sydney server, and anyone visiting your store will immediately load a smaller image. Consequently, your buyer won’t need to download a large one.
Compressing your images is step two.
While this step is the simplest, doing it manually will take the longest. I will now describe both the manual and quicker methods.
Option 1: Use Squoosh or TinyPNG to compress your images manually
These two tools let you compress your photographs for free. You can then download the compressed version after you drag them in.
I favor Squoosh for the following factors:
You can select the compression level using the slider that is provided.
You can see a before and after view to see how the compressed image will appear. Doing this allows me to compress an image more tightly before the quality starts to suffer.
On the default level (75), I discovered that the compression produces a reduced file size than TinyPNG.
The benefit of TinyPNG is that you may drag in many images at once (up to 20 images on the free plan). However, Squoosh requires that you drag in each image individually. You can disregard the name, by the way; TinyPNG supports both PNG and JPG images.
Your photos can be uploaded to your Shopify development services after being compressed.
Option 2: Crush Pictures’ bulk compression for Shopify development Sydney
You would have to go into each product, delete the old images, and upload the new ones if you manually compressed all of your photographs. This will take a while if you have a big store with hundreds of items.
Fortunately, an app called Crush Pics allows you to automate this procedure. Similar to TinyPNG or Squoosh in operation, it is a Shopify development services App.
Additionally, you may select the photographs that will be compressed and the degree of compression.
Step 3: Shopify development services’ Sydney image SEO
The two major strategies for picture SEO can be carried out manually or automatically using the Shopify development services app.
