시간과 공간 그리고 진실의 방

Divi theme available optimized plugin.

Having compelling content is often not enough. Every visitor uses different criteria to judge whether your site is worth their time, but few issues can sink you as quickly as slow load times.

There are a lot of factors which can impact your loading times, and using high-resolution images is one of them. Their file size can be incredibly large. Most of us have experienced what it’s like to navigate through a website full of images that take forever to load – an experience made even more frustrating if you’ve been using the internet long enough to remember when speeds weren’t quite so snappy.

These days, the average fixed internet connection can easily handle high-resolution images, but smartphone usage continues to grow, and mobile connections aren’t nearly as reliable. With that in mind, let’s take a look at six WordPress image optimization plugins that can ensure your site is quick to load!

SUBSCRIBE TO OUR YOUTUBE CHANNEL

1. EWWW Image Optimizer

After installing and setting up EWWW Image Optimizer, it’ll automatically optimize any images you upload to your blog as long as they’re either JPG, PNG, or GIF files. It also includes a function to optimize your entire media catalog, in case you already have lots of images on your site.

One of the advantages of EWWW Image Optimizer is that the optimization process takes place within your own servers by default, instead of connecting to a third party service. This means your optimization tasks will require less time, which can come in handy when tackling large media libraries, since regular-sized files (<1mb) should ideally load in a few seconds.

This local optimization process is made possible by including several pre-compiled binaries, which must be installed from your local WordPress folder. This means some users may run into difficulties completing the setup process if they don’t have permission to execute the files.

To combat this potential issue, EWWW Image Optimizer also offers a cloud optimization feature, which while taking a bit longer to perform its duties, enables you to bypass this setup process. It’s also worth noting that while the plugin uses lossless optimization methods by default, it also enables you to apply lossy reductions for even bigger reductions in file size.

2. WP Smush

WP Smush is WPMU DEV’s image optimization plugin, available in both free and premium formats. As is common with this sort of plugin, any images you upload to your WordPress site will be automatically optimized (or smushed, as the plugin developers like to call it).

The plugin also packs a bulk optimization option, which as its name implies, enables you to tackle multiple tasks at once – perfect if you’re looking to compress your image archive wafter installing the plugin. This bulk option is limited to 50 files at a time in the free version of the plugin.

You can also optimize images individually by heading over to your Media Library, clicking on whichever file you want to compress, and clicking on the Smush option on the Attachment Details window. This option can come in handy if for some reason you’d prefer not to use the bulk optimization option and have only a few images you’d like to compress.

By default, WP Smush uses lossless optimization techniques, but its pro version includes a Super-Smush option which optimizes each image multiple times using lossy compression techniques. This method can allegedly cut filesizes almost by half with a minimal loss of quality, but for the purposes of our article, we’re going to be sticking with the free version of the plugin.

3. ShortPixel Image Optimizer

ShortPixel not only scores well when it comes to compression, it also packs a nice interface. After installing and activating the plugin, every JPG, PNG, and GIF you upload will be automatically optimized, and this plugin doesn’t enable you to turn off this option at all, as most others do.

A bulk optimization tool is included, and individual images can be compressed by opening your Media Library in the List View format, where each file will appear with an individual Optimize Now button alongside it.

ShortPixel enables you to choose between lossy and lossless compression methods, using the former by default. It optimizes all of the image thumbnails created by WordPress during the upload process, is capable of removing EXIF data (or preserve it you prefer), can establish a maximum resolution for your images, and best of all, it automatically saves a backup of every image you upload to a new folder.

In order to set up the ShortPixel plugin, you’ll be prompted to enter an API key during the activation process, which is provided for free by signing up with your email to their subscription list and doesn’t require any additional information. A free signup entitles you to 100 image compressions per month, and credits for additional tasks can be purchased separately or earned by referring new users to the service.

4. TinyPNG Compress JPG & PNG Images

TinyPNG Compress JPG & PNG Images is rather more drastic than the other plugins we’ve mentioned on this list when it comes to image optimization. It employs only lossy compression methods, which make for a drastic reduction in file sizes while mostly preserving the quality of the images undergoing the procedure.

