Image Optimization

Image Optimization for Websites and Blogs Image Optimization For Websites
6 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€65.44
List Price:  €93.49
You save:  €28.05
£56.04
List Price:  £80.06
You save:  £24.02
CA$95.74
List Price:  CA$136.79
You save:  CA$41.04
A$107.11
List Price:  A$153.03
You save:  A$45.91
S$95.36
List Price:  S$136.24
You save:  S$40.87
HK$547.90
List Price:  HK$782.75
You save:  HK$234.85
CHF 64.03
List Price:  CHF 91.47
You save:  CHF 27.44
NOK kr772.60
List Price:  NOK kr1,103.76
You save:  NOK kr331.16
DKK kr487.88
List Price:  DKK kr697.01
You save:  DKK kr209.12
NZ$117.84
List Price:  NZ$168.36
You save:  NZ$50.51
د.إ257.06
List Price:  د.إ367.25
You save:  د.إ110.18
৳7,700.43
List Price:  ৳11,001.09
You save:  ৳3,300.65
₹5,837.33
List Price:  ₹8,339.41
You save:  ₹2,502.07
RM333.81
List Price:  RM476.90
You save:  RM143.08
₦92,489.99
List Price:  ₦132,134.22
You save:  ₦39,644.23
₨19,474.37
List Price:  ₨27,821.72
You save:  ₨8,347.35
฿2,588.61
List Price:  ฿3,698.17
You save:  ฿1,109.56
₺2,275.23
List Price:  ₺3,250.47
You save:  ₺975.23
B$358.08
List Price:  B$511.57
You save:  B$153.48
R1,312.98
List Price:  R1,875.77
You save:  R562.78
Лв127.91
List Price:  Лв182.73
You save:  Лв54.82
₩96,452.39
List Price:  ₩137,795.03
You save:  ₩41,342.64
₪267.73
List Price:  ₪382.49
You save:  ₪114.75
₱4,034.64
List Price:  ₱5,764.02
You save:  ₱1,729.38
¥11,065.06
List Price:  ¥15,807.91
You save:  ¥4,742.85
MX$1,201.03
List Price:  MX$1,715.83
You save:  MX$514.80
QR255.05
List Price:  QR364.38
You save:  QR109.32
P965.79
List Price:  P1,379.76
You save:  P413.97
KSh9,296.24
List Price:  KSh13,280.92
You save:  KSh3,984.67
E£3,349.82
List Price:  E£4,785.67
You save:  E£1,435.84
ብር3,985.10
List Price:  ብር5,693.24
You save:  ብር1,708.14
Kz58,375.85
List Price:  Kz83,397.65
You save:  Kz25,021.80
CLP$66,375.71
List Price:  CLP$94,826.51
You save:  CLP$28,450.80
CN¥507.11
List Price:  CN¥724.48
You save:  CN¥217.36
RD$4,113.13
List Price:  RD$5,876.15
You save:  RD$1,763.02
DA9,392.53
List Price:  DA13,418.47
You save:  DA4,025.94
FJ$158.35
List Price:  FJ$226.22
You save:  FJ$67.87
Q544.06
List Price:  Q777.27
You save:  Q233.20
GY$14,678.83
List Price:  GY$20,970.66
You save:  GY$6,291.82
ISK kr9,837.79
List Price:  ISK kr14,054.59
You save:  ISK kr4,216.80
DH708.72
List Price:  DH1,012.51
You save:  DH303.78
L1,246.75
List Price:  L1,781.16
You save:  L534.40
ден4,025.16
List Price:  ден5,750.48
You save:  ден1,725.31
MOP$565.76
List Price:  MOP$808.27
You save:  MOP$242.50
N$1,340.22
List Price:  N$1,914.68
You save:  N$574.46
C$2,582.07
List Price:  C$3,688.83
You save:  C$1,106.76
रु9,353.99
List Price:  रु13,363.42
You save:  रु4,009.42
S/263.57
List Price:  S/376.55
You save:  S/112.97
K270.82
List Price:  K386.91
You save:  K116.08
SAR262.50
List Price:  SAR375.01
You save:  SAR112.51
ZK1,859.31
List Price:  ZK2,656.27
You save:  ZK796.96
L325.94
List Price:  L465.65
You save:  L139.71
Kč1,644.39
List Price:  Kč2,349.23
You save:  Kč704.84
Ft25,720.62
List Price:  Ft36,745.32
You save:  Ft11,024.70
SEK kr762.14
List Price:  SEK kr1,088.81
You save:  SEK kr326.67
ARS$61,174.36
List Price:  ARS$87,395.69
You save:  ARS$26,221.33
Bs486.59
List Price:  Bs695.16
You save:  Bs208.56
COP$277,528.94
List Price:  COP$396,486.91
You save:  COP$118,957.97
₡35,172.98
List Price:  ₡50,249.28
You save:  ₡15,076.29
L1,732.56
List Price:  L2,475.19
You save:  L742.63
₲520,857.74
List Price:  ₲744,114.38
You save:  ₲223,256.64
$U2,703.34
List Price:  $U3,862.08
You save:  $U1,158.74
zł282.38
List Price:  zł403.41
You save:  zł121.03
Already have an account? Log In