The plugin doesn’t offer many configuration options in its settings page, since you can’t modify the compression methods it uses. However, you can choose maximum resolutions for your uploaded images, pick exactly which sizes you want to compress (i.e. thumbnail, medium, etc.), and whether or not to preserve the copyright information of each file if available.

Despite these limitations, TinyPNG images performs very well when it comes to the optimization process, and our tests didn’t show any obvious reduction in quality of the images after they were processed.

5. Optimus

While Optimus performs admirably when it comes to the actual optimization process, the free version of this plugin includes a rather stifling 100kb file size cap on the images you can process, which essentially renders it a glorified demo. Generally, you’re trying to get to 100kb, not size it down even further. It works really well and is simple, but it’s basically a premium plugin.

That being said, Optimus has a simple settings menu, which makes it a good choice if you’re looking for sheer performance and are not interested in fine-tuning the details of the optimization process.

By default, Optimus will (pardon the pun) optimize images as they’re uploaded, but it won’t show the compression details on the Attachment Details window of each file, or in the menu, so you’ll have to manually compare file sizes in order to notice any difference.

This plugin won’t only optimize the files you upload, but also the multiple sized images that WordPress automatically creates for these media files (i.e. thumbnail, small, medium, and large).

6. Imagify

Imagify is a newer go-to in the image optimization plugin scene, but it’s made a name for itself because of how useful and simple the whole process is, as well as how many options you get from a free plugin.

You can choose from three different settings for the optimization — Normal, Aggressive, and Ultra. Generally, Aggressive is a good spot where you can keep file size down without a noticeable dip in visual quality. As you move into Ultra compression, there may be blurring, slight pixelization, color ratio loss, and minor artifacts in the images. However, that lossy compression is incredibly effective at reducing file size.

You just sign up, grab an API key from them, and move through your files. You can individually optimize your library image by image, run a bulk optimization, and any images that you upload will be run through whatever default process you set up. In general, Imagify has looked at other plugins on the market and implemented the lessons they’ve learned very well.

Let’s Put Them to the Test

So far we’ve covered each plugin’s individual features, as well as their pros and cons. Now it’s time to see how they actually fare against each other when it comes to their intended purpose: image optimization. We’ve split the actual testing between JPG and PNG files since they’re the most commonly used types of graphic files on most websites, and chosen a single image with an average file size for each.

To get the best possible results, we’ve chosen lossy image optimization when possible, but that proved impossible with WP Smush and Optimus, due to a lack of alternatives. Despite the disparity in the results obtained from these particular plugins, we decided it would be best to include them alongside the rest for the sake of completion, since they remain some of the most popular image optimization tools available for WordPress.

We’d like to remind everyone that these results are far from exhaustive. Your mileage may vary depending on which particular image you choose to optimize, and these findings should be viewed only as an example of how each plugin performs individually.

JPG Optimization

PluginOriginal File SizeOptimized File SizeOptimization %Compression Method

As we can see, the plugins which applied a lossy optimization method obtained roughly similar scores across the board. Due to its slight edge when it comes to the compression percentage (plus all of its additional features), we’re going to recommend you go with TinyPNG if you use mostly JPG files on your site.

EWWW comes rather close as well. However, remember that it has a slightly more complicated setup than some others.

PNG Optimization

PluginOriginal FilesizeOptimized FilesizeOptimization %Compression Method

In this round, ShortPixel Image Optimizer took the lead with a slight advantage over the winners of the last section – once again with no noticeable reduction in the quality of the optimized images.

ShortPixel was one of our favorite plugins to use during the testing phase of this list due to its intuitive settings menu, which included solid descriptions for each feature. Its only downside is that it limits you to a maximum of 100 images per month and you’re required to purchase credits for any additional optimization tasks – same as the runner up, TinyPNG Compress JPG & PNG Images.

Conclusion