Transcript

Now, I'll show you inside Photoshop. What I mean, in the real template. I will not go into details about websites because each and every website and each and every content management system has its own quirks and features. So WordPress, for example, would will be different than Shopify, Shopify would be different than Magento, and so on, and so on. So I'll just show you inside of the Photoshop template. But mechanics are exactly the same, it will work exactly the same on any platform you're using.

But it's not fair for me to show you inside of the WordPress if you're using a Magento, and so on. So just imagine you have this hero image right here. So if I zoom in on it, you can see how it looks like what it does. So it's basically a top image. So you can imagine this image being used inside of the blog posts. So in this particular case, It's for the fashion industry, but it really doesn't need to be it can be for any niche.

So you want to replace this image, just imagine in your head that you are uploading it through your CMS. So if I open it up here is how the image looks like. And if I go right here to image size, it's showing me that its width is 1920 pixels and height 932. So, just imagine these are the dimensions that the content management system is allow me to upload. So basically, the template for the content management system is using these dimensions. So if the width is 1920 pixels, there is really no point of using image which is like 8000 pixels wide and so on, and if the height is 92, it really is there is no point of using image Let's say 10,000 pixels high, because it just needs to over sample it, the image won't fit properly, and so on.

And like we mentioned in the previous video, a lot of times bounce rate, angry customers and so on. So let me just show you what I mean. So for example, this image if I hover over it, as you can see, it's 5008 pixels wide, and 3339 tall, and like we said, in this example, it's 1920 by 932. And right here, it's 5008 3339. So that in terms if I go okay, right here, and just drag and drop this image right here, it will fit because this is a Photoshop, it's a smart object and so on. But if I scale it, you can see how much bigger this It really is.

So it's four times bigger in weight, and around three times bigger in height. So all of these lines that you see are the outside lines of the image. So if I upload it, it will look like this approximately, and then your content management system has to scale them down in order to fit properly, so that in terms you will lose the quality of the image. And when it uploads, you will just waste your time because the image is too large, and so on and so on. Like we talked in a previous video. So what you can do is use a tool like this, it can be Photoshop, it can be some online replacements which are free, like Canva and so on, depending on what you're using.

But let's face it, Photoshop is the king in this industry, and it has been For years, so it's really the best tool for image optimization in my opinion. So what you can do from here is go right here to the File, Save As, and then choose your desired format. jpg in this example, and click Save. Now this dialog will pop up. As you can see right here, if you're using Photoshop, and you're using this method, image optimization and quality are set to maximum in this case, and we have a 1.2 megabytes file size. So we optimized it down, and it's now 1.2 megabytes.

But in the next video, I'll show you how you can optimize that even further. But right now, I just want to quickly mention if you're using a professional photograph, and you're using a professional camera, or you're simply using a phantom photographer for your business. And for example, you have some products that you are displaying on your website or blog. Keep in mind these tips and say to that photographer to optimize your images before he send them to you. So learn all of these sizes. If you're using a developer, as a developer, they will say to you, okay, here is the cheat sheet here is the size guide, then you can send that size guide to your photographer.

They know this stuff, so they will optimize your images before upload. That way you can streamline this process even further because you are not the one who will be doing all of this. They will be doing it. So if you don't have a developer and you're doing your photography all by yourself, just go inside of the readme file or just Development docs for your content management system. If you're using WordPress, you will be likely using a team. Just go inside of the team and learn what are the sizes for that template that you're using.

So you will be prepared in advance to use those sizes instead of the regular sizes your camera just pops out when it shoots those images. So you can optimize this process before uploading the images and not after you upload them. So from here, simply click OK. Save your image and that's it. I will come to this image in the next video and I will show you a free tool that you can use for Windows and another free tool for Mac to further optimize these images before posting

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.