While optimizing your images won’t make your site magically load in milliseconds, it’s one of those things that show you take every detail into consideration. Even if the resources you save aren’t substantial to you as far as bandwidth goes (and let’s face it, bandwidth is pretty cheap), visitors with slow connections will definitely be thankful for it.

Just keep in mind that while we may have tested all of these plugins with different images, you will find that the results vary depending on the image you use. If you want to tackle image optimization seriously for your own projects, we recommend that you take the time to individually test some of our frontrunners to see for yourself just which plugin you prefer.

Have you found different results with any of these image optimization plugins? Let us know and subscribe to the comments section below!

Article featured image by Mikhail Grachikov / shutterstock.com

SELECT
s.id,
st.status,
s.domain_name_context_md5 AS ctx ,
st.value AS translated,
st.mo_string AS mo_string,
s.value AS original,
s.gettext_context
FROM wp_icl_strings s
LEFT JOIN wp_icl_string_translations st
ON s.id=st.string_id
AND st.language=’en’
AND s.language!=’en’
WHERE s.context = ‘default’
LIMIT 1000 OFFSET 5000 made by activate_plugin

해당 에러와 같은 비슷한 에러가 일어나는 경우가 있다. 

대충 살펴보다 보면, 데이터베이스 wcl_wp_icl_string_translations 에서 error가 발생한 사항을 확인할 수 있는데, 이는 WPML의 Table Schema Setting 이 Server에서 사용되는 Table Schema Set에 적합하지 않아서 발생하는 문제이다. 

이 문제사항을 해결하기 위해서는 총 3가지를 점검해야하는데

1. MySQL Version

2. PHP Version

3. PHP script 내부에서의 query상의 오류이다.

불러오려는 데이터필드 일부를 찾을수가 없거나, 필드가 제대로 명시되어 있지 않은 경우 발생할 수 있다.

내 경우는 Mangboard와 WPML간의 호환성이 맞지 않아서 발생하는 문제인 줄 알았는데 그것이 아니라...

망보드에서 사용하려는 Filed Set을 찾을 수 없어서 발생하는 문제였다.

Plugin Author

mrdenny 

(@mrdenny)

1 year, 5 months ago

It appears that your MySQL database is rejecting the tables because it doesn’t like the length of the key in some of the tables.

I checked the table definitions and I didn’t see any indexes that were anything close to 3072 bytes (there was one I saw that was a little over 1000 bytes).

Do you know what version of MySQL you are running? Can you take a screenshot of the tables that were created? That should tell me which ones are missing and point me to potential issues.

공유하고싶을 만한 좋은 글, 상품소개등을 쓰고 나면 자신의 블로그글을 SNS나 사이트, 메신저등으로 여기저기에 링크를 공유하는 분들이 꼭 있을 겁니다. 그것은 SEO뿐만 아니라 바이럴, 입소문등을 위해 꼭 필요한 것이죠. 글과 페이지의 URL(링크주소)은 자신이 공유할 수도 있고, 다른 사람이 공유할 수도 있습니다.

이번글은 SEO(검색엔지 최적화)와도 매우 밀접한 관계가 있습니다만 SNS 마케팅에 민감한 분들에게 더욱 중요한 얘기일 겁니다.

그리고 워드프레스 테마를 개발하는 사람이라면 필수로 알아야할 사항이기도 합니다. SNS에 최적화된 테마를 만드는건 중요하니까요.

• 공유되는 링크의 형태
• 사이트나 SNS에 공유되는 링크의 썸네일
• 오픈그래프 메타태그
• 이미 공유된 링크의 프리뷰 갱신하기

공유되는 링크의 형태에 대해서

저는 링크의 표시형식에 매우 민감한데요. 제가 콘트롤 할 수 있는 부분이라면 어떤 형태가 적합할지 링크마다 고민을 하게 됩니다. 예를 들어 제 블로그 본문에 다른글이나 다른 사이트의 링크를 걸 때는 아래 3가지로 나눌 수 있습니다.

1. 그냥 URL 그 자체가 표시된 링크
   • 예시: https://swiftcoding.org/getting-started-with-elementor
2. 문장속 문맥적인 링크
   • 예시: 몇일 전에 Elementor 시작 방법에 관한글을 포스팅했습니다.
3. 썸네일 이미지가 함께 표시된 링크.(임베딩. 아래 예시)

워드프레스 ELEMENTOR 플러그인 사용방법: 페이지 제작 시작하기

1번은 사람들이 손쉽게 링크주소라는 걸 알 수 있어서 눌러볼 확율이 크며 어떤 사이트로 연결될지 알 수 있지만 지저분합니다. 링크자체로는 별다른 정보를 제공하지도 못하죠.

2번은 자연스럽게 문장과 어우러져 있어 깔끔하며 구글 SEO에 친화적입니다. 다만 CSS 스타일로 잘 표시해줘야 링크라는 것을 사람들이 알아볼 수 있습니다. 

3번은 많은 정보를 담고있는데다가 ‘예쁘죠’.  요즘 트렌드입니다.

3번 방식은 기술적용어로 ‘임베딩, embedding’ 이라고 하는데 보통 HTML 태그중 하나인 <iframe>이 사용됩니다. 이것은 유튜브 영상을 공유하는 방식과도 같죠.

HTML코드를 수정해서 <iframe>을 넣을수는 있지만 매우 번거롭습니다. 하지만 워드프레스 4.8 버전대에 들어서면서 본문 글에 링크만 붙여넣어도 위처럼 자동으로 임베딩되도록 편리해졌습니다. 

사이트나 SNS에 공유되는 링크의 썸네일

이번 포스팅은 위처럼 3번과 같은 형태에대한 ‘타사이트에 공유된 링크의 썸네일’에 관한 얘기입니다. 이것을 바꾸고 싶을 때가 있을 수 있는데 어떻게 바꿀까하는 것이죠.

페이스북, 트위터, 네이버, 인스타그램등등에서 꼭 iframe 임베딩 방식이 아니더라도 어떻게든 링크를 ‘썸네일을 함께’ 표시하는게 요즘 트렌드인데요. 사용자가 꼭 임베딩과같은 HTML 언어 수정을 하지 않더라도 링크만 공유하면 알아서 척척척 썸네일 이미지까지 넣어주죠. 썸네일을 표시하는 방법도 저마다 다릅니다. 아래 예를 볼까요.

또다른 예로 클리앙같은 커뮤니티 사이트는 ‘선택적’으로 그런 동작을 하도록 프로그래밍 되어있습니다. 사용자가 공유한 링크가 유튜브, 비메오같은 영상링크일 때만 비디오 썸네일을 표시하죠. 워드프레스 블로그글 링크를 본문에 작성해도 썸네일을 표시해주지 않습니다.

 이러한 것들은 어떻게 표시할지, 수정이 가능할지등은 전적으로 해당 사이트에 달려있습니다. 우리가 어찌할 수 있는게 아니죠.

비단, 썸네일이미지뿐만 아니라 글제목, 요약이 포함되기도하고 사이트 이름, 주소가 표시되기도 하는데 사이트마다 정식 용어도 제각각이죠.

트위터에서는 트위터 카드, 페이스북은 오픈 그래프 마크업(링크 미리보기), 카카오톡은 링크 미리보기, 아이폰과 맥북 사용자가 쓰는 메신저인 iMessage(아이메시지)에서는 링크  프리뷰(Link Previews)라고 합니다. 

참고: 페이스북 사용자들은 보통 포스팅 썸네일이라고 부르곤 합니다.

오픈그래프 – URL의 제목, 특성이미지를 알려주는 메타태그

글이나 페이지에 아무리 특성이미지를 지정해줘도 공유되는 링크에 특성이미지가 썸네일로서 나타나지 않고 사이트 로고만 나올 때도 있을 겁니다. 사이트 로고 조차 없다면 빈칸일테고요. 

 웹페이지에서 제목, 요약, 대표이미지를 인식하는 것은 HTML의 오픈 그래프(og, open graph) 메타태그에 의존하곤 합니다. 그러므로 자신의 워드프레스 테마가 페이지의 HTML 헤더에 메타 태그를 작성하면서 <meta> 태그중 하나가 그 속성(property)로 “og:image”를 작성해줘야합니다. 그 메타데이터에 콘텐트(content)에 특성이미지의 주소를 넣어줘야하죠.

이미지뿐만 아니라 제목, 요약, 사이트이름등도 있죠. 이러한 오픈그래프 메타정보를 HTML로 작성해주는 테마가 SEO 최적화에 좋은 테마라고 할 수 있습니다. 자신의 테마가 오픈그래프 태그를 지원하지 않는다면 그것을 작성해주는 플러그인도 있는데요. Yoast SEO 같은 플러그인을 사용해도 됩니다. 

자신의 테마가 이미 오픈그래프를 작성한다면 Yoast SEO 사용자는 중복된 메타태그 사용을 지양하기위해 관리자페이지 > SEO > Social 의Facebook 이나 Twitter 항목에서에서 오픈그래프 사용을 끌 수 있습니다(Disabled). 종종 테마에 딸린 기능은 개별글 별로 콘트롤이 안되므로 Yoast SEO보다는 가능하다면 사용하는 테마의 오픈그래프 기능을 끄는걸 추천합니다.

이미 공유된 링크의 프리뷰 갱신하기

SNS에 보여지는 링크 미리보기는 내 워드프레스 서버의 이미지 주소, 제목등을 사용하지 않곤합니다. 페이스북, 트위터, 카카오톡 위 3가지가 가장 대표적인 예인데 다른 곳도 어떨지 모르겠지만 이런것들 모두 어떤 링크주소가 최초로 공유될 때 그 상태를 자기들 서버에 저장(캐싱)합니다.

내가 공유했든, 남이 내 링크를 공유했든 최초공유된 링크의 정보(썸네일, 제목, 요약등)를 자기네 (CDN) 서버에 저장합니다. 그리곤 같은 링크주소가 또 다른 누구에 의해서든 재공유되면 전에 저장해둔 자기네 서버 데이터를 끌어다 보여줄 뿐 더이상 원본 사이트를 참고하지 않아요. 

그래서 특정 글이 한번이라도 공유된 적이 있는 글을 제목, 요약, 특성이미지등을 변경했다면 SNS에 나타나는 미리보기 정보도 바꿔야할 테고 그럴려면 해당 서비스의 개발자 페이지에 방문해서 다시 스크랩하도록 말해줘야합니다. (요청한뒤 새로 반영되려면 약간의 시간이 걸리는 편입니다)

• 트위터 썸네일 갱신 페이지: 트위터 카드 벨리데이터
  • Card URL에 링크주소를 넣고 Preview card 버튼 클릭
• 페이스북 썸네일 갱신 페이지: 페이스북 공유 디버거
  • 공유디버거 > 링크주소입력 > 디버그 > 새정보 가져오기 또는 다시 스크랩
• 카카오톡 썸네일 갱신페이지: 카톡 개발자 캐시 삭제도구
  • URL 입력 > 요청 클릭: 공유된적 없거나 이미 삭제요청이 되었을 경우 ‘스크랩된 URL이 아닙니다’ 메시지가 나옵니다.

새로 스크랩하도록 하는 일은 원본 사이트의 주인이 아니더라도 할 수 있습니다. 위 링크들은 본래 웹페이지를 개발할 때 테스트하는 용도이기도 하는데 여기서 경고하는 것들을 수정해주면 SEO에 도움이 되기도합니다. 

링크 미리보기와 인터넷 가짜뉴스

요즘들어 SNS 가짜뉴스로 여러가지 말이 있는데요. 예전에 횡횡했던 방식으로는 가짜뉴스를 퍼트리면서 SNS 링크공유를 통해서 트래픽을 모으는 무리들도 있었다고 합니다. ‘이럴수가’, ‘충격’적인 제목과 썸네일로 나타난 포스팅 썸네일을 눌러보니 광고글로 연결되는 거죠.

그 때문에 페이스북의 공유디버거는 본래는 공유된 링크 미리보기의 제목등을 다르게 수정 할 수 있었지만 2017년 부터는 오직 스크랩을 통해서만 페이지정보를 가져와 일치시키도록 바뀌었습니다.

요즘엔 가짜뉴스 그 자체가 돈이 되다보니 진짜로 가짜뉴스 페이지를 생성하는 사람들이 늘은터라 그 조차도 별 효력을 발휘하지 못하지만 말예요. 가짜뉴스에대한 처벌 법안이 논의되고 있는 시점이니 정직한 포스팅을 하도록 합시다.

참고: 검색엔진 인덱싱

글 제목이나 요약글, 이미지를 수정했다면 구글웹마스터에서도 인덱싱을 요청해줄 수 있습니다. 사이트맵을 등록했다면 바로바로 인덱싱을 하지 않아도 시간이 지나면 알아서 갱신해줄 것입니다.

특성이미지를 업로드했더라도 썸네일 이미지로 표시하고 말고는 구글 마음입니다. 구글은 검색결과에 썸네일을 잘 사용하지 않아요.

네이버웹마스터는 2018년 9월경 새로운 정책업데이트로 인해 이미 한번 인덱싱한 페이지는 중복이라면서 수동 재인덱싱 요청을 받지 않는 것같습니다. 이 또한 네이버 검색엔진에 전적으로 달려있을 뿐입니다.

워드프레스-우커머스 쇼핑몰을 구축하고서 페이팔계정을 입력하면 일단은 결제가 되기는 하는데.

상품의 재고관리가 되지 않는 오류가 있다. 

그 이유는 페이팔에서 결제가 완료되었다는것을 사이트로 보내지 않기 때문이다.

방법은 우커머스 공식 설명서인 http://docs.woothemes.com/document/paypal-standard/ 에 나와있는것을 참고로 작성하도록 하겠다.

1. 일단 http://paypal.com 접속. 후 로그인

2. Profile 누르고 Profile and settings.

3. 왼쪽에 My selling tools

4. 이런화면이나올텐데 Selling online 중에 Website preferences 오른쪽에있는 Update

5. Auto Return On으로 체크하고 밑에 Return URL에 https://사이트주소/checkout/order-received/ 적고

   그 밑에 Payment Data Transfer (optional) On 으로 체크 한다음 밑으로 내리고 save

6. 그다음 다시 Selling online 중에 Website preferences 들어가게되면 Payment Data Transfer 아랫쪽에

 Identity Token: sajhfhajkfdhdfjashdfj  이런식으로 적혀있을텐데 Identify Token 문자열을 복사해서 메모장같은데에 붙여넣는다.

7. 나온다음 My selling tools 다시 들어가질텐데 Getting paid and managing my risk 탭에 Instant payment notifications

오른쪽  Update 들어가면 이런화면이 나올텐데 Choose IPN Settings 누르고 들어감

8. 이런화면나오면 Notification URL 칸에 http://사이트주소/?wc-api=WC_Gateway_Paypal 적고 밑에 lPN messages Receive IPN messages (Enabled) 체크하고 Save 누르게 되면 페이팔에서 하는연동은 일단 끝나게되고 자신의 우커머스 사이트 관리자페이지로 들어간다.

9. 우커머스 관리자페이지 왼쪽 메뉴에 Woocommerce - settings 들어가고,

위쪽메뉴 Checkout 선택후, Paypal 탭에 들어간다.

그다음 PayPal identity token 을 찾아서 그부분에 아까 복사해놓은 문자열을 적고 Save changes 누르면 연동이 완료된다.

출처: https://trinityforce.tistory.com/category/web-wordpress [HK-IT]

출처: https://trinityforce.tistory.com/category/web-wordpress [HK-IT]

출처: https://trinityforce.tistory.com/category/web-wordpress [HK-IT]

출처: https://trinityforce.tistory.com/category/web-wordpress [HK-IT]